CodeYourFuture · Iswanna · Nov 19, 2025 · Nov 19, 2025 · Nov 19, 2025 · Nov 19, 2025
diff --git a/Sprint-3/alarmclock/alarmclock.js b/Sprint-3/alarmclock/alarmclock.js
@@ -1,4 +1,67 @@
-function setAlarm() {}
+// Declare a global variable to store the countdown currently running
+let intervalId;
+const timesRemaining = "Time Remaining:";
+
+// Helper function to format total seconds and update the UI
+function updateDisplay(totalSeconds) {
+  let timeRemainingMinutes = Math.floor(totalSeconds / 60)
+    .toString()
+    .padStart(2, "0");
+  let timeRemainingSeconds = (totalSeconds % 60).toString().padStart(2, "0");
+
+  document.getElementById(
+    "timeRemaining"
+  ).textContent = `${timesRemaining} ${timeRemainingMinutes}:${timeRemainingSeconds}`;
+}
+
+function setAlarm() {
+  if (intervalId) {
+    clearInterval(intervalId); // when the set alarm button is clicked, if there is a countdown running, clear it
+  }
+  // When I press the “Set Alarm” button:
+  // Read the number typed in the input field (in seconds)
+  // Store this value in a variable called totalSeconds
+  // Convert totalSeconds into minutes and seconds and save them inside timeRemainingMinutes and timeRemainingSeconds respectively
+  // Format timeRemainingMinutes and timeRemainingSeconds so they always have 2 digits (mm:ss)
+  // Display "Time Remaining: mm:ss" on the UI
+  // Start a repeating timer using setInterval that runs every 1 second:
+  // Decrease timeRemaining by 1
+  // Convert the new time into mm:ss
+  // Update the display
+  // If timeRemaining reaches 0:
+  // Stop the interval
+  // Display "00:00"
+  // Call playAlarm()
+
+  let inputElement = document.getElementById("alarmSet"); // this is used to grab the input element so I can read whatever the user typed
+  let totalSeconds = Number(inputElement.value); //this converts the input from string to number
+
+  // Validate input
+  if (totalSeconds <= 0 || isNaN(totalSeconds)) {
+    alert("Please enter a positive number!");
+    return;
+  }
+
+  document.getElementById("timeRemaining").style.backgroundColor = "";
+
+  updateDisplay(totalSeconds);
+  // start the countdown
+  intervalId = setInterval(() => {
+    // the code you write here will run every one second or 1000 milliseconds
+    totalSeconds = totalSeconds - 1;
+    if (totalSeconds <= 0) {
+      clearInterval(intervalId);
+      playAlarm();
+      document.getElementById("timeRemaining").textContent =
+        `${timesRemaining} 00:00`;
+      document.getElementById("timeRemaining").style.backgroundColor = "blue";
+      document.getElementById("alarmSet").value = "";
+      return;
+    }
+
+    updateDisplay(totalSeconds);
+  }, 1000);
+}
 
 // DO NOT EDIT BELOW HERE
 

diff --git a/Sprint-3/alarmclock/index.html b/Sprint-3/alarmclock/index.html
@@ -4,7 +4,7 @@
     <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>
+    <title>Alarm clock app</title>
   </head>
   <body>
     <div class="centre">

diff --git a/Sprint-3/alarmclock/package.json b/Sprint-3/alarmclock/package.json
@@ -13,5 +13,10 @@
   "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"
+  }
 }
diff --git a/package.json b/package.json
@@ -0,0 +1,6 @@
+{
+  "devDependencies": {
+    "@testing-library/jest-dom": "^6.9.1",
+    "jest-environment-jsdom": "^30.2.0"
+  }
+}