Used map() to render images instead of for loop

fojanb · Mar 22, 2024 · 1370563 · 1370563
1 parent 95dd679
commit 1370563
Show file tree

Hide file tree

Showing 4 changed files with 26 additions and 32 deletions.
diff --git a/Day-16-Search-Engine/app.js b/Day-16-Search-Engine/app.js
@@ -1,31 +1,35 @@
 const searchInput = document.getElementById("search");
 const form = document.querySelector("form");
-const holder = document.createElement("div");
-holder.classList.add("holder");
+const imagesHolder = document.createElement("div");
+imagesHolder.classList.add("imagesHolder");
 const options = {
-  headers: {Authorization: "Client-ID viAzAfoivZobXMdC197TdaT2qFhnKr2iLse4MnuuDPc"}
+  headers: { Authorization: "Client-ID viAzAfoivZobXMdC197TdaT2qFhnKr2iLse4MnuuDPc" }
 };
 const makeGallery = (images) => {
-  if(!images){
-    alert("Ooppssie something went wrong");
+  if (!images) {
+    alert("Something went wrong. Please try again.");
     return;
   }
-  holder.innerText = images.map(image => {
-    `<div class="frame">
-      <img src=${image.alt_description} id=${image.id} alt=${image.alt_description} title=${image.alt_description}/>
+  let renderedImages = images.map(image => {
+    return `<div class="frame">
+      <img src=${image.urls.regular} id=${image.id} alt=${image.alt_description} title=${image.alt_description}/>
       <span>${image.alt_description}</span>
     </div>`
-  }).join("");
-  console.log(holder)
-  document.body.append(holder)
+  });
+  imagesHolder.innerHTML = renderedImages.join("");
+  document.querySelector(".wrapper").insertAdjacentElement("beforeend", imagesHolder)
 };
 const getImage = async (e) => {
-  e.preventDefault();
-  holder.innerHTML = null;
-  const response = await fetch(`https://api.unsplash.com/search/photos?page=1&query=${searchInput.value}`, options);
-  const data = await response.json();
-  makeGallery(data.results)
-  searchInput.value="";
+  try {
+    e.preventDefault();
+    imagesHolder.innerHTML = null;
+    const response = await fetch(`https://api.unsplash.com/search/photos?page=1&query=${searchInput.value}`, options);
+    const data = await response.json();
+    makeGallery(data.results)
+    searchInput.value = "";
+  } catch (error) {
+    console.error(error)
+  }
 };
 window.addEventListener("load", () => {
   form.addEventListener("submit", getImage);

diff --git a/Day-16-Search-Engine/favicon.png b/Day-16-Search-Engine/favicon.png
diff --git a/Day-16-Search-Engine/index.html b/Day-16-Search-Engine/index.html
@@ -22,7 +22,6 @@ <h2>Image Search App</h2>
         <button type="submit">Search</button>
       </div>
     </div>
-    <footer><img src="favicon.png" alt="Logo" width="50px" height="50px"/>Made by Fojan Babaali</footer>
     <script src="./app.js" type="module"></script>
   </body>
 </html>
diff --git a/Day-16-Search-Engine/style.css b/Day-16-Search-Engine/style.css
@@ -49,7 +49,7 @@ button:hover {
   background-color: var(--pink-clr);
   color: #fff;
 }
-.holder {
+.imagesHolder {
   display: grid;
   grid-template-columns: repeat(4, 300px);
   grid-template-rows: auto;
@@ -59,22 +59,22 @@ button:hover {
   justify-content: center;
 }
 @media screen and (max-width: 800px) {
-  .holder {
+  .imagesHolder {
     grid-template-columns: repeat(1, 300px);
     margin: 0 auto;
     grid-gap: 5px;
   }
 }
 
 @media screen and (min-width: 700px) and (max-width: 900px) {
-  .holder {
+  .imagesHolder {
     grid-template-columns: repeat(2, 300px);
     margin: 0 auto;
     grid-gap: 5px;
   }
 }
 @media screen and (min-width: 900px) and (max-width: 1200px) {
-  .holder {
+  .imagesHolder {
     grid-template-columns: repeat(3, 300px);
     margin: 0 auto;
     grid-gap: 5px;
@@ -105,13 +105,4 @@ button:hover {
   bottom: 0;
   margin: 20px;
 }
-footer {
-  display: flex;
-  justify-content: center;
-  align-items: center;
-  color: #7a859c;
-  position: absolute;
-  bottom: 0;
-  left: 50%;
-  margin-left: -150px;
-}
+