Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Added Giphy API #35

Merged
merged 1 commit into from
Oct 7, 2023
Merged
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
21 changes: 21 additions & 0 deletions Existing_API_Collection/GiphyAPI/README.md
Original file line number Diff line number Diff line change
@@ -0,0 +1,21 @@
GIPHY API:
-This API allows developers to integrate Giphy's vast library of GIFs into their own applications, websites, and services.
-Each GIF in the Giphy library comes with rich metadata, including titles, tags, source URLs, and user information.

Future Scope:
-Future iterations of the Giphy API may support more interactive GIFs that allow users to interact with elements within the GIF itself.
- Developers may have access to more detailed analytics and insights related to the usage of GIFs through the API.

Implementation:
-The JavaScript code contains an HTTP request to the GIPHY API's and authenticated api key, it fetches list of gifs from api and show it to users with downloading it functionality.

Tech Stacks used:
- HTML (frontend)
- CSS (styling)
- Javascript (API Implementation)

Output :
![Output](image.png)

Reference:
https://developers.giphy.com/dashboard/
Binary file added Existing_API_Collection/GiphyAPI/image.png
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
26 changes: 26 additions & 0 deletions Existing_API_Collection/GiphyAPI/index.html
Original file line number Diff line number Diff line change
@@ -0,0 +1,26 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Giphy API Example</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<header>
<h1>Giphy GIF Viewer</h1>
<div class="search-bar">
<input type="text" id="search-input" placeholder="Search for GIFs">
<button id="search-button">Search</button>
</div>
</header>

<main>
<div id="gif-container">
<!-- GIFs will be displayed here -->
</div>
</main>

<script src="script.js"></script>
</body>
</html>
30 changes: 30 additions & 0 deletions Existing_API_Collection/GiphyAPI/script.js
Original file line number Diff line number Diff line change
@@ -0,0 +1,30 @@
const apiKey = 'Ls5S6Pix3itW3ha6XFFmsksFS5k7SZZl';
const searchInput = document.getElementById('search-input');
const searchButton = document.getElementById('search-button');
const gifContainer = document.getElementById('gif-container');

searchButton.addEventListener('click', searchGIFs);

function searchGIFs() {
const searchTerm = searchInput.value;
const apiUrl = `https://api.giphy.com/v1/gifs/search?q=${searchTerm}&api_key=${apiKey}&limit=10`;

//make api request
fetch(apiUrl)
.then(response => response.json())
.then(data => {
gifContainer.innerHTML = ''; // Clear previous GIFs
data.data.forEach(gif => {
const gifElement = document.createElement('div');
gifElement.className = 'gif-item';
gifElement.innerHTML = `
<img class="gif-image" src="${gif.images.fixed_height.url}" alt="${gif.title}">
<a class="download-button" href="${gif.images.original.url}" download="${gif.title}.gif">Download</a>
`;
gifContainer.appendChild(gifElement);
});
})
.catch(error => {
console.error('Error fetching GIFs:', error);
});
}
92 changes: 92 additions & 0 deletions Existing_API_Collection/GiphyAPI/style.css
Original file line number Diff line number Diff line change
@@ -0,0 +1,92 @@
body {
font-family: Arial, sans-serif;
text-align: center;
background-color: #f5f5f5;
margin: 0;
padding: 0;
}

header {
background-color: #333;
color: #fff;
padding: 20px;
box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
}

h1 {
margin: 0;
}

.search-bar {
display: flex;
justify-content: center;
align-items: center;
margin-top: 20px;
}

input[type="text"] {
padding: 10px;
font-size: 16px;
border: none;
border-radius: 4px 0 0 4px;
width: 60%;
}

button {
padding: 10px 20px;
background-color: #555;
color: #fff;
border: none;
border-radius: 0 4px 4px 0;
cursor: pointer;
width: 20%;
}

button:hover {
background-color: #333;
}

main {
padding: 20px;
}

#gif-container {
display: flex;
flex-wrap: wrap;
justify-content: center;
}

.gif-item {
margin: 10px;
max-width: 250px;
text-align: center;
background-color: #fff;
border: 1px solid #ddd;
border-radius: 4px;
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
transition: transform 0.2s;
overflow: hidden;
}

.gif-item:hover {
transform: translateY(-5px);
}

.gif-image {
max-width: 100%;
height: auto;
}

.download-button {
display: block;
background-color: #333;
color: #fff;
padding: 10px 0;
text-decoration: none;
border-radius: 0 0 4px 4px;
cursor: pointer;
}

.download-button:hover {
background-color: #555;
}
Loading