In this unit, you will work with your team to 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 the fetch() method to write an API request, handle a JSON response object, and use jQuery to display a gif.
Follow the steps below! Make sure to check off your items as you complete them. [ ] => [x]
- Go to the repository at
- Fork this repository to your github account and clone it to a new workspace
- Add, commit, and push your changes
- Make your site live on gh-pages
- Add an input box and button to your page
- Add an element that will be where your image result will be displayed on the page
- Include a heading for your page and write instructions for your user
- Create a fetch() request inside the click handler
- Get the response from using your search URL https://api.giphy.com/v1/gifs/search?q=puppy&rating=pg&api_key=rQrXp8Skecms5IYqoh0BS4HeQW9L35LY
- Console log the response from your API call
- Push your changes!
- Write the jQuery needed to display the original image from your API call to the screen
- Take user input from the input box when button is clicked
- Update the API request url based on user input
- Display the updated image to the screen
- Style your page using color, flexbox, and/or box model.
- Push your changes!
- Complete at least one of the folowing extensions:
- Create a button that randomly chooses only one gif from response.
- Display all the 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.
- Push your changes!