GIF Search Application using Pure JavaScript and API Source Code Free Download

[tVdpV9g]

This simple project is entitled GIF Search Application. It is a web-based application that allows visitors to browse and explore GIFs. This project was mainly developed using Pure JavaScript and Giphy API. It has a simple and pleasant user interface using Custom CSS (stylesheet). It contains simple and easy-to-use features and functionalities.

What is GIF?

GIF stands for Graphics Interchange Format image. It is a digital file format created in 1987 by Internet service provider CompuServe to help graphics and brief animations be smaller.

How does this GIF Search Application work?

This GIF Search Application is a straightforward web application that uses the Giphy API for listing different GIFs. The application does not require visitors to log in or register to explore and browse the GIFs. By default, the application will list 20 trending GIFs. This application contains a load more functionalities that enable the visitor to load more GIFs. When the Load More button is clicked, a loader will show at the bottom of the GIF's card wrapper and will append the newly fetched GIF items. Here, visitors can also copy the link of the GIF they wanted and open the source link of the GIF. Visitors can simply search for a GIF by inputting a certain keyword in the provided search box and hitting enter.

Features and Functionalities

This GIF Search Application is containing the following feature:

• List GIFs with details (Grid View)
  
• Load More Button
  
• Load More Loader
  
• Copy GIF Link Button
  
• Redirect to the GIF Source Button
  

Technologies

Here is the list of technologies I used to develop this project

• Giphy API
  
• HTML
  
• CSS
  
• JavaScript
  
• Google Fonts
  
• Google Icons
  

Snapshots

Here are some snapshots of this GIF Search Application project:

Page Interface

Load More Button

GIF List Loader

The GIF Search Application complete source code zip file is available on this website and is free to download. Feel free to download and modify the source code the way you desire to meet your own requirements. Please note that this project was developed for educational purposes only.

How to Run?

1. Download the provided source code zip file. (download button is located below)
   
2. Extract the downloaded source code zip file.
   
3. Locate the script.js file in the extracted source code directory and open it with your preferred text editor.
   
4. Add your Giphy Application API Key on the apiKey constant.
   
5. Locate the index.html file in the extracted source code directory.
   
6. Browse the index file with your preferred browser.
   

DEMO VIDEO

How to Get a Giphy Application API Key?

1. Register and Login to Giphy Developer Dashboard
   
2. Click the Create an App located at the dashboard navbar and Select API.
   
3. Supply the required fields in the form for creating an App.
   
4. Copy the API Key Provided from your created App.
   

Giphy Developer Dashboard

That's it! I hope this GIF Search Application using Pure JavaScript and API Source Code will help you with what you are looking for and that you'll find something useful for your current and future web application projects.

Explore more on this website for more Tutorials and Free Source Codes.

Happy Coding =)

Note: Due to the size or complexity of this submission, the author has submitted it as a .zip file to shorten your download time. After downloading it, you will need a program like Winzip to decompress it.

Virus note: All files are scanned once-a-day by SourceCodester.com for viruses, but new viruses come out every day, so no prevention program can catch 100% of them.

FOR YOUR OWN SAFETY, PLEASE:

1. Re-scan downloaded files using your personal virus checker before using it.

2. NEVER, EVER run compiled files (.exe's, .ocx's, .dll's etc.)--only run source code.

Download