diff --git a/Sprint-3/alarmclock/alarmclock.js b/Sprint-3/alarmclock/alarmclock.js
index 6ca81cd3b..37863c074 100644
--- a/Sprint-3/alarmclock/alarmclock.js
+++ b/Sprint-3/alarmclock/alarmclock.js
@@ -1,4 +1,62 @@
-function setAlarm() {}
+let intervalId = null;
+
+function setAlarm() {
+ const input = document.getElementById("alarmSet");
+ const heading = document.getElementById("timeRemaining");
+
+ const value = Number(input.value);
+ if (!Number.isInteger(value) || value <= 0) {
+ alert("Please enter a positive whole number of seconds.");
+ return;
+ }
+
+ resetAlarm();
+
+ let remainingSeconds = value;
+ updateDisplay(remainingSeconds);
+
+ intervalId = setInterval(() => {
+ remainingSeconds -= 1;
+
+ if (remainingSeconds > 0) {
+ updateDisplay(remainingSeconds);
+ } else {
+ updateDisplay(0);
+ clearInterval(intervalId);
+ playAlarm();
+ setFlashingBackground(true);
+ }
+ }, 1000);
+}
+
+function resetAlarm() {
+ clearInterval(intervalId);
+ intervalId = null;
+ updateDisplay(0);
+ setFlashingBackground(false);
+ pauseAlarm();
+}
+
+function updateDisplay(seconds) {
+ const heading = document.getElementById("timeRemaining");
+ heading.innerText = `Time Remaining: ${formatTime(seconds)}`;
+}
+
+function formatTime(totalSeconds) {
+ const minutes = Math.floor(totalSeconds / 60);
+ const seconds = totalSeconds % 60;
+ const mm = String(minutes).padStart(2, "0");
+ const ss = String(seconds).padStart(2, "0");
+ return `${mm}:${ss}`;
+}
+
+function setFlashingBackground(isFlashing) {
+ if (isFlashing) {
+ document.body.classList.add("flash");
+ } else {
+ document.body.classList.remove("flash");
+ }
+}
// DO NOT EDIT BELOW HERE
@@ -20,6 +78,7 @@ function playAlarm() {
function pauseAlarm() {
audio.pause();
+ setFlashingBackground(false);
}
window.onload = setup;
diff --git a/Sprint-3/alarmclock/index.html b/Sprint-3/alarmclock/index.html
index 48e2e80d9..ff2d3b453 100644
--- a/Sprint-3/alarmclock/index.html
+++ b/Sprint-3/alarmclock/index.html
@@ -4,7 +4,7 @@
- Title here
+ Alarm clock app
diff --git a/Sprint-3/alarmclock/style.css b/Sprint-3/alarmclock/style.css
index 0c72de38b..f2ccb38e6 100644
--- a/Sprint-3/alarmclock/style.css
+++ b/Sprint-3/alarmclock/style.css
@@ -13,3 +13,13 @@
h1 {
text-align: center;
}
+
+.flash {
+ animation: flash-bg 0.5s infinite alternate;
+}
+
+@keyframes flash-bg {
+ from { background-color: white; }
+ to { background-color: red; }
+}
+