thestreamteam12/giphy

Giphy

Project Description

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 AJAX 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]

Day 1

Set-Up

• Go to the repository at https://github.com/ScriptEdcurriculum/giphy
• Fork this repository to your github account and clone it to a new workspace
• Review your Starter Code and make sure you understand what code has already been written for you.
• Add, commit, and push your changes
• Make your site live on gh-pages

JS

• Create an AJAX function inseide the click handler
• Get the response from using your search URL https://api.giphy.com/v1/gifs/search?q=puppy&rating=pg&api_key=dc6zaTOxFJmzC
• Display the original image to the screen

Wrap

• Push your changes!

Day 2

JS

• Take user input from the input box when button is clicked
• Update the API request url based on user input
• Display the image to the screen

Wrap

• Push your changes!

Day 3

JS

• Complete 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.

Wrap

• Push your changes!