GifTastic

Use of GIPHY API to make a dynamic web page that populates with gifs related to the word selected.

Overview:

Call the GIPHY API and use JavaScript and jQuery to change the HTML.

Author:

Lindsey Tummond

• Portfolio
• GitHub
• LinkedIn

Learning Points:

• Exploration of for loops to iterate through a block of code a number of times
• Utilization of ajax() method to send asynchronous http requests to submit data from the server without reloading the whole page
• Understanding of multiple files and how to link file structure

Technologies:

• HTML
• CSS
• Javascript
• jQuery
• GitHub
• Bootstrap
• Google Fonts

How the app works:

Use the following link https://lindseytummond.github.io/gifTastic/ to open the application.

1. The app takes the topics in an array and creates buttons in the HTML.

2. When the user clicks on a button, the page grabs 10 static, non-animated gif images from the GIPHY API and places them on the page.

3. When the user clicks one of the still GIPHY images, the gif animates. If the user clicks the gif again, it will stop playing.

4. Under every gif, display its rating (PG, G, etc).

5. A user input box is displayed which adds the word to the array and remakes the buttons on the page.

App Example: