Added shimmer

Author: sankitdev

Day-25-Movie-Search-App/index.html

@@ -5,6 +5,7 @@
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <link rel="stylesheet" href="style.css">
+    <link rel="stylesheet" href="shimmer.css">
     <link href="https://cdn.jsdelivr.net/npm/[email protected]/fonts/remixicon.css" rel="stylesheet" />
     <title>Movie Search App</title>
 </head>

Day-25-Movie-Search-App/script.js

@@ -2,6 +2,7 @@ const API = "41357241";
 const button = document.querySelector("button");
 const searchIcon = document.querySelector("#searchIcon");
 const toggle = document.querySelector("#toggle");
+const search = document.querySelector("#search");
 
 //1. Toggle sun moon ✅
 toggle.addEventListener("click", () => {
@@ -24,25 +25,31 @@ document.addEventListener("keydown", (event) => {
     (event.type = "click" && event.target === searchBtn)
   ) {
     fetchMovie();
+    search.value = "";
   }
 });
 
 async function fetchMovie() {
-  const response = await fetch(
-    `https://www.omdbapi.com/?s=${search.value}&apikey=${API}`
-  );
-  const data = await response.json();
-  const imdbId = data.Search.map((item) => item.imdbID);
-  const arr = await Promise.all(
-    imdbId.map(async (id) => {
-      const response = await fetch(
-        `https://www.omdbapi.com/?i=${id}&apikey=${API}`
-      );
-      return response.json();
-    })
-  );
-  console.log(arr);
-  populateData(arr);
+  showShimmer();
+  try {
+    const response = await fetch(
+      `https://www.omdbapi.com/?s=${search.value}&apikey=${API}`
+    );
+    const data = await response.json();
+    const imdbId = data.Search.map((item) => item.imdbID);
+    const arr = await Promise.all(
+      imdbId.map(async (id) => {
+        const response = await fetch(
+          `https://www.omdbapi.com/?i=${id}&apikey=${API}`
+        );
+        return response.json();
+      })
+    );
+    hideShimmer();
+    populateData(arr);
+  } catch (error) {
+    console.error("Error aya", error);
+  }
 }
 
 // 4.after fetching data populate it to container class ✅
@@ -98,3 +105,36 @@ function popup(movie) {
     document.querySelector(".popupContainer").classList.remove("show");
   });
 }
+
+function showShimmer() {
+  const container = document.querySelector(".container");
+  container.innerHTML = `
+    <div class="shimmer-container">
+      <div class="shimmer-movie-detail">
+        <div class="shimmer-image"></div>
+        <div class="shimmer-rating"></div>
+        <div class="shimmer-title"></div>
+        <div class="shimmer-year"></div>
+        <div class="shimmer-button"></div>
+      </div>
+      <div class="shimmer-movie-detail">
+        <div class="shimmer-image"></div>
+        <div class="shimmer-rating"></div>
+        <div class="shimmer-title"></div>
+        <div class="shimmer-year"></div>
+        <div class="shimmer-button"></div>
+      </div>
+      <div class="shimmer-movie-detail">
+        <div class="shimmer-image"></div>
+        <div class="shimmer-rating"></div>
+        <div class="shimmer-title"></div>
+        <div class="shimmer-year"></div>
+        <div class="shimmer-button"></div>
+      </div>
+    </div>`;
+}
+
+function hideShimmer() {
+  const container = document.querySelector(".container");
+  container.innerHTML = ""; // Clear shimmer effect
+}

Day-25-Movie-Search-App/shimmer.css

@@ -0,0 +1,75 @@
+.shimmer-container {
+  display: flex;
+  flex-wrap: wrap;
+}
+
+.shimmer-movie-detail {
+  width: 200px;
+  padding: 10px;
+  background-color: #f0f0f0;
+  margin: 10px;
+  border-radius: 10px;
+  position: relative;
+  overflow: hidden;
+}
+
+.shimmer-image,
+.shimmer-rating,
+.shimmer-title,
+.shimmer-year,
+.shimmer-button {
+  background-color: #e0e0e0;
+  border-radius: 5px;
+}
+
+.shimmer-image {
+  width: 100%;
+  height: 250px;
+}
+
+.shimmer-rating,
+.shimmer-title,
+.shimmer-year {
+  height: 20px;
+  margin-top: 10px;
+}
+
+.shimmer-rating {
+  width: 30%;
+}
+
+.shimmer-title {
+  width: 80%;
+}
+
+.shimmer-year {
+  width: 50%;
+}
+
+.shimmer-button {
+  width: 100%;
+  height: 40px;
+  margin-top: 15px;
+}
+
+.shimmer-movie-detail::after {
+  content: "";
+  position: absolute;
+  top: 0;
+  left: -150px;
+  height: 100%;
+  width: 150px;
+  background: linear-gradient(
+    90deg,
+    transparent,
+    rgba(255, 255, 255, 0.6),
+    transparent
+  );
+  animation: shimmer 1.5s infinite;
+}
+
+@keyframes shimmer {
+  100% {
+    transform: translateX(300%);
+  }
+}