Giphy Search

We're going to create a Google Image clone for gifs! When you enter a search term, it will return the top gifs that match your search term using the Giphy API.

JS Bin on jsbin.com Click here for full screen

1. Look for Giphy api documentaion.

Hint: Many web companies have a link on their website just for developers.

2. Can you find an example of a url that returns data from the Giphy server?

Hint: Check out the "Code Examples" and "Sample Responses" sections.

3. Put together a url that follows giphy api protocols. Be careful with the URL syntax.
Limit the number of gifs in your response to 3.

Use this apiKey: 'dc6zaTOxFJmzC'

4. Test this url by putting it in your browser. If you see a wall of text, you've succeeded!

This wall of text is called a Response.
It is in JSON format.

5. Copy all the data on the page by hitting "ctrl + a" and then "ctrl + c". Go to jsonviewer.stack.hu and paste what you've into the tab that says text. Click on viewer to look at data from the server in a more intuitive and readable way. This will be helpful later.

6. It's time to start building your page. Make an input element in your HTML and define a function that captures the users entry in a variable.

7. Find a javascript function that takes a user entry and makes it into an api query or a valid uri.

8. Find a set of JavaScript functions that can make an AJAX server request.

9. Test your code. Are you sending a request to the server? Are you getting a valid response?

10. Find a javascript function to embed a single result from this query into your html.
Note: One can't access the data from json directly. JSON.parse() is a method that makes the data available for your JavaScript to manipulate.

Hint: consider using an <iframe> <\iframe> tag.

11. Convert the last function to iterate over the server response and show all your results.

12. Find a function to clear the page so that only the results of your recent search show.

13. Find a way to clear your input field so your user doesn't have to delete the previous entry before typing the new one.

14. Style your app to add color, personality and organization.