setAlarm function updated & clock app created

mervereis · mervereis · commit bb748b48c68d · 2026-03-18T12:58:59.000Z
diff --git a/Sprint-3/alarmclock/alarmclock.js b/Sprint-3/alarmclock/alarmclock.js
@@ -1,4 +1,39 @@
-function setAlarm() {}
+// Turns a number of seconds into "MM:SS" format
+// e.g. 75 -> "01:15"
+function formatTime(seconds) {
+  const minutes = Math.floor(seconds / 60);
+  const remainingSeconds = seconds % 60;
+
+  // padStart makes sure single digits get a leading zero e.g. 5 -> "05"
+  const mm = String(minutes).padStart(2, "0");
+  const ss = String(remainingSeconds).padStart(2, "0");
+
+  return mm + ":" + ss;
+}
+
+function setAlarm() {
+  // Get the number the user typed in the input field
+  let seconds = Number(document.getElementById("alarmSet").value);
+
+  // Update the heading to show the starting time
+  document.getElementById("timeRemaining").innerText =
+    "Time Remaining: " + formatTime(seconds);
+
+  // Count down every 1000ms (1 second)
+  let intervalId = setInterval(function () {
+    seconds = seconds - 1;
+
+    // Update the heading each second
+    document.getElementById("timeRemaining").innerText =
+      "Time Remaining: " + formatTime(seconds);
+
+    // When we reach zero, stop counting and play the alarm
+    if (seconds === 0) {
+      clearInterval(intervalId);
+      playAlarm();
+    }
+  }, 1000);
+}
 
 // DO NOT EDIT BELOW HERE
 
diff --git a/Sprint-3/alarmclock/index.html b/Sprint-3/alarmclock/index.html
@@ -1,20 +1,23 @@
 <!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>
-  </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" />
 
-      <button id="set" type="button">Set Alarm</button>
-      <button id="stop" type="button">Stop Alarm</button>
-    </div>
-    <script src="alarmclock.js"></script>
-  </body>
-</html>
+<head>
+  <meta charset="utf-8" />
+  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+  <link rel="stylesheet" href="style.css" />
+  <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" min="1" step="1" />
+
+    <button id="set" type="button">Set Alarm</button>
+    <button id="stop" type="button">Stop Alarm</button>
+  </div>
+  <script src="alarmclock.js"></script>
+</body>
+
+</html>
