London | ITP-SEP25 | Imran Mohamed | Sprint 3 | Alarm Clock

Sprint-3/alarmclock/alarmclock.js

@@ -1,5 +1,47 @@
-function setAlarm() {}
+function setAlarm() {
+  const alarmTimeInput = document.getElementById("alarmSet");
+  const alarmTimeInSeconds = alarmTimeInput.value;
+  let totalSeconds = parseInt(alarmTimeInSeconds);
+
+  if (isNaN(totalSeconds) || totalSeconds <= 0) {
+    alert("Please enter a valid number of seconds for the alarm.");
+    document.getElementById("alarmSet").value = "";
+    return;
+  }
 
+  updateTimeRemaining(totalSeconds);
+
+  let countdown = setInterval(() => {
+    totalSeconds--;
+    updateTimeRemaining(totalSeconds);
+    if (totalSeconds <= 0) {
+      clearInterval(countdown);
+      playAlarm();
+      let flash = setInterval(() => {
+        document.body.style.backgroundColor =
+          document.body.style.backgroundColor === "red" ? "white" : "red";
+      }, 500);
+      setTimeout(() => {
+        clearInterval(flash);
+        document.body.style.backgroundColor = "white";
+      }, 5000);
+    }
+  }, 1000); 
+}
+
+function updateTimeRemaining(totalSeconds) {
+  const timeRemaining = document.getElementById("timeRemaining");
+  let minutes = Math.floor(totalSeconds / 60);
+  let seconds = totalSeconds % 60;
+  let minuteStr = padNumber(minutes);
+  let secondStr = padNumber(seconds);
+  let displayTime = "Time Remaining: " + minuteStr + ":" + secondStr;
+  timeRemaining.textContent = displayTime;
+}
+
+function padNumber(num) {
+  return String(num).padStart(2, "0");
+}
 // DO NOT EDIT BELOW HERE
 
 var audio = new Audio("alarmsound.mp3");

Sprint-3/alarmclock/countdown.js

@@ -0,0 +1,86 @@
+const alarmTimeInput = document.getElementById("alarmSet");
+const setAlarmButton = document.getElementById("set");
+const stopAlarmButton = document.getElementById("stop");
+const pauseAlarmButton = document.getElementById("pause");
+const timeRemainingDisplay = document.getElementById("timeRemaining");
+
+setAlarmButton.addEventListener("click", setAlarm);
+stopAlarmButton.addEventListener("click", stopAlarm);
+pauseAlarmButton.addEventListener("click", pauseAlarm);
+
+let countdownInterval;
+let flashInterval;
+let totalSeconds = 0;
+const alarmSound = new Audio("alarmsound.mp3");
+let isPaused = false;
+
+function setAlarm() {
+  totalSeconds = totalSeconds || parseInt(alarmTimeInput.value);
+  if (isNaN(totalSeconds) || totalSeconds <= 0) {
+    alert("Please enter a valid number of seconds for the alarm.");
+    alarmTimeInput.value = "";
+    return;
+  }
+  updateTimeRemaining();
+  countdown();
+  alarmTimeInput.value = "";
+}
+
+function stopAlarm() {
+  clearInterval(countdownInterval);
+  clearInterval(flashInterval);
+  countdownInterval = null;
+  flashInterval = null;
+  totalSeconds = 0;
+  updateTimeRemaining();
+  alarmTimeInput.value = "";
+  alarmSound.pause();
+  alarmSound.currentTime = 0;
+}
+
+function playAlarm() {
+  alarmSound.play();
+}
+
+function updateTimeRemaining() {
+  let minutes = Math.floor(totalSeconds / 60);
+  let seconds = totalSeconds % 60;
+  let minuteStr = padNumber(minutes);
+  let secondStr = padNumber(seconds);
+  let displayTime = "Time Remaining: " + minuteStr + ":" + secondStr;
+  timeRemainingDisplay.textContent = displayTime;
+}
+
+function padNumber(num) {
+  return String(num).padStart(2, "0");
+}
+
+function countdown() {
+  countdownInterval = setInterval(() => {
+    totalSeconds--;
+    updateTimeRemaining();
+    if (totalSeconds <= 0) {
+      clearInterval(countdownInterval);
+      playAlarm();
+      flashInterval = setInterval(() => {
+        document.body.style.backgroundColor =
+          document.body.style.backgroundColor === "red" ? "white" : "red";
+      }, 500);
+      setTimeout(() => {
+        clearInterval(flashInterval);
+        document.body.style.backgroundColor = "white";
+      }, 5000);
+    }
+  }, 1000);
+}
+
+function pauseAlarm() {
+  if (countdownInterval) {
+    clearInterval(countdownInterval);
+    countdownInterval = null;
+  } else {
+    setAlarm(totalSeconds);
+  }
+  isPaused = !isPaused;
+  pauseAlarmButton.textContent = countdownInterval ? "Pause" : "Resume";
+}

Sprint-3/alarmclock/index.html

@@ -4,16 +4,17 @@
     <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" />
-
-      <button id="set" type="button">Set Alarm</button>
-      <button id="stop" type="button">Stop Alarm</button>
+      <input id="alarmSet" type="number" min="1" />
+      <div class="buttons">
+        <button id="set" type="button">Set Alarm</button>
+        <button id="stop" type="button">Stop Alarm</button>
+      </div>
     </div>
     <script src="alarmclock.js"></script>
   </body>