cragady/giphy-games

Application

Hint

Click the gifs to make them move.

Main Purpose

---

The main purpose of this assignment was to utilize api's to pull gifs from giphy. This project shows understanding on basic uses of api's.

The user clicks on a button, which sends them gifs according to how the button is labeled. The user has an option to add another button for a topic of their choosing. I went with the topic of video games for most of the buttons, but if the user does not want to use video games as a topic they can input any other topic of their choosing.

Some of the Functions

---

newTopic

The newTopic function is what allows the user to add a new button with a new topic. It has an if statement that prevents a new button from being added if it is already an available topic. The weakness this function has is that it doesn't prevent a topic being put in if it is spelled incorrectly or differently. New topic calls toLower which puts the entire topics array into the topicsChecker array, which then checks it against usInCheck.

newTopic is called in the $(document).ready function.

gifyGo

gifyGo is responsible for playing and pausing gifs by checking and changing the play-status in the html, and updates the src appropriately to play the gif or pause it.

clicketyClack

This function is responsible for laying down the related gifs for the chosen topic on the button click it's associated with. The button click will reassign the value of topReq, which is used in the url, so that the ajax can make the appropriate request.

after the gifs are requested, the promise uses a for loop to display the ten gifs using a for loop, in the for loop the gifs are put in elements with the appropriate classes for sizing and placements.

Since ajax is ran asynchonously, gifyGo is called in the promise portion to ensure that after each new set of gifs are loaded, they are still able to be played and paused at the user's discretion.

btnLayout

btnLayout lays out all of the buttons with the corresponding topics, the initial topics and the newly added topics given by the user. clicketyClack is called here to keep the function on call when a new topic is added, and when btnLayout is called in the $(document).ready portion.