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() {}
+
+
+// function setAlarm() {}
+
+let timeLeft = 0;
+let timer = null;
+let flashing = null;
+
+// DOM references
+window.addEventListener("DOMContentLoaded", () => {
+// const display = document.getElementById("timeRemaining");
+const setButton = document.getElementById("set");
+const stopButton = document.getElementById("stop");
+
+// Event listeners
+// if (setButton) setButton.addEventListener("click", () => playAlarm());
+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
+  clearInterval(timer);
+
+  // Start countdown every 1000ms
+  timer = setInterval(() => {
+    if (timeLeft > 0) {
+      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() {
+  if (typeof pauseAlarm === "function") pauseAlarm();
+
+  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;
@@ -35,6 +37,8 @@ afterEach(() => {
   page = null;
 });
 
+
+
 test("should set heading when button is clicked", () => {
   const heading = page.window.document.querySelector("#timeRemaining");
   const input = page.window.document.querySelector("#alarmSet");
@@ -89,16 +93,16 @@ 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);
 
   jest.runAllTimers();
-
+  
   expect(mockPlayAlarm).toHaveBeenCalledTimes(1);
 });
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"
+  }
 }