HackYourFutureBelgium · EL1VAS · Nov 6, 2025 · Nov 6, 2025 · Nov 6, 2025 · Nov 6, 2025
diff --git a/.prettierrc b/.prettierrc
@@ -12,7 +12,7 @@
   "requirePragma": false,
   "semi": true,
   "singleQuote": false,
-  "tabWidth": 2,
+  "tabWidth": 4,
   "trailingComma": "es5",
   "useTabs": false,
   "vueIndentScriptAndStyle": false

diff --git a/Sprint-3/slideshow/index.html b/Sprint-3/slideshow/index.html
@@ -1,14 +1,28 @@
 <!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>
-    <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>
-  </body>
+    <head>
+        <meta charset="UTF-8" />
+        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+        <title>Image carousel</title>
+        <script defer src="slideshow.js"></script>
+        <link rel="stylesheet" href="style.css" />
+    </head>
+    <body>
+        <img id="carousel-img" src="./assets/cute-cat-a.png" alt="cat-pic" />
+        <div id="button-container">
+            <button type="button" class="button" id="auto-backward">
+                Auto Backward
+            </button>
+            <button type="button" class="button" id="backward-btn">
+                Backwards
+            </button>
+            <button type="button" class="button" id="stop">Stop</button>
+            <button type="button" class="button" id="forward-btn">
+                Forward
+            </button>
+            <button type="button" class="button" id="auto-forward">
+                Auto Forward
+            </button>
+        </div>
+    </body>
 </html>
diff --git a/Sprint-3/slideshow/readme.md b/Sprint-3/slideshow/readme.md
@@ -64,18 +64,18 @@ Make your buttons work to navigate forwards and backwards, manually.
 
 Add the following buttons:
 
-- auto-forward
-- stop
-- auto-backwards
+-   auto-forward
+-   stop
+-   auto-backwards
 
 These should allow automatic navigation through the images, say every 5 seconds.
 
 ### End of basic challenge!
 
 Congratulations, you've finished the basics!
 
-- Make sure you can access it and play with it on a smartphone!
-- Celebrate!
+-   Make sure you can access it and play with it on a smartphone!
+-   Celebrate!
 
 ## Further work
 

diff --git a/Sprint-3/slideshow/slideshow.js b/Sprint-3/slideshow/slideshow.js
@@ -1,8 +1,75 @@
-const images = [
+window.images = [
     "./assets/cute-cat-a.png",
     "./assets/cute-cat-b.jpg",
     "./assets/cute-cat-c.jpg",
 ];
 
+// Write your code here
+let currentIndex = 0;
+let intervalId = null;
 
-// Write your code here
+// Manual movement of carousel
+function moveFrontOnce(forward) {
+    const images = window.images;
+    console.log("moveFrontOnce called, forward = ", forward); // Trying to troubleshoot
+    if (forward === true) {
+        currentIndex = (currentIndex + 1) % images.length; // If forward is true adds 1 to the index
+        // and wraps with % images.length in case we are in the last index
+    } else {
+        currentIndex = (currentIndex - 1 + images.length) % images.length; // Same here if backward it deducts one index
+        //making sure it wraps back to last image in case we were at index[0]
+    }
+    const image = document.getElementById("carousel-img");
+    image.setAttribute("src", images[currentIndex]); // Changed the approach while trying to pass the tests
+    console.log("Image src is set to:", image.src); // Tests shows that my img src is undefined
+}
+
+// Auto movement of carousel forward
+function startAutoForward() {
+    stopAuto(); // Function to stop the autoslide before we start
+    intervalId = setInterval(() => moveFrontOnce(true), 2000); // Starts the autoslide forward every 2"
+    toggleButtons(true); // Auto-forward button active
+}
+
+// Auto movement of carousel backwards
+function startAutoBackward() {
+    stopAuto(); // Stop the autoslide before we start
+    intervalId = setInterval(() => moveFrontOnce(false), 2000); // Starts the autoslide backwards
+    toggleButtons(true); // Auto-backward button active
+}
+
+// Stops automatic slideshow
+function stopAuto() {
+    if (intervalId !== null) {
+        clearInterval(intervalId);
+        intervalId = null;
+    }
+    toggleButtons(false);
+}
+
+// Enables/disables buttons based on if autoslideshow is running
+function toggleButtons(isRunning) {
+    document.getElementById("auto-forward").disabled = isRunning; // When the auto slideshow is on auto-forward button is unclickable
+    document.getElementById("auto-backward").disabled = isRunning; // When auto slideshow is on auto-backward button is unclicable
+    document.getElementById("stop").disabled = !isRunning; // Stop button is disabled only when auto slideshow is off, so when autoslideshow is running
+    //stop is the only button we can click
+}
+
+// Activate (call) the buttons
+document.addEventListener("DOMContentLoaded", () => {
+    document
+        .getElementById("forward-btn")
+        .addEventListener("click", () => moveFrontOnce(true));
+    document
+        .getElementById("backward-btn")
+        .addEventListener("click", () => moveFrontOnce(false));
+    document
+        .getElementById("auto-forward")
+        .addEventListener("click", () => startAutoForward());
+    document
+        .getElementById("auto-backward")
+        .addEventListener("click", () => startAutoBackward());
+    document.getElementById("stop").addEventListener("click", () => stopAuto());
+    // Disable stop button initially when autoslideshow is not running yet
+    document.getElementById("stop").disabled = true;
+});
diff --git a/Sprint-3/slideshow/style.css b/Sprint-3/slideshow/style.css
@@ -1 +1,28 @@
 /** Write your CSS in here **/
+body {
+    background-color: rgb(242, 106, 106);
+}
+#carousel-img {
+    width: 745px;
+    height: 559px;
+    object-fit: cover; /* ensures the image covers the area without distortion */
+    display: block; /* removes any inline whitespace below image */
+    margin: 0 auto; /* center horizontally if needed */
+}
+
+#button-container {
+    display: flex;
+    justify-content: center; /* Justify in horizontal axis*/
+    gap: 10px;
+    margin-top: 20px;
+}
+
+.button {
+    background-color: bisque;
+    font-family: Impact, Haettenschweiler, 'Arial Narrow Bold', sans-serif
+    font-size: Verdana, Geneva, Tahoma, sans-serif
+    font-style: oblique;
+    border-radius: 8px;
+    padding: 10px 20px;
+    cursor: pointer;
+}
diff --git a/prep/exercise-1.js b/prep/exercise-1.js
@@ -0,0 +1,14 @@
+// Can you fix this code?
+function doubleAllNumbers(numbers) {
+    let doubledNumbers = [];
+
+    for (let n of numbers) {
+        doubledNumbers.push(n * 2);
+    }
+
+    return doubledNumbers;
+}
+
+const myNums = [10, 20, 30];
+const double = doubleAllNumbers(myNums);
+console.log(double);
diff --git a/prep/exercise-1.test.js b/prep/exercise-1.test.js
diff --git a/prep/exercise-2.js b/prep/exercise-2.js
@@ -0,0 +1,13 @@
+// Write a function which takes an array as a parameter
+//   and swaps the first element with the last element
+
+function swapFirstAndLast(arr) {
+    const first = arr[0]; //Indivates the first digit location of the array
+    const last = arr[arr.length - 1]; //Indicates the lst digit location of the array
+    arr[0] = last; //Because I can't reassign a new value to a const and we want the first position to hold the value of the last
+    arr[arr.length - 1] = first;
+}
+
+const myArray = [5, 2, 3, 4, 1];
+swapFirstAndLast(myArray);
+console.log(myArray); // what output should we expect?
diff --git a/prep/exercise-2.test.js b/prep/exercise-2.test.js
diff --git a/prep/mean.js b/prep/mean.js
@@ -0,0 +1,20 @@
+function calculateMean(list) {
+    let total = 0;
+    for (const item of list) {
+        total += item;
+    }
+}
+
+function calculateMedian(list) {
+    const middleIndex = Math.floor(list.length / 2);
+    const median = list.splice(middleIndex, 1)[0];
+
+    return median;
+}
+
+const list = [10, 20, 30];
+const copy = list;
+copy.push(60, 70);
+
+console.log(list);
+console.log(copy);
diff --git a/prep/mean.test.js b/prep/mean.test.js
@@ -0,0 +1,6 @@
+test("calculates the median of a list of odd length", () => {
+    const list = [10, 20, 30, 50, 60];
+    const currentOutput = calculateMedian(list);
+    const targetOutput = 30;
+    expect(currentOutput).toEqual(targetOutput);
+});