diff --git a/Sprint-3/alarmclock/alarmclock.js b/Sprint-3/alarmclock/alarmclock.js
index 6ca81cd3b..1b31c3ab1 100644
--- a/Sprint-3/alarmclock/alarmclock.js
+++ b/Sprint-3/alarmclock/alarmclock.js
@@ -1,5 +1,79 @@
-function setAlarm() {}
+let timerId = null;
+let remainingSeconds = 0;
+function pad(n) {
+ return String(n).padStart(2, "0");
+}
+
+function updateHeading() {
+ const heading = document.getElementById("timeRemaining");
+ if (!heading) return;
+ const m = Math.floor(remainingSeconds / 60);
+ const s = remainingSeconds % 60;
+ heading.textContent = `Time Remaining: ${pad(m)}:${pad(s)}`;
+}
+
+function clearExistingTimer() {
+ if (timerId !== null) {
+ clearInterval(timerId);
+ timerId = null;
+ }
+}
+
+function setAlarm() {
+ const input = document.getElementById("alarmSet");
+ const raw = input ? input.value : "0";
+ remainingSeconds = Math.max(0, Math.floor(Number(raw)) || 0);
+
+ updateHeading();
+
+ clearExistingTimer();
+
+ if (remainingSeconds === 0) {
+ playAlarm();
+ triggerVisualAlarm();
+ return;
+ }
+
+ timerId = setInterval(() => {
+ remainingSeconds--;
+ updateHeading();
+
+ if (remainingSeconds <= 0) {
+ clearExistingTimer();
+ playAlarm();
+ triggerVisualAlarm();
+ }
+ }, 1000);
+}
+
+// Visual feedback helpers (add/remove a class on )
+function triggerVisualAlarm() {
+ try {
+ document.body.classList.add("alarm-active");
+ } catch (e) {
+ // ignore if DOM not available in test environment
+ }
+}
+
+function clearVisualAlarm() {
+ try {
+ document.body.classList.remove("alarm-active");
+ } catch (e) {
+ // ignore if DOM not available in test environment
+ }
+}
+
+// Ensure visual alarm is cleared when user stops the alarm or sets a new one.
+try {
+ window.addEventListener("load", () => {
+ const stopBtn = document.getElementById("stop");
+ if (stopBtn) stopBtn.addEventListener("click", clearVisualAlarm);
+
+ const setBtn = document.getElementById("set");
+ if (setBtn) setBtn.addEventListener("click", clearVisualAlarm);
+ });
+} catch (e) {}
// DO NOT EDIT BELOW HERE
var audio = new Audio("alarmsound.mp3");
diff --git a/Sprint-3/alarmclock/index.html b/Sprint-3/alarmclock/index.html
index 48e2e80d9..18a51fc66 100644
--- a/Sprint-3/alarmclock/index.html
+++ b/Sprint-3/alarmclock/index.html
@@ -1,10 +1,10 @@
-
+
- Title here
+ Alarm Clock App
diff --git a/Sprint-3/alarmclock/style.css b/Sprint-3/alarmclock/style.css
index 0c72de38b..04247a362 100644
--- a/Sprint-3/alarmclock/style.css
+++ b/Sprint-3/alarmclock/style.css
@@ -13,3 +13,21 @@
h1 {
text-align: center;
}
+
+/* Visual alarm state: make the background flash and tint red */
+.alarm-active {
+ animation: alarm-flash 1s linear infinite;
+ background-color: rgba(255, 0, 0, 0.12);
+}
+
+@keyframes alarm-flash {
+ 0% {
+ box-shadow: inset 0 0 0 rgba(255, 0, 0, 0);
+ }
+ 50% {
+ box-shadow: inset 0 0 2000px rgba(255, 0, 0, 0.08);
+ }
+ 100% {
+ box-shadow: inset 0 0 0 rgba(255, 0, 0, 0);
+ }
+}