in the html file I changed the input type for the alarmSet to minutes instead of number

- in the js file i implemented functions to set the alarm to count the remaining time and play the alarm sound when it counts to 0 .

Author: Mona-Eltantawy

Sprint-3/alarmclock/Alarmclockapp .html Sprint-3/alarmclock/Alarmclockapp.htmlSprint-3/alarmclock/Alarmclockapp .html renamed to Sprint-3/alarmclock/Alarmclockapp.html

@@ -10,7 +10,7 @@
     <div class="centre">
       <h1 id="timeRemaining">Time Remaining: 00:00</h1>
       <label for="alarmSet">Set time to:</label>
-      <input id="alarmSet" type="number" />
+      <input id="alarmSet" type="time" />
 
       <button id="set" type="button">Set Alarm</button>
       <button id="stop" type="button">Stop Alarm</button>

Sprint-3/alarmclock/alarmclock.js

@@ -1,17 +1,58 @@
-function setAlarm() {}
+var audio = new Audio("alarmsound.mp3");
 
-// DO NOT EDIT BELOW HERE
+let timeRemaining = 0;
+let countdownInterval = null;
+let hasPlayed = false;
 
-var audio = new Audio("alarmsound.mp3");
+function setAlarm() {
+  const input = document.getElementById("alarmSet").value;
 
-function setup() {
-  document.getElementById("set").addEventListener("click", () => {
-    setAlarm();
-  });
+  timeRemaining = parseInt(input, 10);
+
+  if (isNaN(timeRemaining) || timeRemaining <= 0) {
+    alert("Please enter a valid number greater than 0");
+    return;
+  }
+
+  hasPlayed = false;
+  updateDisplay();
+
+  if (countdownInterval) {
+    clearInterval(countdownInterval);
+  }
+
+  countdownInterval = setInterval(() => {
+    timeRemaining--;
+
+    // Play alarm at 10 seconds remaining (or immediately if less than 10)
+    if (!hasPlayed && (timeRemaining === 10 || timeRemaining < 10)) {
+      playAlarm();
+      hasPlayed = true;
+    }
 
-  document.getElementById("stop").addEventListener("click", () => {
-    pauseAlarm();
-  });
+    if (timeRemaining <= 0) {
+      timeRemaining = 0;
+      updateDisplay();
+      clearInterval(countdownInterval);
+      return;
+    }
+
+    updateDisplay();
+  }, 1000);
+} // ✅ properly closed function
+
+function updateDisplay() {
+  const display = document.getElementById("timeRemaining");
+
+  const minutes = String(Math.floor(timeRemaining / 60)).padStart(2, "0");
+  const seconds = String(timeRemaining % 60).padStart(2, "0");
+
+  display.textContent = `Time Remaining: ${minutes}:${seconds}`;
+}
+
+function setup() {
+  document.getElementById("set").addEventListener("click", setAlarm);
+  document.getElementById("stop").addEventListener("click", pauseAlarm);
 }
 
 function playAlarm() {
@@ -20,6 +61,11 @@ function playAlarm() {
 
 function pauseAlarm() {
   audio.pause();
+  audio.currentTime = 0;
+
+  if (countdownInterval) {
+    clearInterval(countdownInterval);
+  }
 }
 
-window.onload = setup;
+window.onload = setup;