diff --git a/index.css b/index.css
new file mode 100644
index 0000000..04e9f4d
--- /dev/null
+++ 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
new file mode 100644
index 0000000..11396f1
--- /dev/null
+++ b/index.html
@@ -0,0 +1,21 @@
+
+
+
+
+
+
+ Giphy Search
+
+
+
+ Giphy Search
+
+
+
+
+
+
+
diff --git a/index.js b/index.js
index 5d6a968..e519b8e 100644
--- 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)
\ No newline at end of file
+//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 => `
`)
+ .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
index 92d7c0f..e6ada41 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -9,23 +9,27 @@
"version": "1.0.0",
"license": "ISC",
"dependencies": {
- "dotenv": "^16.0.3"
+ "dotenv": "^16.5.0"
}
},
"node_modules/dotenv": {
- "version": "16.0.3",
- "resolved": "https://registry.npmjs.org/dotenv/-/dotenv-16.0.3.tgz",
- "integrity": "sha512-7GO6HghkA5fYG9TYnNxi14/7K9f5occMlp3zXAuSxn7CKCxt9xbNWG7yF8hTCSUchlfWSe3uLmlPfigevRItzQ==",
+ "version": "16.5.0",
+ "resolved": "https://registry.npmjs.org/dotenv/-/dotenv-16.5.0.tgz",
+ "integrity": "sha512-m/C+AwOAr9/W1UOIZUo232ejMNnJAJtYQjUbHoNTBNTJSvqzzDh7vnrei3o3r3m9blf6ZoDkvcw0VmozNRFJxg==",
+ "license": "BSD-2-Clause",
"engines": {
"node": ">=12"
+ },
+ "funding": {
+ "url": "https://dotenvx.com"
}
}
},
"dependencies": {
"dotenv": {
- "version": "16.0.3",
- "resolved": "https://registry.npmjs.org/dotenv/-/dotenv-16.0.3.tgz",
- "integrity": "sha512-7GO6HghkA5fYG9TYnNxi14/7K9f5occMlp3zXAuSxn7CKCxt9xbNWG7yF8hTCSUchlfWSe3uLmlPfigevRItzQ=="
+ "version": "16.5.0",
+ "resolved": "https://registry.npmjs.org/dotenv/-/dotenv-16.5.0.tgz",
+ "integrity": "sha512-m/C+AwOAr9/W1UOIZUo232ejMNnJAJtYQjUbHoNTBNTJSvqzzDh7vnrei3o3r3m9blf6ZoDkvcw0VmozNRFJxg=="
}
}
}
diff --git a/package.json b/package.json
index 68fbc35..afd459d 100644
--- 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"
}
}