Fetch API Exercises

Getting Setup with the Practice Exercises

To get setup with these practice exercises:

  1. If you have not already downloaded the practice files, you can get them from github.com/zgordon/javascript-explained

  2. Open the folder "05-fetch-api." It should have a "starter" folder and a "completed" folder.

  3. Open the "starter" directory in your code editor

  4. Open the "starter/index.html" in your web browser and open the console for testing

Practice Exercises

  1. Write out a basic Fetch API call using fetch() and then a .then() to convert the response to JSON, then another .then() to do something with the data. Finally, add a .catch() statement

  2. Test out your basic Fetch API setup above by making a call to this API url and logging the results: https://dog.ceo/api/breeds/image/random . You should get something like this: { "status": "success", "message":"https://images.dog.ceo/breeds/akita/Akina_Inu_in_Riga_1.JPG" }

  3. Modify the Fetch API call above to log out markup for an image of the dog image: <img src="{data.message}" alt="Random Photo of a Dog" />

  4. Modify the Fetch API call above again to also add the image to the page once it is created.

  5. Take your Fetch API setup and put it into a function called getDog(). Then create an async function called initDogApi()(). Inside of this function create a variable called dogPic that awaits getDog() to return the data. Remember, you will need to modify your final .then() statement to return the correct data instead of logging it out to the console.

  6. Make a fetch request to the following Foreign exchange rates API

    with currency conversion: https://api.exchangeratesapi.io/latest. Log out the results of the query.

  7. Move the fetch request to it's own function called getRates() that returns the Fetch Promise. Create a new function called initRates() with a variables called exchange that awaits getRates(). Test by calling initRates() and make sure you have the same results as before.

  8. Build markup for a select field with an option for each of the rates. You may need to use a for in loop to iterate over the rates object. let markup = `<select id="rates">` for (let rate in exchange.rates) {

    markup += `<option value="${exchange.rates[rate]}">${rate}</option>`

    } markup += `</select>`

  9. Add the options list markup to the page. Then attach a "change" listener to the select field that logs out the value of the section field whenever there is a change: const selectField document.querySelector( `#rates) selectField.addEventListener( `change`, logValue ) function logValue(e) { console.log( e.target.value ) }

  10. Now, modify the getRates() function to take a "base" parameter that let's you select what currency you are requesting. The format will look something like below. function getRates(base = EUR) { return fetch(`https://api.exchangeratesapi.io/latest?base=${base}`) .then(response => response.json()) .then(data => data) .catch(error => console.error(error)); }`

  11. Finally, build a user interface that shows what currency you are using as a base and displays the conversion rate when you change the drop down value. Exmaple: "1 USD = DROPDOWN 1.3312118801"

  12. Setup an account and get an API Key for wordsapi.com. Then setup a variable called apiKey and save your API key to it. To make this request pass the custom header "X-Mashape-Key" with a value of your API Key. Make a fetch to the following URL to test https://wordsapiv1.p.mashape.com/words/soliloquy.

  13. Create a new function called getDefinition( word ) that takes a word as a parameter and returns a Fetch request that looks up that word. Create another function called initDictionary() with a variable called definition with the value of getDefinition(). You can pass in a word of your choice and log out definition in the console to test.

  14. Inside of initDictionary() create and add markup to the page for a text input field with an id of "word", a submit button with an id of "submit-dictionary" and a div with an id of "definition". Create an event listener function called displayDefinition() that gets called when the submit button is clicked. Have the function get the word from the input field, get the results from getDefinition( word ), and log the definition data to the console.

  15. Finally, complete the dictionary API exercise by mapping over the array of results and adding them to the results div in an unordered list. Also add a message that will appear if the results do not return any results.

  16. Make a fetch request to the following WordPress API endpoint and log the 5 latest posts to the console: https://dev-js-explained-api.pantheonsite.io/wp-json/wp/v2/posts?per_page=5

  17. Now create a new function called getPosts( numPosts ) that will return the fetch request for the posts and let you pass in a number of pages in to get. Create another function called initPosts() with a variable called posts that awaits the results of getPosts( 5 ).

  18. Take the pages from the last exercise and create an unordered list with the following format for each list item <li><a data-id="POST_ID" href="POST_URL">POST_TITLE</a></li>. Add the list of posts to the page.

  19. Attach an event listener to each post link that prevents the link from being clicked and goes out to fetch that post data using the format in the URL below. Note, you can get the post ID from the data attribute like this: el.dataset.id. When you get the post data back, display it on the page along with the title of the post below the list of posts. https://dev-js-explained-api.pantheonsite.io/wp-json/wp/v2/posts/POST_ID

  20. ‚Äč

Fetch API Projects

  1. Choose your own adventure game - death or delight

  2. Single Page Website

  3. API Driven Infinite Scroll Page