diff --git a/Sprint-3/alarmclock/alarmclock.js b/Sprint-3/alarmclock/alarmclock.js
index 6ca81cd3b..1991ea6fb 100644
--- a/Sprint-3/alarmclock/alarmclock.js
+++ b/Sprint-3/alarmclock/alarmclock.js
@@ -1,4 +1,43 @@
-function setAlarm() {}
+let countdownId;
+
+ // moved to outer scope, takes seconds as a parameter
+ function updateDisplay(seconds) {
+ const minutes = Math.floor(seconds / 60);
+ const remainingSeconds = seconds % 60;
+ document.getElementById("timeRemaining").textContent =
+ `Time Remaining: ${String(minutes).padStart(2, "0")}:${String(remainingSeconds).padStart(2, "0")}`;
+ }
+
+// reset before starting new countdown
+function resetAlarm() {
+ clearInterval(countdownId);
+ updateDisplay(0); // replaces the manual textContent line
+ document.body.classList.toggle("alarm-activated", false);
+}
+
+function setAlarm() {
+ let seconds = parseInt(document.getElementById("alarmSet").value);
+
+ if (!seconds || seconds < 1) {
+ alert("The number of seconds must be higher than 0 please");
+ return;
+ }
+
+ updateDisplay(seconds);
+ // pass seconds as argument and update immediately on click
+
+ countdownId = setInterval(() => {
+ seconds--;
+ updateDisplay(seconds);
+ // pass seconds as argument
+
+ if (seconds <= 0) {
+ clearInterval(countdownId);
+ playAlarm();
+ document.body.classList.toggle("alarm-activated", true);
+ }
+ }, 1000);
+}
// DO NOT EDIT BELOW HERE
@@ -18,8 +57,4 @@ function playAlarm() {
audio.play();
}
-function pauseAlarm() {
- audio.pause();
-}
-
window.onload = setup;
diff --git a/Sprint-3/alarmclock/index.html b/Sprint-3/alarmclock/index.html
index 48e2e80d9..f307a7190 100644
--- a/Sprint-3/alarmclock/index.html
+++ b/Sprint-3/alarmclock/index.html
@@ -4,13 +4,13 @@
- Title here
+ Alarm clock app
Time Remaining: 00:00
-
+
diff --git a/Sprint-3/alarmclock/style.css b/Sprint-3/alarmclock/style.css
index 0c72de38b..a5acef770 100644
--- a/Sprint-3/alarmclock/style.css
+++ b/Sprint-3/alarmclock/style.css
@@ -4,6 +4,8 @@
left: 50%;
-webkit-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
+ .alarm-activated {
+ background-color: darkorange;
}
#alarmSet {
@@ -13,3 +15,8 @@
h1 {
text-align: center;
}
+
+body {
+ background-color: cornflowerblue;
+ font-family: "Trebuchet MS", Tahoma, Verdana, Helvetica, sans-serif;
+}