London | 25-ITP-May | Surafel Workneh | Sprint-3 | Alarmclock

Sprint-3/alarmclock/alarmclock.js

@@ -1,25 +1,132 @@
-function setAlarm() {}
+let timeRemaining = 0;
+let intervalId;
+const audio = new Audio("alarmsound.mp3");
 
-// DO NOT EDIT BELOW HERE
+/**
+ * Sets the alarm countdown.
+ * Validates input, resets alarm and timer.
+ */
+function setAlarm() {
+  const input = document.getElementById("alarmSet");
+  timeRemaining = parseInt(input.value, 10);
 
-var audio = new Audio("alarmsound.mp3");
+  // Validation: check for valid number
+  if (isNaN(timeRemaining) || timeRemaining <= 0) {
+    alert("Please enter a positive number of seconds.");
+    return;
+  }
 
-function setup() {
-  document.getElementById("set").addEventListener("click", () => {
-    setAlarm();
-  });
+  // Clear any existing countdown
+  if (intervalId) {
+    clearInterval(intervalId);
+  }
+
+  // Pause any currently playing alarm sound
+  pauseAlarm(true);
+
+  // Update the initial time display
+  updateTimeDisplay();
+
+  // Start new interval countdown
+  intervalId = setInterval(() => {
+    timeRemaining--;
+    updateTimeDisplay();
 
-  document.getElementById("stop").addEventListener("click", () => {
-    pauseAlarm();
-  });
+    if (timeRemaining <= 0) {
+      clearInterval(intervalId);
+      playAlarm();
+      startFlashingBackground(); // Flash background when alarm finishes
+    }
+  }, 1000);
 }
 
+/**
+ * Updates the countdown time on screen
+ */
+function updateTimeDisplay() {
+  const heading = document.getElementById("timeRemaining");
+  const minutes = Math.floor(timeRemaining / 60).toString().padStart(2, "0");
+  const seconds = (timeRemaining % 60).toString().padStart(2, "0");
+  heading.innerText = `Time Remaining: ${minutes}:${seconds}`;
+}
+
+/**
+ * Plays the alarm sound from beginning
+ */
 function playAlarm() {
+  audio.currentTime = 0;
   audio.play();
 }
 
-function pauseAlarm() {
+/**
+ * Stops the alarm sound
+ * @param {boolean} resetAudio - if true, reset to start
+ */
+function pauseAlarm(resetAudio = false) {
   audio.pause();
+  if (resetAudio) {
+    audio.currentTime = 0;
+  }
+}
+
+/**
+ * Flashes the background color when alarm finishes
+ */
+function startFlashingBackground() {
+  let flashCount = 0;
+  const maxFlashes = 10; // Number of flashes (5 times)
+  const originalColor = document.body.style.backgroundColor;
+  const flashInterval = setInterval(() => {
+    document.body.style.backgroundColor =
+      document.body.style.backgroundColor === "red" ? "white" : "red";
+    flashCount++;
+    if (flashCount >= maxFlashes) {
+      clearInterval(flashInterval);
+      document.body.style.backgroundColor = originalColor;
+    }
+  }, 300);
+}
+
+/**
+ * Pauses the countdown timer
+ */
+function pauseTimer() {
+  if (intervalId) {
+    clearInterval(intervalId);
+    intervalId = null;
+  }
+}
+
+/**
+ * Resumes the countdown timer
+ */
+function resumeTimer() {
+  if (!intervalId && timeRemaining > 0) {
+    intervalId = setInterval(() => {
+      timeRemaining--;
+      updateTimeDisplay();
+
+      if (timeRemaining <= 0) {
+        clearInterval(intervalId);
+        playAlarm();
+        startFlashingBackground();
+      }
+    }, 1000);
+  }
+}
+
+/**
+ * Setup event listeners after page load
+ */
+function setup() {
+  // Set alarm button
+  document.getElementById("set").addEventListener("click", setAlarm);
+  // Stop alarm button
+  document.getElementById("stop").addEventListener("click", () => pauseAlarm(true));
+  // Pause timer button
+  document.getElementById("pause").addEventListener("click", pauseTimer);
+  // Resume timer button
+  document.getElementById("resume").addEventListener("click", resumeTimer);
 }
 
-window.onload = setup;
+window.onload = setup;

Sprint-3/alarmclock/alarmclock.test.js

@@ -1,6 +1,7 @@
 /* ======= TESTS - DO NOT MODIFY ===== 
 There are some Tests in this file that will help you work out if your code is working.
 */
+require('@testing-library/jest-dom');
 
 const path = require("path");
 const { JSDOM } = require("jsdom");

Sprint-3/alarmclock/index.html

@@ -4,7 +4,7 @@
     <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">
@@ -14,7 +14,9 @@ <h1 id="timeRemaining">Time Remaining: 00:00</h1>
 
       <button id="set" type="button">Set Alarm</button>
       <button id="stop" type="button">Stop Alarm</button>
+      <button id="pause" type="button">Pause</button>
+      <button id="resume" type="button">Resume</button>
     </div>
     <script src="alarmclock.js"></script>
   </body>
-</html>
+</html>