Intro to Fetch & APIs

Assignment: JokeView + Pokedex

Overview

In this assignment, you will configure two different webpages to request data from an api. You will use the response data from the API to update the page with new information.

Part 1: JokeView

API Endpoint: https://official-joke-api.appspot.com/random_joke

Part 2: PokeDex

API Endpoint: https://pokeapi-ptvv.onrender.com/pokemon/team

Instructions

DO NOT USE ANY INLINE JAVASCRIPT FOR THIS ASSIGNMENT. ALL JAVASCRIPT MUST BE WRITTEN IN EXTERNAL JAVASCRIPT FILES

Part 1: JokeView

Preview

1. Link the javascript file to the html file

   • Place a script tag at the bottom of the the html file just before the closing html tag.
   
   
   • Configure the script tag to link to the javascript file by setting the src attribute of the script tag
   
   

   • Verify the javascript file was linked properly

     Add a console log statement to top of the javascript file that logs "Index.js linked successfully" to the console

     
   
   

2. When a user clicks the "See punchline" button, unhide the punchline
   
   

   • The punchline of each joke is configured to be hidden by default by setting its visibility css attritbute to hidden in the CSS file, configure to the button to set the visibility CSS attribute to visible when clicked (DO NOT MODIFY THE CSS FILE)

3. When a user clicks the "Refresh Joke" button, fetch a random joke from the Jokes API and replace the current joke on the page with a new joke

   
   
   Configure the Refresh button to print "Refreshing joke..." to the console when clicked

   
   
   
   
   Configure the Refresh button's onclick event to send an HTTP request to the JokeAPI's Random Joke endpoint and console log the response data

   
   
   
   
   • Use the fetch function to send an HTTP GET request to this url: https://official-joke-api.appspot.com/random_joke
   
   
   • Verify the request is being sent successfully by looking at the Network tab in developer tool

     
     
     • How to open network tab in Chrome
   
   
   • Verify the response data for each request is a json object with 4 properties of "type", "setup", "punchline", and "id"

     
     
     
     
   • Configure the Refresh button's onclick event to print the the response data for each request to the console

     
     
     
     
     • Create a promise chain on the fetch request to the Jokes API that:
       

       1. Converts the response data from a json string to a javascript object

       
       

       2. Console logs the resulting javascipt object

       
       

       fetch("https://official-joke-api.appspot.com/random_joke")
          .then(function (response) {
                var data = response.json(); //converts data from json string to javascript object 
                return data //pass to next function in promise chain
          })
          .then(function (randomJoke) {
                console.log(randomJoke);
          })

   
   
   Configure the Refresh button's onclick event to replace the html for the current joke on the page with the new joke that has been received from the api.

   
   

Part 2: Pokedex

Preview

1. Link the javascript file to the html file

2. When user clicks the 'Get random pokemon' button, fetch a new array of random pokemon objects from the Pokemon API endpoint and update the page with the new set of pokemon

3. The footer of each pokemon card should represent the the "type" of pokemon it holds

   • Pokemon Type	Footer Color
     Fire	Red
     Grass	Green
     Electric	Yellow
     Water	Blue
     Fairy	Pink
     Bug	Black
     Poison	Purple
     Ground	Brown
     Normal	Brown