Skip to content

Interact with the Giphy API by using jQuery, AJAX, and localStorage to search for gifs and add them to your favorites.

Notifications You must be signed in to change notification settings

Mrrwmix/Giftastic

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

21 Commits
 
 
 
 
 
 
 
 

Repository files navigation

Description of the Problem

Make a website that searches the Giphy API and displays gifs as still images until clicked. Allow users to favorite gifs. Allow users to remove favorites.

How I Solved It

To allow on click events for dynamically created elements, I had to use jQuery's $("body").on("click",,function(){}) syntax.

Favoriting and unfavoriting gifs involved JSON parsing and stringifying an array. Favorited gif URLs were pushed to an array and put in localStorage. To unfavorite, the gif's URLs are removed from the favorites array.

Technical approach

Used Bootstrap to make the website mobile responsive. Created a shell first, then worked on the implementation of the Giphy API. jQuery's aforementioned syntax solved a lot of problems I was having. Lastly, challenged myself by incorporating localStorage.

Screenshots

Home

Homepage

Search

Search

Favorite

Favorite

About

Interact with the Giphy API by using jQuery, AJAX, and localStorage to search for gifs and add them to your favorites.

Resources

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published