HackYourFutureBelgium · nuttyproducer · Apr 26, 2026 · Apr 26, 2026 · Apr 27, 2026 · Apr 27, 2026
diff --git a/Sprint-3/slideshow/assets/cute-cat-c.jpg b/Sprint-3/slideshow/assets/cute-cat-c.jpg
diff --git a/Sprint-3/slideshow/index.html b/Sprint-3/slideshow/index.html
@@ -1,14 +1,26 @@
-<!DOCTYPE html>
+<!doctype html>
 <html lang="en">
   <head>
     <meta charset="UTF-8" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-    <title>Title here</title>
+    <title></title>
+    <link rel="stylesheet" href="style.css" />
     <script defer src="slideshow.js"></script>
   </head>
   <body>
-    <img id="carousel-img" src="./assets/cute-cat-a.png" alt="cat-pic" />
-    <button type="button" id="backward-btn">Backwards</button>
-    <button type="button" id="forward-btn">Forward</button>
+    <div id="carouselCard" class="carousel-card">
+      <img id="carousel-img" src="./assets/cute-cat-a.png" alt="cat-pic" />
+      <div class="carousel-buttons">
+        <button type="button" id="auto-backward">«</button>
+
+        <button type="button" id="backward-btn">‹</button>
+
+        <button type="button" id="stop" aria-label="Start slideshow">►</button>
+
+        <button type="button" id="forward-btn">›</button>
+
+        <button type="button" id="auto-forward">»</button>
+      </div>
+    </div>
   </body>
 </html>
diff --git a/Sprint-3/slideshow/slideshow.js b/Sprint-3/slideshow/slideshow.js
@@ -1,8 +1,81 @@
+// Array of images
+
 const images = [
-    "./assets/cute-cat-a.png",
-    "./assets/cute-cat-b.jpg",
-    "./assets/cute-cat-c.jpg",
+  "./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");
+
+let currentImage = 0;
+let autoPlayInterval = null;
+
+imageElement.src = images[currentImage];
+
+function showNextImage() {
+  currentImage = currentImage + 1;
+  if (currentImage >= images.length) {
+    currentImage = 0;
+  }
+  imageElement.src = images[currentImage];
+}
+
+function showPreviousImage() {
+  currentImage = currentImage - 1;
+  if (currentImage < 0) {
+    currentImage = images.length - 1;
+  }
+  imageElement.src = images[currentImage];
+}
+
+function startAutoPlay(direction) {
+  if (autoPlayInterval !== null) {
+    clearInterval(autoPlayInterval);
+  }
+
+  if (direction === "forward") {
+    autoPlayInterval = setInterval(showNextImage, 2000);
+  } else if (direction === "backward") {
+    autoPlayInterval = setInterval(showPreviousImage, 2000);
+  }
+
+  autoForwardBtn.disabled = true;
+  autoBackwardBtn.disabled = true;
+  stopBtn.textContent = "■";
+  stopBtn.setAttribute("aria-label", "Stop slideshow");
+}
+
+function stopAutoPlay() {
+  if (autoPlayInterval !== null) {
+    clearInterval(autoPlayInterval);
+    autoPlayInterval = null;
+  }
+  // Enable both auto buttons
+  autoForwardBtn.disabled = false;
+  autoBackwardBtn.disabled = false;
+  stopBtn.textContent = "►";
+  stopBtn.setAttribute("aria-label", "Start slideshow");
+}
 
-// Write your code here
+backwardBtn.addEventListener("click", showPreviousImage);
+forwardBtn.addEventListener("click", showNextImage);
+autoForwardBtn.addEventListener("click", function () {
+  startAutoPlay("forward");
+});
+autoBackwardBtn.addEventListener("click", function () {
+  startAutoPlay("backward");
+});
+stopBtn.addEventListener("click", function () {
+  if (autoPlayInterval === null) {
+    startAutoPlay("forward");
+  } else {
+    stopAutoPlay();
+  }
+});
diff --git a/Sprint-3/slideshow/style.css b/Sprint-3/slideshow/style.css
@@ -1 +1,77 @@
 /** Write your CSS in here **/
+body {
+  background: #fffbe7;
+  min-height: 100vh;
+  margin: 0;
+  font-family: "Inter", Arial, sans-serif;
+}
+
+.carousel-card {
+  margin-top: 50px;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+}
+
+#carousel-img {
+  width: 700px;
+  height: 500px;
+  align-items: center;
+  border: 6px solid black;
+  box-shadow: 13px 9px 0 #00ffe7; /* bold, offset shadows */
+}
+
+.carousel-buttons {
+  margin: 30px;
+  display: flex;
+  gap: 30px;
+  align-items: center;
+}
+
+.carousel-buttons button {
+  background: #ff00aa;
+  color: #222;
+  border: 4px solid #222;
+  border-radius: 0px;
+  height: 70px;
+  min-width: 2.6em;
+  box-sizing: border-box;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  line-height: 1;
+  font-size: 2.3rem;
+  font-weight: bold;
+  padding: 14px 32px;
+  box-shadow: 4px 4px 0 #00ffe7;
+  cursor: pointer;
+}
+
+#play-pause-btn {
+  min-width: 4.2em;
+}
+
+#stop {
+  width: 4.2em;
+  padding: 14px 0;
+}
+
+.carousel-buttons button:hover {
+  background: #d3008d;
+}
+
+.carousel-buttons button:active {
+  background: #c40082;
+  color: #fff;
+  border-color: #222;
+  box-shadow: 3px 3px 0 #222;
+  transform: translate(3px, 3px);
+}
+
+.carousel-buttons button.active {
+  background: #c40082;
+  color: #fff;
+  border-color: #222;
+  box-shadow: 1px 1px 0 #00ffe7;
+  transform: translate(2px, 2px);
+}