happy with my clock

mjm-git185 · mjm-git185 · commit fd7a1c66196e · 2026-03-19T09:33:42.000Z
diff --git a/Sprint-3/alarmclock/alarmClockApp.html b/Sprint-3/alarmclock/alarmClockApp.html
@@ -0,0 +1,20 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <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>
+  </head>
+  <body>
+    <div class="centre">
+      <h1 id="timeRemaining">Time Remaining: 00:00</h1>
+      <label for="alarmSet">Set time to:</label>
+      <input id="alarmSet" type="number" onfocus="" />
+
+      <button id="set" type="button">Set Alarm</button>
+      <button id="stop" type="button">Stop Alarm</button>
+    </div>
+    <script src="alarmclock.js"></script>
+  </body>
+</html>
diff --git a/Sprint-3/alarmclock/alarmclock.js b/Sprint-3/alarmclock/alarmclock.js
@@ -1,17 +1,36 @@
-let timeIn = document.getElementById("alarmSet").value;
-let countDown = document.getElementById("timeRemaining");
+botton = document.getElementById("set");
+//begins the count down
+botton.addEventListener("click", setAlarm);
 
+// document.getElementById("set").addEventListener("click", setAlarm);
+const timeRemaining = document.getElementById("timeRemaining");
 function setAlarm() {
-  timeIn--;
-  countDown.innerHTML = "timeRemaining " + ":" + timeIn;
-  if (timeIn < 1) {
-    playAlarm;
-    clearInterval(timer);
-  }
+  // gets the value of the input field and stores it in a variable
+  let timeInSeconds = document.getElementById("alarmSet").value;
+
+  let clock = setInterval(() => {
+    function pad(num) {
+      return num.toString().padStart(2, "0");
+    }
+
+    function formatTimeDisplay(timeInSeconds) {
+      const remainingSeconds = timeInSeconds % 60;
+      const totalMinutes = (timeInSeconds - remainingSeconds) / 60;
+      const remainingMinutes = totalMinutes % 60;
+      const totalHours = (totalMinutes - remainingMinutes) / 60;
+
+      return `${pad(totalHours)}:${pad(remainingMinutes)}:${pad(remainingSeconds)}`;
+    }
+
+    timeInSecond = timeInSeconds--;
+    if (timeInSeconds == 0) {
+      clearInterval(clock);
+      playAlarm();
+    }
+    timeRemaining.innerHTML =
+      "time remaining  " + formatTimeDisplay(timeInSeconds);
+  }, 1000);
 }
-const timer = setInterval(setAlarm, 1000);
-
-// setTimeout(count, 1000);
 
 // DO NOT EDIT BELOW HERE
 
diff --git a/Sprint-3/alarmclock/package.json b/Sprint-3/alarmclock/package.json
@@ -13,5 +13,8 @@
   "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": {
+    "jest": "^30.3.0"
+  }
 }
diff --git a/Sprint-3/alarmclock/style.css b/Sprint-3/alarmclock/style.css
@@ -1,15 +1,24 @@
+body {
+  min-width: fit-content;
+  font-size: 20px;
+  background-color: darkorchid;
+  color: rgb(113, 48, 48);
+}
+
 .centre {
   position: fixed;
   top: 50%;
   left: 50%;
   -webkit-transform: translate(-50%, -50%);
   transform: translate(-50%, -50%);
 }
-
+button {
+  border-radius: 30px;
+}
 #alarmSet {
-  margin: 20px;
+  margin: 0px;
 }
 
 h1 {
-  text-align: center;
+  text-align: right;
 }
