GifTastic

Overview

---

In this assignment, use the GIPHY API to make a dynamic web page that populates with gifs of your choice. To finish this task, you must call the GIPHY API and use JavaScript and jQuery to change the HTML of your site.

Requirements

---

The app takes the entered search term topics from a user input box and pushes them into array from which it creates buttons in the HTML. Clicking on a button 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 should animate.
• If the user clicks the gif again, it should stop playing.
• With every gif is displayed its rating (PG, G, etc.).

Files

---

• index.html

• style.css

• gif.js

Technologies Used

---

• HTML
• CSS Bootstrap
• JavaScript to make the page dynamic
• jQuery for Dom Manipulation
• AJAX for API GET requests

Code Explanation

---

• A form was implemented to take the value from a user input box and add it into the topics array.
• CSS Bootstrap was used to arrange the page into columns and display the gifs in a gallery format.
• AJAX Call to Giphy's API was created to access the images by topic entered.
  • Code and Syntax for AJAX Call.

  $.ajax({
      url: queryURL,
      method: "GET"
  }).then(function(response){
      //CODE HERE
  });

• Event listeners on "click" were utilized:
  • To execute the function that adds topics to the array and render the buttons.
  • To display the details of the movie and gifs from two different APIs to the page by clicking on the topic buttons.
  • To pause and play the gifs by clicking on the Gifs.
  • To add the gifs to favourites by clicking the favourite buttton.
  • To remove the gifs from favourites by clicking the remove buttton.
  • To show the favourite gifs by clicking on the show favourite button.
  • To download the gifs by clicking download button.

Additional Features

• The app is fully mobile responsive.

• Integrated the search with additional APIs such as OMDB.

  • Code and Syntax to integrate search with OMDB APIs.

  var queryURL1 = `https://api.giphy.com/v1/gifs/search?q=${movieName}&api_key=A2Hw4RAXUAp9JUnpyZh9PqNapjox1Tj6&limit=${previousCount}`;
  var queryURL2 = `http://www.omdbapi.com/?t=${movieName}&apikey=trilogy`;
  $.when( $.ajax({ url:queryURL1,method:"GET",dataType:"json"}), $.ajax({url:queryURL2,method:"GET",dataType:"json"})).then(function(response,omdbResponse ) {
  });

• Allow users to request additional gifs to be added to the page.

  • Code and Syntax to request additional gifs.

  var queryURL = `http://api.giphy.com/v1/gifs/search?q=${movieName}&api_key=A2Hw4RAXUAp9JUnpyZh9PqNapjox1Tj6&limit=${previousCount}`;

• Download button for each gif images that opens in new tab to right click and save image.

  • Code and Syntax to download gifs.

  newAnchor.attr("download","file.jpg");

• Allow users to add/remove their favorite gifs to a favorites section, made this section persist even when the page is reloaded via localStorage.

  • Code and Syntax to store/retrieve data from localStorage.

  localStorage.setItem("fav",JSON.stringify(favourites));
  
  favourites = JSON.parse(localStorage.getItem("fav"));

  • Code and Syntax to add gifs to favourites.

  favourites.push(favId);

  • Code and Syntax to remove gifs from favourites.

  favourites.splice(remIndex,1);

NOTE

• watch the demo video

• Link to my GifTastic App