A lesson on Callbacks, Promises, Async Await, Fetch
-
This is an individual project. Log into your GitHub and do the following:
- FORK this repository onto your github
- Copy the https URL from your FORKED repo
- Navigate to Git Bash on your local machine and
cd
to a place you wish to clone this activity to work on it - Once where you need to be in bash, run
git clone
followed by the URL you copied from your forked copy of this github repository - Open VSCode, select
File
in the top left, and selectOpen Folder
- Find the folder you cloned named
jfs-async
and open it, then begin working in themain.js
file while using the instructions below.
-
Work to solve each step of this activity, one by one. If you get stuck, don't forget to use your Google and problem solving skills. Your instructor will be available to help you if you get stuck.
-
When you are finished with the activity, submit a pull request from your fork!
Before proceeding to step 1, please look through ALL of the code in the main.js
file to get aquainted with the project, and have a grasp of the content before you dive in.
- Navigate to the getRate() function in main.js
- Make a fetch call within
getRate()
using the provided URL - (You can use traditional promise handling with .then() and .catch() or async await)
- When the fetch is successful, console.log 'Retrieved Bitcoin Rates from API!'
- Handle any possible error accordingly, and console.log it
- Hint: Remember that fetch already returns a promise.
- If you need help with fetch you can read about it here:
- (A basic fetch request is all you should need to use for this exercise)
- https://developer.mozilla.org/en-US/docs/Web/API/Fetch_API/Using_Fetch
- Once you've received your JSON object from your
- api call, you will create a variable for each
- Bitcoin rate (One for USD, one for GBP, and one
- for EUR) and assign the proper value to it.
- (Remember you can access JSON values by
- using dot notation or bracket notation)
- Now that you have your variables with the values set to
- each Bitcoin rate, assign variables to the innerText of
- your p elements
- Feel free to add your own functionality and
- features to this exercise. Try to add a
- history function to display the past
- Bitcoin rates for each currency.
*** Bonus use Async / Await to handle Promises and chaining where possible ***