copmleted alarm clock app

Elisabeth-Matulian · Elisabeth-Matulian · commit 188f02b4a583 · 2026-03-16T19:36:22.000Z
diff --git a/Sprint-3/alarmclock/alarmclock.js b/Sprint-3/alarmclock/alarmclock.js
@@ -1,4 +1,42 @@
-function setAlarm() {}
+const timeRemaining = document.querySelector("#timeRemaining");
+
+let intervalId;
+
+
+
+function setAlarm() {
+  // I will use the function showTime twice, one for showing the time just after the user clicks the set button and another one for updating the time every second in countdown function
+  function showTime() {
+  // getting te mins and seconds from the inputValue in appropriate format
+      const minutes = Math.floor(inputValue / 60)
+        .toString()
+        .padStart(2, "0");
+      const seconds = (inputValue % 60).toString().padStart(2, "0");
+      //Gathering everything together and outputing remaining time
+      timeRemaining.innerText = `Time Remaining: ${minutes}:${seconds}`;
+};
+  // I added the next line in case if we want to reset the time for alarm
+  clearInterval(intervalId);
+  // getting the input value in number format
+  let inputValue = Number(document.querySelector("#alarmSet").value);
+  showTime();
+  intervalId = setInterval(countdown, 1000);
+
+  function countdown() {
+    if (inputValue > 0) {
+      //decrease the entered number by 1
+      inputValue--;
+      showTime();
+    }
+    // When the inputValue is 0, play the alarm and clear interval so that the function stops initialising 
+    else {
+      playAlarm();
+      clearInterval(intervalId);
+    }
+  }
+}
+
+
 
 // DO NOT EDIT BELOW HERE
 
@@ -20,6 +58,8 @@ function playAlarm() {
 
 function pauseAlarm() {
   audio.pause();
+  //I know it's said to not edit this code, I wonder if it's ok to add this line below in order to pause the time before the time runs out. 
+  clearInterval(intervalId);
 }
 
 window.onload = setup;
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">
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",
+  "devDependencies": {
+    "@testing-library/jest-dom": "^6.9.1",
+    "jest-environment-jsdom": "^30.3.0"
+  }
 }
