CodeYourFuture · Fithi-Teklom · Dec 2, 2025 · Dec 2, 2025 · Dec 5, 2025 · Dec 6, 2025
diff --git a/Sprint-3/alarmclock/alarmclock.js b/Sprint-3/alarmclock/alarmclock.js
@@ -1,4 +1,101 @@
-function setAlarm() {}
+let timeLeft = 0;
+let timer = null;
+let flashing = null;
+
+// DOM references
+window.addEventListener("DOMContentLoaded", () => {
+  const stopButton = document.getElementById("stop");
+
+  // Event listeners
+
+  if (stopButton) stopButton.addEventListener("click", stopAlarm);
+
+  // Show 00:00 on load
+  updateDisplay(0);
+});
+
+// -------------------------------
+// FUNCTIONS
+// -------------------------------
+
+function setAlarm() {
+  const inputEl = document.getElementById("alarmSet");
+  const input = inputEl.value.trim();
+
+  // Check empty input
+  if (input === "") {
+    alert("Please enter a number of seconds.");
+    return;
+  }
+
+  const parsed = parseInt(input, 10);
+
+  // Check invalid or negative number
+  if (isNaN(parsed) || parsed < 0) {
+    alert("Please enter a valid non-negative number.");
+    return;
+  }
+
+  timeLeft = parsed;
+
+  // Update display immediately
+  updateDisplay(timeLeft);
+
+  // Clear previous countdown
+  function resetAlarmState() {
+    clearInterval(timer);
+    clearInterval(flashing);
+    flashing = null;
+    document.body.style.backgroundColor = "";
+    pauseAlarm();
+    audio.currentTime = 0;
+  }
+
+  resetAlarmState();
+
+  if (timeLeft === 0) {
+    // Special case: alarm should start immediately
+    startAlarm();
+  } else {
+    timer = setInterval(() => {
+      timeLeft--;
+      updateDisplay(timeLeft);
+
+      if (timeLeft === 0) {
+        clearInterval(timer);
+        startAlarm();
+      }
+    }, 1000);
+  }
+}
+function updateDisplay(seconds) {
+  const mins = String(Math.floor(seconds / 60)).padStart(2, "0");
+  const secs = String(seconds % 60).padStart(2, "0");
+
+  const display = document.getElementById("timeRemaining");
+  if (!display) return;
+  display.textContent = `Time Remaining: ${mins}:${secs}`;
+}
+
+function startAlarm() {
+  playAlarm();
+
+  // Flashing background
+  if (!flashing) {
+    flashing = setTimeout(() => {
+      document.body.style.backgroundColor =
+        document.body.style.backgroundColor === "red" ? "orange" : "red";
+    }, 300);
+  }
+}
+
+function stopAlarm() {
+  clearInterval(flashing);
+  flashing = null;
+  document.body.style.backgroundColor = "";
+}
+
+// module.exports= setAlarm;
 
 // DO NOT EDIT BELOW HERE
 

diff --git a/Sprint-3/alarmclock/alarmclock.test.js b/Sprint-3/alarmclock/alarmclock.test.js
@@ -3,6 +3,8 @@ There are some Tests in this file that will help you work out if your code is wo
 */
 
 const path = require("path");
+// const { setAlarm } = require("./alarmclock.js");
+
 const { JSDOM } = require("jsdom");
 
 let page = null;
@@ -89,12 +91,12 @@ test("should count down every 1000 ms", () => {
 
 test("should play audio when the timer reaches zero", () => {
   const input = page.window.document.querySelector("#alarmSet");
-  const button = page.window.document.querySelector("#set");
+  const startButton = page.window.document.querySelector("#set");
   const mockPlayAlarm = jest.fn();
 
   page.window.playAlarm = mockPlayAlarm;
   input.value = "10";
-  button.click();
+  startButton.click();
 
   expect(mockPlayAlarm).toHaveBeenCalledTimes(0);
 

diff --git a/Sprint-3/alarmclock/index.html b/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">
@@ -15,6 +15,6 @@ <h1 id="timeRemaining">Time Remaining: 00:00</h1>
       <button id="set" type="button">Set Alarm</button>
       <button id="stop" type="button">Stop Alarm</button>
     </div>
-    <script src="alarmclock.js"></script>
+    <script src="alarmclock.js" defer></script>
   </body>
 </html>
diff --git a/Sprint-3/alarmclock/jest.config.js b/Sprint-3/alarmclock/jest.config.js
@@ -0,0 +1,6 @@
+/** @type {import('jest').Config} */
+module.exports = {
+  testEnvironment: "jsdom",
+  verbose: true,
+  testMatch: ["**/*.test.js"],
+};
diff --git a/Sprint-3/alarmclock/package.json b/Sprint-3/alarmclock/package.json
@@ -13,5 +13,9 @@
   "bugs": {
     "url": "https://github.com/CodeYourFuture/CYF-Coursework-Template/issues"
   },
-  "homepage": "https://github.com/CodeYourFuture/CYF-Coursework-Template#readme"
+  "homepage": "https://github.com/CodeYourFuture/CYF-Coursework-Template#readme",
+  "dependencies": {
+    "@testing-library/jest-dom": "^6.9.1",
+    "jest": "^27.5.1"
+  }
 }