In this unit, you will create a Giphy App. The Giphy App will take a search term as an input and display a random Gif in a thumbnail on the screen. To create this project, you will learn the anatomy of an API Request, use Promises to make a simple GET request, handle a JSON response object, and use jQuery to display a gif.
Follow the steps below to make your very own site! Make sure to check off your items as you complete them. [ ] => [x]
- Copy the project planning document and link a completed version in your ReadMe.
- Go to the repository at https://github.com/itscodenation/Giphy
- Fork this repository to your Github account and pull it down to Glitch.
- Create a working fetch() request inside the click handler.
- Declare a variable that stores the following API request URL: https://api.giphy.com/v1/gifs/search?q=puppy&rating=pg&api_key=dc6zaTOxFJmzC
- Get the response from the API request.
- Log the response to the console.
- Push your changes!
- Save and submit your website link using the link on the session agenda.
- Using the same API request URL from last class, display the image from your console.log to the webpage.
- Declare a variable and store the user's input inside of it.
- Use this variable to update the API request URL based on the user's input.
- Display the updated image on the screen.
- Push your changes!
- Declare a variable that stores a random number from 0 to the total number of items (different GIFs) in the response
- Use this random variable to display a random GIF onto the screen
- Push your changes!
- Display multiple images in the response to the screen.
- Create a mail_to link that will email the GIF to anyone you want.
- Make the GIF pop out in a modal when clicked on.