Code 2 - Class 15 / 5

MDJAmin · MDJAmin · commit 3b4e720693fb · 2026-02-26T15:16:09.000+03:30
diff --git a/Block Chain Collage Code 2/14/5/inde.html b/Block Chain Collage Code 2/14/5/inde.html
@@ -0,0 +1,13 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <link rel="stylesheet" href="css/style.css">
+    <title>Products</title>
+</head>
+<body>
+    <section id="Products"></section>
+    <script src="js/script.js"></script>
+</body>
+</html>
diff --git a/Block Chain Collage Code 2/14/5/js/script.js b/Block Chain Collage Code 2/14/5/js/script.js
@@ -0,0 +1,42 @@
+// const productContainer = document.querySelector("#Products");
+
+// fetch("https://fakestoreapi.com/products")
+//   .then((res) => res.json())
+//   .then((data) => {
+//     data.forEach((product) => {
+//       productContainer.innerHTML += `
+//         <div class="card">
+//             <img src="${product.image}" alt="${product.title}">
+//             <h2>${product.title}</h2>
+//             <p>${product.price}</p>
+//             <p>${product.description}</p>
+//         </div>
+// `;
+//     });
+//   })
+// .catch(err => console.log("Error fetching products",err))
+
+// const numbers = [1, 2, 3, 4, 5];
+// const doubled = numbers.map((num) => num * 2);
+// console.log("Original:", numbers);
+// console.log("Doubled:", doubled);
+
+const productContainer = document.querySelector("#Products");
+
+fetch("https://fakestoreapi.com/products")
+  .then((res) => res.json())
+  .then((data) => {
+    const productCards = data.map(
+      (product) =>
+        `
+        <div class="card">
+            <img src="${product.image}" alt="${product.title}">
+            <h2>${product.title}</h2>
+            <p>${product.price}</p>
+            <p>${product.description}</p>
+        </div>
+`,
+    );
+    productContainer.innerHTML = productCards.join("");
+  })
+  .catch((err) => console.log("Error fetching products", err));
diff --git a/Block Chain Collage Code 2/15/js/script.js b/Block Chain Collage Code 2/15/js/script.js
@@ -0,0 +1,46 @@
+"use strict";
+
+const container = document.querySelector(".container");
+const nextBtn = document.querySelector("#next");
+const prevBtn = document.querySelector("#prev");
+
+let imageEls = [];
+let currentIndex = 0;
+
+// Fetch images from Picsum API
+fetch("https://picsum.photos/v2/list?page=2&limit=6")
+  .then(res => {
+    res.json()
+  })
+  .then(data => {
+    // Create <img> elements dynamically
+    data.forEach((img, index) => {
+      let image = document.createElement("img");
+      image.src = img.download_url;
+      image.alt = "Slider image";
+      if (index === 0) image.classList.add("show");
+      container.appendChild(image);
+    });
+
+    // Update NodeList after adding images
+    imageEls = document.querySelectorAll(".container img");
+  })
+  .catch(err => console.error("Error fetching images:", err));
+
+// Next Button
+nextBtn.addEventListener("click", () => {
+  if (imageEls.length === 0) return;
+
+  imageEls[currentIndex].classList.remove("show");
+  currentIndex = (currentIndex === imageEls.length - 1) ? 0 : currentIndex + 1;
+  imageEls[currentIndex].classList.add("show");
+});
+
+// Prev Button
+prevBtn.addEventListener("click", () => {
+  if (imageEls.length === 0) return;
+
+  imageEls[currentIndex].classList.remove("show");
+  currentIndex = (currentIndex === 0) ? imageEls.length - 1 : currentIndex - 1;
+  imageEls[currentIndex].classList.add("show");
+});
