HackYourFutureBelgium · Pinx-pinx · Dec 9, 2025 · Dec 9, 2025 · Dec 9, 2025 · Dec 13, 2025
diff --git a/Sprint-3/reading-list/script.js b/Sprint-3/reading-list/script.js
@@ -21,3 +21,26 @@ const books = [
   },
 ];
 
+function renderReadingList() {
+  const readingList = document.getElementById("reading-list");
+
+  books.forEach((book) => {
+    const listItem = document.createElement("li");
+
+    listItem.style.backgroundColor = book.alreadyRead ? "green" : "red";
+
+    const info = document.createElement("p");
+    info.className = "book-info";
+    info.innerText = book.title + " by " + book.author;
+    listItem.appendChild(info);
+
+    const bookCover = document.createElement("img");
+    bookCover.src = book.bookCoverImage;
+    bookCover.alt = `Cover of ${book.title}`;
+    listItem.appendChild(bookCover);
+
+    readingList.appendChild(listItem);
+  });
+}
+
+renderReadingList();
diff --git a/Sprint-3/reading-list/style.css b/Sprint-3/reading-list/style.css
@@ -157,3 +157,8 @@ body {
     max-height: 80px;
   }
 }
+.book-info {
+  font-size: 1.2rem;
+  font-weight: bold;
+  margin-bottom: 10px;
+}
diff --git a/Sprint-3/slideshow/assets/butterfly1.png b/Sprint-3/slideshow/assets/butterfly1.png
diff --git a/Sprint-3/slideshow/assets/butterfly2.png b/Sprint-3/slideshow/assets/butterfly2.png
diff --git a/Sprint-3/slideshow/assets/butterfly3.png b/Sprint-3/slideshow/assets/butterfly3.png
diff --git a/Sprint-3/slideshow/index.html b/Sprint-3/slideshow/index.html
@@ -3,12 +3,16 @@
   <head>
     <meta charset="UTF-8" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-    <title>Title here</title>
+    <title>Image Carousel</title>
     <script defer src="slideshow.js"></script>
+    <link rel="stylesheet" href="styles.css" />
   </head>
   <body>
-    <img id="carousel-img" src="./assets/cute-cat-a.png" alt="cat-pic" />
+    <img id="carousel-img" src="./assets/butterfly1.png" alt="butterfly-pic" />
     <button type="button" id="backward-btn">Backwards</button>
     <button type="button" id="forward-btn">Forward</button>
+    <button type="button" id="auto-forward">Auto-Forward</button>
+    <button type="button" id="auto-backward">Auto-Backward</button>
+    <button type="button" id="stop">Stop</button>
   </body>
 </html>
diff --git a/Sprint-3/slideshow/slideshow.js b/Sprint-3/slideshow/slideshow.js
@@ -1,8 +1,62 @@
 const images = [
-    "./assets/cute-cat-a.png",
-    "./assets/cute-cat-b.jpg",
-    "./assets/cute-cat-c.jpg",
+  "./assets/butterfly1.png",
+  "./assets/butterfly2.png",
+  "./assets/butterfly3.png",
+  "./assets/cute-cat-a.png",
+  "./assets/cute-cat-b.jpg",
+  "./assets/cute-cat-c.jpg",
 ];
+// Write your code here
 
+const imageElement = document.getElementById("carousel-img");
+const forwardBtn = document.getElementById("forward-btn");
+const backwardBtn = document.getElementById("backward-btn");
+const autoForwardBtn = document.getElementById("auto-forward");
+const autoBackwardBtn = document.getElementById("auto-backward");
+const stopBtn = document.getElementById("stop");
 
-// Write your code here
+let currentIndex = 0;
+imageElement.src = images[currentIndex];
+
+function showNextImage() {
+  currentIndex++;
+  if (currentIndex >= images.length) {
+    currentIndex = 0;
+  }
+  imageElement.src = images[currentIndex];
+}
+
+function showPreviousImage() {
+  currentIndex--;
+  if (currentIndex < 0) {
+    currentIndex = images.length - 1;
+  }
+  imageElement.src = images[currentIndex];
+}
+
+let autoForwardInterval;
+function startAutoForward() {
+  autoForwardBtn.disabled = true;
+  autoBackwardBtn.disabled = true;
+  autoForwardInterval = setInterval(showNextImage, 3000);
+}
+
+let autoBackwardInterval;
+function startAutoBackward() {
+  autoForwardBtn.disabled = true;
+  autoBackwardBtn.disabled = true;
+  autoBackwardInterval = setInterval(showPreviousImage, 3000);
+}
+
+function stopAutoSlideshow() {
+  clearInterval(autoForwardInterval);
+  clearInterval(autoBackwardInterval);
+  autoForwardBtn.disabled = false;
+  autoBackwardBtn.disabled = false;
+}
+
+forwardBtn.addEventListener("click", showNextImage);
+backwardBtn.addEventListener("click", showPreviousImage);
+autoForwardBtn.addEventListener("click", startAutoForward);
+autoBackwardBtn.addEventListener("click", startAutoBackward);
+stopBtn.addEventListener("click", stopAutoSlideshow);
diff --git a/Sprint-3/slideshow/style.css b/Sprint-3/slideshow/style.css
@@ -1 +1,64 @@
 /** Write your CSS in here **/
+
+body {
+  font-family: Arial, sans-serif;
+  text-align: center;
+  background-color: #f0f0f0;
+  margin: 0;
+  padding: 20px;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+}
+
+img {
+  width: 100%;
+  max-width: 500px;
+  height: auto;
+  margin: 20px 0;
+  border: 2px solid #ccc;
+  border-radius: 10px;
+}
+
+button {
+  padding: 10px 20px;
+  font-size: 16px;
+  cursor: pointer;
+  background-color: #4caf50;
+  color: white;
+  border: none;
+  border-radius: 5px;
+  margin: 5px;
+  transition: background-color 0.3s ease;
+}
+
+button:hover {
+  background-color: #45a049;
+}
+
+button:disabled {
+  background-color: #ddd;
+  cursor: not-allowed;
+}
+
+button + button {
+  margin-left: 10px;
+}
+
+.container {
+  max-width: 700px;
+  width: 100%;
+  padding: 10px;
+  margin: 0 auto;
+}
+
+@media (max-width: 600px) {
+  img {
+    max-width: 100%;
+  }
+
+  button {
+    width: 100%;
+    margin: 10px 0;
+  }
+}