CodeYourFuture · mahmoudshaabo1984 · Mar 31, 2026 · Apr 5, 2026
diff --git a/Sprint-3/alarmclock/alarmclock.js b/Sprint-3/alarmclock/alarmclock.js
@@ -1,4 +1,79 @@
-function setAlarm() {}
+// Stores the interval ID so we can clear it later
+let interval = null;
+
+// Helper function: format seconds as mm:ss and update the display
+// This keeps the time-display logic in ONE place (CJ feedback: avoid repetition)
+function updateTimeDisplay(totalSeconds) {
+  const mins = String(Math.floor(totalSeconds / 60)).padStart(2, "0");
+  const secs = String(totalSeconds % 60).padStart(2, "0");
+  document.getElementById("timeRemaining").innerText =
+    "Time Remaining: " + mins + ":" + secs;
+}
+
+function setAlarm() {
+  // Clear any previously running countdown
+  clearInterval(interval);
+
+  // Reset background to default
+  document.body.style.backgroundColor = "";
+
+  // Stop any currently playing alarm sound before starting a new countdown
+  // (the user may not click "Stop" first before setting a new alarm)
+  pauseAlarm();
+
+  // Read the input value and convert it to a plain integer (total seconds)
+  let totalSeconds = parseInt(document.getElementById("alarmSet").value);
+
+  // Validate input: reject NaN, negative numbers, or empty field
+  if (isNaN(totalSeconds) || totalSeconds < 0) {
+    document.getElementById("timeRemaining").innerText =
+      "Please enter a valid number of seconds (0 or above).";
+    return;
+  }
+
+  // If input is 0, trigger the alarm immediately instead of waiting 1 second
+  if (totalSeconds === 0) {
+    updateTimeDisplay(0);
+    document.body.style.backgroundColor = "red";
+    playAlarm();
+    return;
+  }
+
+  // Display the initial time using the helper function
+  updateTimeDisplay(totalSeconds);
+
+  // Start the countdown: setInterval calls the callback every 1000 ms (1 second)
+  interval = setInterval(function () {
+    totalSeconds--; // subtract 1 second
+
+    if (totalSeconds <= 0) {
+      // Stop the interval when time runs out
+      clearInterval(interval);
+
+      updateTimeDisplay(0);
+
+      // Change background colour to signal the alarm
+      document.body.style.backgroundColor = "red";
+
+      // Trigger the alarm sound (defined below the DO NOT EDIT line)
+      playAlarm();
+      return;
+    }
+
+    // Update the display with the new remaining time
+    updateTimeDisplay(totalSeconds);
+  }, 1000);
+}
+
+// Make the Stop button also stop the countdown (not just the sound)
+// Uses DOMContentLoaded so the button element exists before we attach the listener
+// This adds a SECOND listener without modifying the original code below
+document.addEventListener("DOMContentLoaded", function () {
+  document.getElementById("stop").addEventListener("click", function () {
+    clearInterval(interval);
+    document.body.style.backgroundColor = "";
+  });
+});
 
 // 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">