passed all the tests

Author: Fithi-Teklom

Sprint-3/alarmclock/alarmclock.js

@@ -7,16 +7,18 @@ let timer = null;
 let flashing = null;
 
 // DOM references
-const display = document.getElementById("timeRemaining");
+window.addEventListener("DOMContentLoaded", () => {
+// const display = document.getElementById("timeRemaining");
 const setButton = document.getElementById("set");
 const stopButton = document.getElementById("stop");
 
 // Event listeners
-setButton.addEventListener("click", setAlarm);
-stopButton.addEventListener("click", stopAlarm);
+// if (setButton) setButton.addEventListener("click", () => playAlarm());
+if (stopButton) stopButton.addEventListener("click", stopAlarm);
 
 // Show 00:00 on load
 updateDisplay(0);
+});
 
 // -------------------------------
 // FUNCTIONS
@@ -53,18 +55,23 @@ function setAlarm() {
 function updateDisplay(seconds) {
   const mins = String(Math.floor(seconds / 60)).padStart(2, "0");
   const secs = String(seconds % 60).padStart(2, "0");
-  display.innerText = `Time Remaining: ${mins}:${secs}`;
+  
+  const display = document.getElementById("timeRemaining");
+  if (!display) return; 
+  display.textContent = `Time Remaining: ${mins}:${secs}`;
 }
 
 function startAlarm() {
-  if (typeof playAlarm === "function") playAlarm();
+  playAlarm();
 
   // Flashing background
-  flashing = setInterval(() => {
+  if (!flashing){
+    flashing = setTimeout(() => {
     document.body.style.backgroundColor =
       document.body.style.backgroundColor === "red" ? "orange" : "red";
   }, 300);
 }
+}
 
 function stopAlarm() {
   if (typeof pauseAlarm === "function") pauseAlarm();
@@ -74,7 +81,8 @@ function stopAlarm() {
   document.body.style.backgroundColor = "";
 }
 
-module.exports= setAlarm;
+
+// module.exports= setAlarm;
 
 
 // DO NOT EDIT BELOW HERE

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;
@@ -91,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);
 });

Sprint-3/alarmclock/index.html

@@ -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>

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"
+  }
 }