Skip to content

Commit

Permalink
project committed
Browse files Browse the repository at this point in the history
  • Loading branch information
dhruti26 committed Oct 6, 2023
1 parent 637f671 commit c7c962e
Show file tree
Hide file tree
Showing 5 changed files with 169 additions and 0 deletions.
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;
}

0 comments on commit c7c962e

Please sign in to comment.