Skip to content
🌌 A space-themed web page I made that makes calls to the GIPHY API and displays relevant gifs: https://thornolan.github.io/AJAX-Gif-Finder/
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
LICENSE
README.md
index.html

README.md

GIF Me Some Space

A simple site I made that populates the page with relevant gifs based on keyword searches from user input and button presses. The theme is space, so the first buttons that appear on the navbar are all space themed, but users are free to add any additional themes they would like using the form on the page.

demo image

Technologies Used

  • Page elements and styling were done with HTML5 and CSS3, and the game logic with JavaScript.

  • I used the jQuery library to dynamically update elements on my page and generate buttons based on user input.

  • Based on keyword searches from user input, I make Ajax calls to the GIPHY API to generate relevant gifs.

  • Built using the Bootstrap CDN for general page layout and added responsiveness.

  • The hover effect for buttons came from Hover.css (http://ianlunn.github.io/Hover/), though I customized it in my own css to better match my theme.

How to Use the Site

  1. Press any of the buttons to search for a gif with that theme, or type in a keyword in the empty search bar relating to whichever topic you want to search! This will then appear as a button that can be clicked to generate 10 relevant gifs.

  2. The page will be populated with static gifs based on your search.

  3. Click on a gif to "play" it, and click again to pause it. You also have the option of downloading the gif if you want.

  4. If you're looking at this site on mobile, it's touch friendly! Touch a gif to play it.

Click here to try it out!

Author

Thor Nolan

You can’t perform that action at this time.