A Gif app with HTML, CSS, jQuery, AJAX, and Giphy API. Fun for all ages! Try it out here
- Populate a number of pre-set selection button from an array.
- Allow user to add additional buttons with keywords of their choosing.
- 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.
- When the user clicks one of the still GIPHY images, the gif will animate. If the user clicks the gif again, it will stop playing.
- The Gif's rating is displayed when hovered over
This project served as yet another reminder of how tricky front end development can be! The focus (first and foremost) was to utilize jQuery with API calls to make a dynamic user environement that updates and responds by adding and modifying content. Simply producing a grid of gifs is adequate, and my desire to present a bit more flair led me to some compromises, both in the end product and the amount of time I spent working on this project. DOM manipulation to display ratings and allow the playback to start and stop was tricky to figure out, but provided some valuable lessons.