Skip to content
No description, website, or topics provided.
JavaScript HTML CSS
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
README.md
index.html

README.md

Giftastic

A curated GIF page

https://matt-elliott.github.io/Giftastic

USAGE

Follow link above and type in a search term to receive gifs.

THE BUILD

Built on Node.js this app utilizes the Giftastic api to serve gifs that match the user's search.

TODOS

  • Write algorithm
  • Write JavaScript
  • Style page
  • Make responsive
  • Submit Beta release
  • Add favorites functionality to algorithm
  • Create favorites functionality
  • Add pagination functionality to algorithm
  • Create pagination functionality
  • Submit Alpha release

Psuedo Code

  1. Create variable equal to an array of topics in string format
var topics = […];
var query = ''; //create query variable as string to be assigned later either by button click or user input 
var queryString = url${query}[paramaters]

//use on.('click', document, classname) to add listener to button clicks to buttons before theyre generated
//use on.('click', document, classname) to add listener to gif clicks to animate gif
//add listener to input submit
//button click handler = getGifs()
//gif click handler = playGif()
//input submit handler = addTopic()
  1. loop over topics and make them into buttons on DOM
topics.forEach(function(topic)) {
  //create button with topic name
}
  1. when user clicks button app should grab ten gifs and display them still
function getGifs() {
  $.ajax({
    url: queryUrl,
    method: "GET"
  }).then(function(response)) {
    //for each response item received generate figure, image, and figcaption with meta data
    response.data.forEach(function(item)) {
      //make utility function to create figure elements with jQuery and call here
      //create figure element and populate with gif and meta data
      //use data-state to hold if gif is animating or still
      //use data-still and data-animated to hold paths to still and animated forms of gif
      ////use mp4 for animation and puse video instead? [submit as side assignment]
  });
}
  1. on click gif animates
  function playGif() {
    if gif is not playing
      play gif
    else
      stop gif
  }
  1. add an input that adds user input to buttons
  function addTopic() {
    //prevent default event
    //get value from input
    //use jQuery to create new button on DOM
  }
You can’t perform that action at this time.