add alarm clock functionality with countdown timer and audio playback

Pretty Taruvinga · Pretty Taruvinga · commit 5d99247cb06c · 2026-04-10T22:02:17.000+02:00
- format time in mm:ss
- update display every second
- trigger alarm sound at zero
- add stop button to pause audio
diff --git a/Sprint-3/alarmclock/alarmclock.js b/Sprint-3/alarmclock/alarmclock.js
@@ -1,29 +1,35 @@
-function setAlarm() {
-  const input = document.getElementById("alarmSet").value;
-  const heading = document.getElementById("timeRemaining");
+let timeLeft = 0;
+let timer = null;
 
-  let totalSeconds = Number(input);
+function formatTime(seconds) {
+  let mins = String(Math.floor(seconds / 60)).padStart(2, "0");
+  let secs = String(seconds % 60).padStart(2, "0");
+  return `${mins}:${secs}`;
+}
 
-  function updateDisplay(seconds) {
-    const min = Math.floor(seconds / 60);
-    const secs = seconds % 60;
+function setAlarm() {
+  const input = document.getElementById("alarmSet").value;
+  const display = document.getElementById("timeRemaining");
 
-    const formattedMin = String(min).padStart(2, "0");
-    const formattedSecs = String(secs).padStart(2, "0");
+  timeLeft = parseInt(input, 10);
 
-    heading.innerText = `Time Remaining: ${formattedMin}:${formattedSecs}`;
+  if (isNaN(timeLeft) || timeLeft <= 0) {
+    alert("Please enter a valid number of seconds.");
+    return;
   }
-  updateDisplay(totalSeconds);
 
-  const timer = setInterval(() => {
-    totalSeconds--;
+  display.textContent = `Time Remaining: ${formatTime(timeLeft)}`;
 
-    if (totalSeconds <= 0) {
-      updateDisplay(0);
+  if (timer) {
+    clearInterval(timer);
+  }
+  timer = setInterval(() => {
+    if (timeLeft > 0) {
+      timeLeft--;
+      display.textContent = `Time Remaining: ${formatTime(timeLeft)}`;
+    } else {
       clearInterval(timer);
       playAlarm();
-    } else {
-      updateDisplay(totalSeconds);
     }
   }, 1000);
 }
diff --git a/Sprint-3/alarmclock/index.html b/Sprint-3/alarmclock/index.html
@@ -1,10 +1,10 @@
-<!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">
diff --git a/Sprint-3/quote-generator/quotes.js b/Sprint-3/quote-generator/quotes.js
@@ -11,8 +11,7 @@ function showQuote() {
 }
 
 button.addEventListener("click", showQuote);
-
-window.onload = showQuote;
+document.addEventListener("DOMContentLoaded", showQuote);
 
 // DO NOT EDIT BELOW HERE
 

Original file line number	Diff line number	Diff line change
`@@ -11,8 +11,7 @@ function showQuote() {`
`11`	`11`	`}`
`12`	`12`
`13`	`13`	`button.addEventListener("click", showQuote);`
`14`		`-`
`15`		`-window.onload = showQuote;`
	`14`	`+document.addEventListener("DOMContentLoaded", showQuote);`
`16`	`15`
`17`	`16`	`// DO NOT EDIT BELOW HERE`
`18`	`17`