I have completed sprint 3 alarm clock

Seti-Jemal · Seti-Jemal · commit 75028ecdac54 · 2026-04-04T18:51:12.000+01:00
diff --git a/Sprint-3/alarmclock/alarmclock.js b/Sprint-3/alarmclock/alarmclock.js
@@ -1,25 +1,93 @@
-function setAlarm() {}
+let timeRemaining = 0;
+let timerId = null;
 
-// DO NOT EDIT BELOW HERE
+const audio = new Audio("alarmsound.mp3");
 
-var audio = new Audio("alarmsound.mp3");
+// FORMAT mm:ss
+function formatTime(seconds) {
+  const mins = Math.floor(seconds / 60);
+  const secs = seconds % 60;
 
-function setup() {
-  document.getElementById("set").addEventListener("click", () => {
-    setAlarm();
-  });
+  return `${String(mins).padStart(2, "0")}:${String(secs).padStart(2, "0")}`;
+}
 
-  document.getElementById("stop").addEventListener("click", () => {
-    pauseAlarm();
-  });
+// UPDATE DISPLAY (MUST MATCH TEST EXACTLY)
+function updateDisplay() {
+  const heading = document.getElementById("timeRemaining");
+  heading.textContent = "Time Remaining: " + formatTime(timeRemaining);
 }
 
+// REQUIRED BY TESTS
 function playAlarm() {
+  audio.loop = true;
+  audio.currentTime = 0;
   audio.play();
 }
 
-function pauseAlarm() {
+// STOP ALARM
+function stopAlarm() {
   audio.pause();
+  audio.currentTime = 0;
+  audio.loop = false;
+
+  clearInterval(timerId);
+  timerId = null;
+
+  document.body.style.backgroundColor = "";
+}
+
+// TRIGGER ALARM
+function triggerAlarm() {
+  document.body.style.backgroundColor = "red";
+  playAlarm();
+}
+
+// START TIMER
+function startTimer() {
+  clearInterval(timerId);
+
+  timerId = setInterval(() => {
+    timeRemaining--;
+
+    updateDisplay();
+
+    if (timeRemaining <= 0) {
+      clearInterval(timerId);
+      timerId = null;
+
+      timeRemaining = 0;
+      updateDisplay();
+
+      triggerAlarm();
+    }
+  }, 1000);
+}
+
+// SET ALARM
+function setAlarm() {
+  const input = document.getElementById("alarmSet").value;
+
+  // ensure clean number input
+  timeRemaining = parseInt(input, 10);
+
+  if (isNaN(timeRemaining) || timeRemaining < 0) {
+    timeRemaining = 0;
+  }
+
+  updateDisplay();
+
+  if (timeRemaining > 0) {
+    startTimer();
+  }
+}
+
+// SETUP
+function setup() {
+  document.getElementById("set").addEventListener("click", setAlarm);
+  document.getElementById("stop").addEventListener("click", stopAlarm);
+
+  timeRemaining = 0;
+  updateDisplay();
 }
 
 window.onload = setup;
diff --git a/Sprint-3/alarmclock/index.html b/Sprint-3/alarmclock/index.html
@@ -2,19 +2,18 @@
 <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</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" />
+    <h1>
+      Time Remaining: <span id="timeRemaining">00:00</span>
+    </h1>
+
+    <input id="alarmSet" type="number" />
+    <button id="set">Set Alarm</button>
+    <button id="stop">Stop Alarm</button>
 
-      <button id="set" type="button">Set Alarm</button>
-      <button id="stop" type="button">Stop Alarm</button>
-    </div>
     <script src="alarmclock.js"></script>
   </body>
-</html>
+</html>
diff --git a/Sprint-3/alarmclock/style.css b/Sprint-3/alarmclock/style.css
@@ -1,15 +1,11 @@
-.centre {
-  position: fixed;
-  top: 50%;
-  left: 50%;
-  -webkit-transform: translate(-50%, -50%);
-  transform: translate(-50%, -50%);
-}
-
-#alarmSet {
-  margin: 20px;
+body {
+  background-color: blanchedalmond;
 }
 
 h1 {
   text-align: center;
 }
+
+#alarmSet {
+  margin: 20px;
+}
