Complete Alarm Clock App

Samual-Hu · Samual-Hu · commit 63c3803ccf6f · 2026-03-27T12:34:02.000Z
diff --git a/Sprint-3/alarmclock/alarmclock.js b/Sprint-3/alarmclock/alarmclock.js
@@ -1,4 +1,32 @@
-function setAlarm() {}
+let countdownInterval;
+
+function setAlarm() {
+  const inputElement = document.getElementById("alarmSet");
+  const timeDisplay = document.getElementById("timeRemaining");
+
+  let timeRemaining = parseInt(inputElement.value, 10) || 0;
+
+  clearInterval(countdownInterval);
+
+  function updateDisplay() {
+    const minutes = String(Math.floor(timeRemaining / 60)).padStart(2, "0");
+    const seconds = String(timeRemaining % 60).padStart(2, "0");
+    timeDisplay.innerText = `Time Remaining: ${minutes}:${seconds}`;
+  }
+
+  updateDisplay();
+
+  countdownInterval = setInterval(() => {
+    timeRemaining--;
+
+    if (timeRemaining < 0) {
+      clearInterval(countdownInterval);
+      playAlarm();
+    } else {
+      updateDisplay();
+    }
+  }, 1000);
+}
 
 // DO NOT EDIT BELOW HERE
 
diff --git a/Sprint-3/alarmclock/index.html b/Sprint-3/alarmclock/index.html
@@ -1,16 +1,16 @@
-<!DOCTYPE html>
+<!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>
+    <title>Alarm Clock App</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" />
+      <input id="alarmSet" type="number" min="0" />
 
       <button id="set" type="button">Set Alarm</button>
       <button id="stop" type="button">Stop Alarm</button>
