CodeYourFuture · alexandru-pocovnicu · Mar 16, 2026 · Mar 16, 2026 · Mar 16, 2026 · Mar 19, 2026
diff --git a/Sprint-3/alarmclock/alarmclock.js b/Sprint-3/alarmclock/alarmclock.js
@@ -1,4 +1,91 @@
-function setAlarm() {}
+let intervalId;
+let isPaused;
+let remainingSeconds = 0;
+function setAlarm() {
+  isPaused = false;
+  const pauseButton = document.getElementById("pause-button");
+  if (pauseButton) {
+    pauseButton.removeAttribute("id");
+    pauseButton.classList.add("unpause-alarm");
+    pauseButton.addEventListener("click", pauseCountDown);
+  }
+
+  const alarmSetEl = document.getElementById("alarmSet");
+  const timeRemainingEl = document.getElementById("timeRemaining");
+  let totalSeconds = +alarmSetEl.value;
+  remainingSeconds = totalSeconds;
+
+  if (
+    totalSeconds <= 0 ||
+    isNaN(totalSeconds) ||
+    !Number.isInteger(totalSeconds)
+  ) {
+    alarmSetEl.value = "";
+    return;
+  }
+  cleanInitialState();
+
+  function updateCountDown() {
+    remainingSeconds = totalSeconds;
+    let seconds = totalSeconds % 60;
+    let minutes = (totalSeconds - seconds) / 60;
+
+    let paddedSeconds = seconds.toString().padStart(2, "0");
+    let paddedMinutes = minutes.toString().padStart(2, "0");
+    timeRemainingEl.innerHTML = `Time Remaining: ${paddedMinutes}:${paddedSeconds}`;
+
+    if (totalSeconds <= 0) {
+      document.body.classList.add("finish-countdown");
+
+      playAlarm();
+      clearInterval(intervalId);
+      return;
+    }
+
+    totalSeconds -= 1;
+  }
+
+  updateCountDown();
+  intervalId = setInterval(updateCountDown, 1000);
+}
+
+function pauseCountDown(e) {
+  if (isPaused === false) {
+    clearInterval(intervalId);
+    e.target.textContent = "unpause";
+    isPaused = true;
+  } else {
+    e.target.textContent = "Pause";
+    isPaused = false;
+    intervalId = setInterval(() => {
+      if (remainingSeconds <= 0) {
+        clearInterval(intervalId);
+        return;
+      }
+      remainingSeconds -= 1;
+      const seconds = remainingSeconds % 60;
+      const minutes = (remainingSeconds - seconds) / 60;
+      const paddedSeconds = seconds.toString().padStart(2, "0");
+      const paddedMinutes = minutes.toString().padStart(2, "0");
+      document.getElementById("timeRemaining").innerHTML =
+        `Time Remaining: ${paddedMinutes}:${paddedSeconds}`;
+
+      if (remainingSeconds <= 0) {
+        document.body.classList.add("finish-countdown");
+        playAlarm();
+        clearInterval(intervalId);
+      }
+    }, 1000);
+  }
+}
+
+function cleanInitialState() {
+  clearInterval(intervalId);
+  document.body.classList.remove("finish-countdown");
+  document.getElementById("timeRemaining").innerHTML = "Time Remaining: 00:00";
+  document.getElementById("alarmSet").value = null;
+  pauseAlarm();
+}
 
 // DO NOT EDIT BELOW HERE
 

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">
@@ -14,6 +14,7 @@ <h1 id="timeRemaining">Time Remaining: 00:00</h1>
 
       <button id="set" type="button">Set Alarm</button>
       <button id="stop" type="button">Stop Alarm</button>
+      <button id="pause-button">Pause</button>
     </div>
     <script src="alarmclock.js"></script>
   </body>

diff --git a/Sprint-3/alarmclock/readme.md b/Sprint-3/alarmclock/readme.md
@@ -6,7 +6,7 @@ First off, once you've branched off `main`, then update the title element in `in
 You will need to write your implementation in `alarmclock.js`.
 
 ## How the clock should work
-
+ 
 When you click the `Set Alarm` button the counter at the top of the screen should change to the number you entered in the `input` field. For example, if the `input` field says `10` then the title should say `Time Remaining: 00:10`.
 
 Every one second the title should count down by one.

diff --git a/Sprint-3/alarmclock/style.css b/Sprint-3/alarmclock/style.css
@@ -13,3 +13,24 @@
 h1 {
   text-align: center;
 }
+
+.finish-countdown {
+  animation: police 0.5s infinite;
+}
+
+@keyframes police {
+  from {
+    background-color: blue;
+  }
+  to {
+    background-color: red;
+  }
+}
+
+#pause-button {
+  visibility: hidden;
+}
+
+.unpause-alarm{
+
+}