Skip to content
Category-specific random animated GIF viewer
JavaScript CSS HTML
Branch: master
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Type Name Latest commit message Commit time
Failed to load latest commit information.


Category-specific random animated GIF viewer

JavaScript, jQuery, CSS, HTML, Bootstrap, Google Fonts, Font Awesome, GitHub, responsive web design (RWD), AJAX/async. Retrieves async data via AJAX from API and manipulates DOM.

Clicking a pre-defined subject from the right-side button column will load a randomized group of three still images of animated .gifs from GIPHY. Clicking the same button again clears those three images and loads a new randomized set of three stills. Clicking on a still activates its animation, and clicking on it again stops the animation.

Users can add additional subject buttons by typing the subject name into the "make a new category" field and then either clicking the adjacent "add it!" button, or by pressing Return/Enter. Users can also add an unlimited number of additional random images to the beginning of the existing set one at a time by clicking the + (plus) button in the upper right corner, and can clear all currently displayed images by clicking on the - (minus) button in the upper left.

Choosing a new subject category will also clear all current images and replace them with a set of three images of the new subject. Titles of the animated .gifs are also displayed on their respective Bootstrap masonry-column cards.

  • Click on the topic buttons to get three random GIFs of that topic.
  • Click on the GIFs to start and stop their animation.
  • Enter a new topic in the "make a new catgory" field and click "add it!" or hit Enter to make a new topic button.
  • Click the + (plus) to load another GIF from your current topic, or to load a completely random GIF if no topic is currently selected.
  • Click on the - (minus) to clear all GIFs from the screen and reset the topics list.
  • Click on the POWERED BY GIPHY logo to visit the Fountain of All Gifs.
  • Click on DESIGN+DEV © 2018 RICH TREVILLIAN to see more of my design and development work.

get your gif on:


©2018 Richard Trevillian
powered by GIPHY
University of Richmond, Full Stack Web Development Bootcamp
You can’t perform that action at this time.