CodeYourFuture · Fares-Bakhet · Nov 14, 2025 · Nov 14, 2025 · Nov 14, 2025 · Nov 16, 2025
diff --git a/Sprint-3/alarmclock/alarmclock.js b/Sprint-3/alarmclock/alarmclock.js
@@ -1,4 +1,50 @@
-function setAlarm() {}
+let intervalId = null;
+
+function setAlarm() {
+  let time = Number(document.getElementById("alarmSet").value);
+  const heading = document.getElementById("timeRemaining");
+
+  audio.loop = true;
+
+  if (isNaN(time) || time <= 0) {
+    heading.innerText = "Please enter a valid positive number.";
+    return;
+  }
+
+  time = Math.floor(time);
+
+  if (intervalId !== null) {
+    clearInterval(intervalId);
+  }
+
+  audio.pause();
+  audio.currentTime = 0;
+
+  document.body.style.backgroundColor = "";
+  function updateDisplay(t) {
+    const minutes = String(Math.floor(t / 60)).padStart(2, "0");
+    const seconds = String(t % 60).padStart(2, "0");
+    heading.innerText = `Time Remaining: ${minutes}:${seconds}`;
+  }
+
+  updateDisplay(time);
+
+  intervalId = setInterval(() => {
+    time--;
+
+    if (time <= 0) {
+      clearInterval(intervalId);
+      intervalId = null;
+
+      updateDisplay(0);
+
+      document.body.style.backgroundColor = "red";
+      playAlarm();
+    } else {
+      updateDisplay(time);
+    }
+  }, 1000);
+}
 
 // DO NOT EDIT BELOW HERE
 

diff --git a/Sprint-3/alarmclock/alarmclock.test.js b/Sprint-3/alarmclock/alarmclock.test.js
@@ -8,7 +8,7 @@ const { JSDOM } = require("jsdom");
 let page = null;
 
 beforeEach(async () => {
-  page = await JSDOM.fromFile(path.join(__dirname, "index.html"), {
+  page = await JSDOM.fromFile(path.join(__dirname, "alarmclockapp.html"), {
     resources: "usable",
     runScripts: "dangerously",
   });

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">