Merge pull request #35 from dhruti26/giphy_api

Added Giphy API
dishamodi0910 · Oct 7, 2023 · 6e121da · 6e121da
2 parents c026be0 + c7c962e
commit 6e121da
Show file tree

Hide file tree

Showing 5 changed files with 169 additions and 0 deletions.
diff --git a/Existing_API_Collection/GiphyAPI/README.md b/Existing_API_Collection/GiphyAPI/README.md
@@ -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/
diff --git a/Existing_API_Collection/GiphyAPI/image.png b/Existing_API_Collection/GiphyAPI/image.png
diff --git a/Existing_API_Collection/GiphyAPI/index.html b/Existing_API_Collection/GiphyAPI/index.html
@@ -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>
diff --git a/Existing_API_Collection/GiphyAPI/script.js b/Existing_API_Collection/GiphyAPI/script.js
@@ -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);
+        });
+}
diff --git a/Existing_API_Collection/GiphyAPI/style.css b/Existing_API_Collection/GiphyAPI/style.css
@@ -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;
+}