Skip to content
A web app that uses the GIPHY API to make a dynamic web page that populates with gifs of your choice.
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
.gitignore
README.md
bootstrap_index..html
debug.log
index.html

README.md

giftastic

A web app that uses the GIPHY API to make a dynamic web page that populates with gifs of your choice.

CSS GRID & FLEXBOX

I decided to use CSS Grid and Flexbox instead of Bootstrap to get more experience and reduce the amount of HTML code.

App Checklist

  • The app creates buttons based on a topics array.
  • When the user clicks on a button, a page loads 10 gif stills (not animated) on the page.
  • When the user clicks on the image, it plays the gif animation.
  • When the user clicks on the same image again, the animation stops and reverts to the still image.
  • Each gif should display a rating (PG, G, etc.)
  • A text box on the side of the page is filled with the topic when a button is clicked.
  • The user can add their own topic to display 10 gifs after they click the submit button. The value is also added to the topics array and added as a new button.

Bonus Goals

  • Allow users to request an addition 10 gifs to be added to the page.
    • I added an imgOffset attribute to each topic button.
    • When the topic button is pressed the imgOffset value is passed to the API function and added to the "&offset=" + offset" string.
    • Finally the imgOffset attribute is increased by 10.
  • For the second API I will use the Wikipedia MediaWiki API Main Page
    • API Endpoint: https://en.wikipedia.org/w/api.php
    • JSON Example https://en.wikipedia.org/w/api.php?action=query&titles=Albert%20Einstein&prop=info&format=jsonfm
  • For searching a place I used Here's Free-text Search API to find info about the topic.
  • Will also try Wikipedia REST API

localStorage() Setup

  • I created an empty favTopics variable.
  • Used .indexOf() to make sure no duplicates can be pushed into the array.
  • localStorage() does not store arrays so you will need to use JSON.stringify to make it work.
    var favTopics = JSON.parse(localStorage["mytopics"]); \\ Global Variable
    localStorage["mytopics"] = JSON.stringify(favTopics);
    

Other Programming Notes

  • To have text wrap based on the image width I found that I needed to use width: min-content on my card class. DOESN'T WORK on Microsoft Edge though , just Chrome and Firefox.
  • Always add $(document).ready(function() {}) to a jQuery script
  • Add validation, such as if there is no string in the input don't do anything.
  • Any element generated after the listening event is created must have a different kind of event listener
    // click event for generated element
    $(document).on("click", ".card", function() {
        alert("Image Clicked");
    });
  • You can add a rating, limit, and offset to the GIPHY API cURL (Client URL) line
var queryURL = "https://api.giphy.com/v1/gifs/search?q=" + imgQuery 
                                                        + "&api_key=" + apikey 
                                                        + "&rating=" + rating 
                                                        + "&limit=" + searchLimit
                                                        + "&offset=" + offset;
  • For custom attributes I use data-, as referenced in HTML data-* Attributes

  • I created the custom attribute data-active and data-imgoffset

    • The topic buttons have the attribute data-active with true or false. If it's true then 10 more gifs are added. If False the gifs are emptied to start a new 10 gifs.
    • The topic buttons also have the attribute data-imgoffset. If the same topic button is selected the value is incremented by 10.
  • To change CSS styles dynamically I used the .css() method.

    • Ex: $(this).css({"background-color": "gray"});

Reference Links

You can’t perform that action at this time.