MultiverseLearningProducts · mks257 · May 12, 2025
diff --git a/index.css b/index.css
@@ -0,0 +1,21 @@
+body {
+  font-family: Arial, sans-serif;
+  text-align: center;
+  margin: 2rem;
+}
+
+#gifResults {
+  display: flex;
+  flex-wrap: wrap;
+  justify-content: center;
+  margin-top: 20px;
+}
+
+#gifResults img {
+  width: 200px;
+  margin: 10px;
+  border-radius: 8px;
+  box-shadow: 0 2px 5px rgba(0,0,0,0.2);
+}
+
+
diff --git a/index.html b/index.html
@@ -0,0 +1,21 @@
+
+<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta charset="UTF-8" />
+  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+  <title>Giphy Search</title>
+  <link rel="stylesheet" href="index.css" />
+</head>
+<body>
+  <h1>Giphy Search</h1>
+  <form id="gifForm">
+    <input type="text" id="searchInput" placeholder="Search for GIFs..." required />
+    <button type="submit">Search</button>
+  </form>
+
+  <div id="gifResults"></div>
+
+  <script src="index.js"></script>
+</body>
+</html>
diff --git a/index.js b/index.js
@@ -1,4 +1,37 @@
-require('dotenv').config();
+//require('dotenv').config();
 
 // Print out value of API key stored in .env file
-console.log(process.env.API_KEY)
+//console.log(process.env.API_KEY)
+
+
+const API_KEY = "56pgof12jBtbTXGp0PdAzKGgchCVa5av"; 
+async function getImage(query) {
+  const endpoint = `https://api.giphy.com/v1/gifs/search?api_key=56pgof12jBtbTXGp0PdAzKGgchCVa5av&q=dog&limit=25&offset=0&rating=g&lang=en&bundle=messaging_non_clips`;
+
+  try {
+    const response = await fetch(endpoint);
+    const data = await response.json();
+    return data.data.map(gif => gif.images.original.url); // Return an array of image URLs
+  } catch (error) {
+    console.error("Error fetching GIFs:", error);
+    return [];
+  }
+}
+
+function displayGifs(gifUrls) {
+  const container = document.getElementById("gifResults");
+  container.innerHTML = gifUrls
+    .map(url => `<img src="${url}" alt="GIF" />`)
+    .join("");
+}
+
+document.getElementById("gifForm").addEventListener("submit", async (e) => {
+  e.preventDefault();
+
+  const query = document.getElementById("searchInput").value.trim();
+  if (!query) return;
+
+  const gifs = await getImage(query);
+  displayGifs(gifs);
+});
+
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -18,6 +18,6 @@
   },
   "homepage": "https://github.com/MultiverseLearningProducts/Async-Giphy#readme",
   "dependencies": {
-    "dotenv": "^16.0.3"
+    "dotenv": "^16.5.0"
   }
 }