feat: Block Chain Collage Code 1 - 14.3

MDJAmin · MDJAmin · commit 6ab206785f6f · 2025-10-13T00:05:25.000+03:30
diff --git a/Block Chain Collage Code 1/14/14.3/index.html b/Block Chain Collage Code 1/14/14.3/index.html
@@ -0,0 +1,12 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Document</title>
+</head>
+<body>
+    <section id="Products"></section>
+    <script src="js/script.js"></script>
+</body>
+</html>
diff --git a/Block Chain Collage Code 1/14/14.3/js/script.js b/Block Chain Collage Code 1/14/14.3/js/script.js
@@ -0,0 +1,44 @@
+// const productContainer = document.querySelector("#Products")
+
+// fetch("https://fakestoreapi.com/products") //fetch() starts an HTTP request to get data from that URL.
+// .then(res => res.json()) // .then(...) runs after the Promise succeeds
+// .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>
+//         </div>
+//     `
+// });
+// })
+// .catch(err => console.error("Error fetching products:",err)); // runs only if something goes wrong
+
+// ________________________________________________
+
+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") // fetch data
+  .then(res => res.json())
+  .then(data => {
+    // create an array of HTML strings
+    const productCards = data.map(product => `
+      <div class="card">
+        <img src="${product.image}" alt="${product.title}">
+        <h2>${product.title}</h2>
+        <p>${product.price}</p>
+      </div>
+    `);
+
+    // join array into one string and insert into container
+    productContainer.innerHTML = productCards.join("");
+  })
+  .catch(err => console.error("Error fetching products:", err));
