Project

Shangli-Hou · May 2, 2024 · 273b691 · 273b691
commit 273b691
Show file tree

Hide file tree

Showing 4 changed files with 212 additions and 0 deletions.
diff --git a/.gitignore b/.gitignore
@@ -0,0 +1,2 @@
+.DS_Store
+api-Key.js
diff --git a/index.html b/index.html
@@ -0,0 +1,31 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>GIF Search App</title>
+    <link rel="preconnect" href="https://fonts.googleapis.com" />
+    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
+    <link
+      href="https://fonts.googleapis.com/css2?family=Caveat&family=Josefin+Sans:ital,wght@1,300&family=Poppins:ital,wght@1,500&display=swap"
+      rel="stylesheet"
+    />
+    <link href="style.css" rel="stylesheet" />
+  </head>
+  <body>
+    <div class="box">
+      <div class="search-container">
+        <input type="text" id="search-box" value="alf" />
+        <button id="submit-btn">Submit</button>
+      </div>
+      <!--Loader: loads until the wrapper is ready to access-->
+      <div class="loader"></div>
+      <!--Wrapper: A data structure or software that contains ("wraps around") other data or software, so that the contained elements can exist in the newer system-->
+      <div class="wrapper"></div>
+    </div>
+    <!-- API Key-->
+    <script src="api-key.js"></script>
+    <!-- Javascript file-->
+    <script src="index.js"></script>
+  </body>
+</html>
diff --git a/index.js b/index.js
@@ -0,0 +1,86 @@
+//Source: https://www.youtube.com/watch?v=oSrwWZbEAWs
+
+let submitBtn = document.getElementById("submit-btn");
+
+let generateGif = () => {
+  //display loader until gif load
+  let loader = document.querySelector(".loader");
+  loader.style.display = "block";
+  document.querySelector(".wrapper").style.display = "none";
+
+  //Get search value (default => laugh)
+  let q = document.getElementById("search-box").value;
+  // 10 Gifs to be displayed in result
+  let gifCount = 10;
+  // API URL
+  let finalURL = `https://api.giphy.com/v1/gifs/search?api_key=P6YwmNOCwztkKf1kSvJsvesuKFaDDVgo&q=${q}&limit=${gifCount}&offset=0&country_code=&rating=g&lang=en`;
+  document.querySelector(".wrapper").innerHTML = "";
+
+  // send a request (make a call) to API
+  fetch(finalURL)
+    .then((resp) => resp.json())
+    .then((info) => {
+      console.log(info.data);
+      let gifsData = info.data;
+      gifsData.forEach((gif) => {
+        // Generate card for every gif
+        let container = document.createElement("div");
+        container.classList.add("container");
+        let iframe = document.createElement("img");
+        // check if API responds with data
+        console.log(gif);
+        iframe.setAttribute("src", gif.images.downsized_medium.url);
+        iframe.onload = () => {
+          //if iframes has loaded correctly resduce the count when each gif loads
+          gifCount--;
+          if (gifCount == 0) {
+            //if all gifs have loaded the hide loader and display gifs UI
+            loader.style.display = "none";
+            document.querySelector(".wrapper").style.display = "grid";
+          }
+        };
+        container.append(iframe);
+        console.log(iframe);
+
+        //Copy link button
+        let copyBtn = document.createElement("button");
+        copyBtn.innerHTML = "Copy Link";
+        copyBtn.onclick = () => {
+          //append the obtained ID to default URL
+          let copyLink = `https://media0.giphy.com/media/${gif.id}/giphy.mp4`;
+          //Copy text inside the text field
+          navigator.clipboard
+            .writeText(copyLink)
+            .then(() => {
+              alert("GIF copied to clipboard");
+            })
+            .catch(() => {
+              //if navigator is not supported
+              alert("GIF copied to clipboard");
+              //create temporary input
+              let hiddenInput = document.createElement("input");
+              hiddenInput.setAttribute("type", "text");
+              document.body.appendChild(hiddenInput);
+              hiddenInput.value = copyLink;
+              //Select input
+              hiddenInput.select();
+              //Copy the value
+              document.execCommand("copy");
+              //Remove the input
+              document.body.removeChild(hiddenInput);
+            });
+        };
+        container.append(copyBtn);
+
+        document.querySelector(".wrapper").append(container);
+      });
+    });
+};
+
+//Generate Gifs on screen load or when user clicks on submit
+
+submitBtn.addEventListener("click", generateGif);
+window.addEventListener("load", generateGif);
+
+//TODOS:
+//Make the code cleaner (seperated Functions!?)
diff --git a/style.css b/style.css
@@ -0,0 +1,93 @@
+* {
+  padding: 0;
+  margin: 0;
+  box-sizing: border-box;
+  font-family: "Poppins", sans-serif;
+}
+
+body {
+  background-color: #151d2f;
+}
+
+button {
+  border: none;
+  outline: none;
+  cursor: pointer;
+  background-color: #13fc97;
+  color: #151d2f;
+  border-radius: 0.5em;
+  font-weight: 500;
+}
+
+.search-container {
+  display: grid;
+  grid-template-columns: 9fr 3fr;
+  gap: 1em;
+  width: 100%;
+  max-width: 50em;
+  margin: 1em auto;
+  padding: 0.5em;
+}
+
+.search-container input {
+  padding: 1em;
+  border-radius: 0.5em;
+  font-weight: 400;
+}
+
+.wrapper {
+  display: grid;
+  grid-template-columns: repeat(3, 1fr);
+}
+.container {
+  background-color: #2b304d;
+  display: flex;
+  padding: 1em;
+  flex-direction: column;
+  justify-content: space-between;
+  margin: 1.5em;
+  border-radius: 0.5em;
+}
+
+.container img {
+  width: 100%;
+}
+
+.container button {
+  margin-top: 1em;
+  padding: 1em 0;
+}
+
+.loader {
+  height: 15em;
+  width: 15em;
+  border: 3.5em solid #2b304d;
+  border-radius: 50%;
+  border-top-color: #13fc97;
+  position: absolute;
+  transform: translate(-50%, -50%);
+  left: 50%;
+  top: 50%;
+  animation: spin 3s infinite;
+}
+
+@keyframes spin {
+  100% {
+    transform: translate(-50%, -50%) rotate(360deg);
+  }
+}
+
+@media screen and (max-width: 760px) {
+  .wrapper {
+    grid-template-columns: repeat(2, 1fr);
+  }
+  .container {
+    margin: 0.7em;
+  }
+}
+
+@media screen and (max-width: 576px) {
+  .wrapper {
+    grid-template-columns: 1fr;
+  }
+}