feat: Block Chain Collage Code 1 - 15

MDJAmin · MDJAmin · commit 91855ce70110 · 2025-10-13T00:05:48.000+03:30
Update the main index file
diff --git a/Block Chain Collage Code 1/15/css/style.css b/Block Chain Collage Code 1/15/css/style.css
@@ -0,0 +1,47 @@
+* {
+  margin: 0;
+  padding: 0;
+  box-sizing: border-box;
+  list-style: none;
+}
+
+.container {
+  height: 90vh;
+  position: relative;
+  overflow: hidden;
+}
+
+.container img {
+  position: absolute;
+  z-index: 100;
+  width: 100%;
+  height: 100%;
+  object-fit: cover;
+  opacity: 0;
+  transition: all 0.5s;
+}
+
+.container i {
+  position: absolute;
+  padding: 10px;
+  background-color: rgba(0, 0, 0, 0.4);
+  border-radius: 50%;
+  color: white;
+  font-size: 35px;
+  z-index: 101;
+  cursor: pointer;
+  top: 50%;
+  transform: translateY(-50%);
+}
+
+.container .bx-arrow-left {
+  left: 5%;
+}
+
+.container .bx-arrow-right {
+  right: 5%;
+}
+
+.show {
+  opacity: 1 !important;
+}
diff --git a/Block Chain Collage Code 1/15/index.html b/Block Chain Collage Code 1/15/index.html
@@ -0,0 +1,34 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta
+      name="viewport"
+      content="width=device-width, initial-scale=1.0"
+    />
+    <link
+      href="https://cdn.boxicons.com/fonts/basic/boxicons.min.css"
+      rel="stylesheet"
+    />
+    <link
+      rel="stylesheet"
+      href="css/style.css"
+    />
+    <title>Document</title>
+  </head>
+  <body>
+    <div class="container">
+      <!-- Images will be injected dynamically -->
+      <i
+        class="bx bx-arrow-left"
+        id="prev"
+      ></i>
+      <i
+        class="bx bx-arrow-right"
+        id="next"
+      ></i>
+    </div>
+
+    <script src="js/script.js"></script>
+  </body>
+</html>
diff --git a/Block Chain Collage Code 1/15/js/script.js b/Block Chain Collage Code 1/15/js/script.js
@@ -0,0 +1,44 @@
+"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");
+});
diff --git a/Block Chain Collage Code 1/index.html b/Block Chain Collage Code 1/index.html
@@ -43,6 +43,10 @@ <h3>
       <a href="13/13.1/index.html">13.1</a>
       <a href="13/13.2/index.html">13.2</a>
       <a href="13/13.3/index.html">13.3</a>
+      <a href="14/14.1/index.html">14.1</a>
+      <a href="14/14.2/index.html">14.2</a>
+      <a href="14/14.3/index.html">14.3</a>
+      <a href="15/index.html">15</a>
     </div>
     <footer>© 2025 Class Repo | MDJAmin</footer>
     <script src="../js/script.js"></script>
