Live version: https://mjbenefiel.github.io/GifTastic/
Author: Michael Benefiel
Feel free to use some or all of this code if you're trying to complete a similar project.
Type in the gif you're looking for. Hit submit. Similar to the Google Search Engine. Simple and easy.
Below is a thorough, but not comprehensive, step-by-step process of how I got the app running in terms of code
-
Delcared variables
-
generatedButton function loops through array of topics and assigns each one to a button, then appends them to the comedian-view div
-
#add-comedian onClick pulls information typed into search box, allows user to hit the submit button and then push the information into a button. There's also a condition set up that restricts a user from pushing a blank button to the comedian-view
-
gifButton function uses AJAX call to "talk" with the GIPHY API to pull GIFs into my web app
-
Search query set up to only pull 10 GIFs per search
-
for loop runs through pulled GIFs
-
variable declared to set rating of GIF
-
attributes designating still and animated images
-
document onClick assigned to GIFs that allows user to click an image for animated effect, and click again for original/still effect.