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.
Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
assets
screenshots
LICENSE.md
README.md
flowChart-GifTastic.jpeg
index.html

README.md

GIF.HORSE

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 GIPHY.com 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: https://landrumtrev.github.io/gif-horse/

source: https://github.com/LandrumTrev/gif-horse

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