diff --git a/Sprint-3/alarmclock/alarmclock.js b/Sprint-3/alarmclock/alarmclock.js
index 6ca81cd3b..8fe5cf4e9 100644
--- a/Sprint-3/alarmclock/alarmclock.js
+++ b/Sprint-3/alarmclock/alarmclock.js
@@ -1,4 +1,106 @@
-function setAlarm() {}
+// This is the countdown number that will go down every second
+let countdownTimer;
+
+function startFlashing() {
+ document.body.classList.add("flash-background");
+}
+
+function stopFlashing() {
+ document.body.classList.remove("flash-background");
+}
+
+function setAlarm() {
+ const rawInput = document.getElementById("alarmSet").value.trim();
+
+ // Reject empty input
+ if (rawInput === "") {
+ alert("Please enter a time.");
+ return;
+ }
+
+ // 2. Parse input → returns either a number of seconds or null
+ const totalSeconds = parseInput(rawInput);
+
+ // 3. Reject invalid parsed values
+ if (totalSeconds === null || totalSeconds <= 0) {
+ alert("Please enter a valid positive time.");
+ return;
+ }
+
+ // 4. Reject extremely large values
+ if (totalSeconds > 36000) {
+ alert("Please enter a time less than 10 hours.");
+ return;
+ }
+
+ stopFlashing();
+ pauseAlarm();
+
+ // 5. If we reach here → input is valid
+ startCountdown(totalSeconds);
+}
+
+function parseInput(rawInput) {
+ if (rawInput.includes(":")) {
+ const [minsStr, secsStr] = rawInput.split(":");
+
+ const mins = Number(minsStr);
+ const secs = Number(secsStr);
+
+ if (
+ Number.isNaN(mins) ||
+ Number.isNaN(secs) ||
+ mins < 0 ||
+ secs < 0 ||
+ secs >= 60
+ ) {
+ return null;
+ }
+
+ return mins * 60 + secs;
+ }
+
+ const secs = Number(rawInput);
+ return Number.isNaN(secs) ? null : secs;
+}
+
+function startCountdown(totalSeconds) {
+ let timeLeft = totalSeconds;
+
+ if (countdownTimer) {
+ clearInterval(countdownTimer);
+ }
+
+ updateDisplay(timeLeft);
+
+ countdownTimer = setInterval(() => {
+ timeLeft--;
+ updateDisplay(timeLeft);
+
+ if (timeLeft <= 0) {
+ clearInterval(countdownTimer);
+ playAlarm();
+ startFlashing();
+ }
+ }, 1000);
+}
+
+// A simple helper to turn seconds into MM:SS format
+function formatTime(seconds) {
+ const mins = Math.floor(seconds / 60);
+ const secs = seconds % 60;
+
+ // Make sure both numbers always have two digits
+ const paddedMins = String(mins).padStart(2, "0");
+ const paddedSecs = String(secs).padStart(2, "0");
+
+ return `${paddedMins}:${paddedSecs}`;
+}
+
+function updateDisplay(seconds) {
+ document.getElementById("timeRemaining").innerText =
+ `Time Remaining: ${formatTime(seconds)}`;
+}
// DO NOT EDIT BELOW HERE
@@ -11,6 +113,7 @@ function setup() {
document.getElementById("stop").addEventListener("click", () => {
pauseAlarm();
+ stopFlashing(); // stop flashing if running
});
}
diff --git a/Sprint-3/alarmclock/index.html b/Sprint-3/alarmclock/index.html
index 48e2e80d9..23b5f31ef 100644
--- a/Sprint-3/alarmclock/index.html
+++ b/Sprint-3/alarmclock/index.html
@@ -1,20 +1,22 @@
-
-
-
-
- Title here
-
-
-
-
Time Remaining: 00:00
-
-
-
-
-
-
-
-
+
+
+
+
+ Alarm Clock
+
+
+
+
Time Remaining: 00:00
+
+
+
+
+
+
+
+
+
+
\ No newline at end of file
diff --git a/Sprint-3/alarmclock/style.css b/Sprint-3/alarmclock/style.css
index 0c72de38b..47a06f9bb 100644
--- a/Sprint-3/alarmclock/style.css
+++ b/Sprint-3/alarmclock/style.css
@@ -13,3 +13,27 @@
h1 {
text-align: center;
}
+
+/* flashing effect for the alarm app */
+@keyframes colorRipple {
+ 0% {
+ background-color: #ffffff;
+ } /* White */
+ 25% {
+ background-color: #ff6b6b;
+ } /* Light Coral / Soft Red */
+ 50% {
+ background-color: #feca57;
+ } /* Mango / Warm Yellow-Orange */
+ 75% {
+ background-color: #48dbfb;
+ } /* Sky Blue / Light Aqua */
+ 100% {
+ background-color: #ffffff;
+ } /* White */
+}
+
+/* apply the flashing effect to the body when the alarm is triggered */
+.flash-background {
+ animation: colorRipple 0.8s infinite;
+}