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/alarmclock/alarmclock.js b/Sprint-3/alarmclock/alarmclock.js
@@ -1,25 +1,54 @@
-function setAlarm() {}
+function formatTime(totalSeconds) {
+    const minutes = Math.floor(totalSeconds / 60);
+    const seconds = totalSeconds % 60;
+    const mm = String(minutes).padStart(2, "0"); // Added padding to cover the chance the input is a single number
+    const ss = String(seconds).padStart(2, "0"); // Also I wanted to match the format of the Time remaining
+
+    return `${mm}:${ss}`;
+}
+
+function setAlarm() {
+    const inputValue = document.getElementById("alarmSet").value; // Get the value that we input in the box
+    const formatedInput = formatTime(inputValue); // Use function above to format the number in the input to mm:ss format
+    let remainingSeconds = inputValue; // Added after to be used in the interval function
+    const timeRemaining = document.getElementById("timeRemaining"); // Get to the element of the header Time Remaining
+    timeRemaining.innerText = `Time Remaining: ${formatedInput}`; // And change its text to display the formated input
+    const intervalId = setInterval(function () {
+        // Function that will be repeated every second
+        remainingSeconds -= 1; // And will deduct a second everytime the function runs
+        timeRemaining.innerText = `Time Remaining: ${formatTime(
+            remainingSeconds
+        )}`; // And will show a countdown display in the header
+        if (remainingSeconds <= 0) {
+            // When countdown reaches 00:00
+            clearInterval(intervalId); // Function will stop running
+            playAlarm(); // Alarm will start playing on 00:00
+            document.body.style.backgroundColor = "orange";
+        }
+    }, 1000);
+}
 
 // DO NOT EDIT BELOW HERE
 
 var audio = new Audio("alarmsound.mp3");
 
 function setup() {
-  document.getElementById("set").addEventListener("click", () => {
-    setAlarm();
-  });
+    document.getElementById("set").addEventListener("click", () => {
+        setAlarm();
+    });
 
-  document.getElementById("stop").addEventListener("click", () => {
-    pauseAlarm();
-  });
+    document.getElementById("stop").addEventListener("click", () => {
+        pauseAlarm();
+    });
 }
 
 function playAlarm() {
-  audio.play();
+    audio.play();
 }
 
 function pauseAlarm() {
-  audio.pause();
+    audio.pause();
+    document.body.style.backgroundColor = "white"; // Sorry to alter the code, but I had to reset it when paused
 }
 
 window.onload = setup;
diff --git a/Sprint-3/alarmclock/index.html b/Sprint-3/alarmclock/index.html
@@ -1,20 +1,21 @@
 <!DOCTYPE html>
 <html lang="en">
-  <head>
-    <meta charset="utf-8" />
-    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-    <link rel="stylesheet" href="style.css" />
-    <title>Title here</title>
-  </head>
-  <body>
-    <div class="centre">
-      <h1 id="timeRemaining">Time Remaining: 00:00</h1>
-      <label for="alarmSet">Set time to:</label>
-      <input id="alarmSet" type="number" />
+    <head>
+        <meta charset="utf-8" />
+        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+        <link rel="stylesheet" href="style.css" />
+        <title>Alarm clock app</title>
+    </head>
+    <body>
+        <div class="centre">
+            <h1 id="timeRemaining">Time Remaining: 00:00</h1>
+            <label for="alarmSet">Set time to (in seconds):</label>
+            <!--Defined that input number represents seconds-->
+            <input id="alarmSet" type="number" />
 
-      <button id="set" type="button">Set Alarm</button>
-      <button id="stop" type="button">Stop Alarm</button>
-    </div>
-    <script src="alarmclock.js"></script>
-  </body>
+            <button id="set" type="button">Set Alarm</button>
+            <button id="stop" type="button">Stop Alarm</button>
+        </div>
+        <script src="alarmclock.js"></script>
+    </body>
 </html>
diff --git a/Sprint-3/alarmclock/package.json b/Sprint-3/alarmclock/package.json
@@ -13,5 +13,11 @@
   "bugs": {
     "url": "https://github.com/CodeYourFuture/CYF-Coursework-Template/issues"
   },
-  "homepage": "https://github.com/CodeYourFuture/CYF-Coursework-Template#readme"
+  "homepage": "https://github.com/CodeYourFuture/CYF-Coursework-Template#readme",
+  "devDependencies": {
+    "@testing-library/jest-dom": "^6.9.1",
+    "jest": "^30.2.0",
+    "jest-environment-jsdom": "^30.2.0",
+    "jsdom": "^26.1.0"
+  }
 }
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/index.html b/prep/index.html
@@ -0,0 +1,24 @@
+<!DOCTYPE html>
+<html lang="en">
+    <head>
+        <meta charset="UTF-8" />
+        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+        <title>Alarm clock app</title>
+        <script defer src="script.js"></script>
+    </head>
+    <body>
+        <section>
+            <h3>Character limit</h3>
+            <label for="comment-input">
+                Please enter your comment in the text area below
+            </label>
+            <textarea
+                id="comment-input"
+                name="comment-input"
+                rows="5"
+                maxlength="200"
+            ></textarea>
+            <p id="character-limit-info"></p>
+        </section>
+    </body>
+</html>
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);
+});
diff --git a/prep/script.js b/prep/script.js
@@ -0,0 +1,10 @@
+const textarea = document.querySelector("textarea");
+updateCharacterLimit();
+
+function updateCharacterLimit() {
+    const remainingCharacters = textarea.maxLength - textarea.value.length;
+    const charactersLeftP = document.querySelector("#character-limit-info");
+    charactersLeftP.innerText = `You have ${remainingCharacters} characters remaining`;
+}
+
+textarea.addEventListener("keyup", updateCharacterLimit);