diff --git a/Sprint-3/alarmclock/index.html b/Sprint-3/alarmclock/Alarm clock app.html
similarity index 81%
rename from Sprint-3/alarmclock/index.html
rename to Sprint-3/alarmclock/Alarm clock app.html
index 48e2e80d9..46a954bc4 100644
--- a/Sprint-3/alarmclock/index.html
+++ b/Sprint-3/alarmclock/Alarm clock app.html
@@ -4,7 +4,7 @@
- Title here
+ Alarm Clock App
@@ -14,6 +14,8 @@
Time Remaining: 00:00
+
+
diff --git a/Sprint-3/alarmclock/alarmclock.js b/Sprint-3/alarmclock/alarmclock.js
index 6ca81cd3b..e917ac2c3 100644
--- a/Sprint-3/alarmclock/alarmclock.js
+++ b/Sprint-3/alarmclock/alarmclock.js
@@ -1,4 +1,96 @@
-function setAlarm() {}
+// Refactor the Alarm Clock code with advanced features
+
+let timerId = null;
+let remainingSeconds = 0;
+let alarmFlashing = false;
+
+// Update the display
+function updateDisplay() {
+ let minutes = String(Math.floor(remainingSeconds / 60)).padStart(2, "0");
+ let seconds = String(remainingSeconds % 60).padStart(2, "0");
+ document.getElementById(
+ "timeRemaining"
+ ).textContent = `Time Remaining: ${minutes}:${seconds}`;
+}
+
+// Start flashing background
+function startFlashing() {
+ if (!alarmFlashing) {
+ document.body.classList.add("flash");
+ alarmFlashing = true;
+ }
+}
+
+// Stop flashing background
+function stopFlashing() {
+ if (alarmFlashing) {
+ document.body.classList.remove("flash");
+ document.body.style.backgroundColor = "white";
+ alarmFlashing = false;
+ }
+}
+
+// Shared countdown logic
+function startCountdown() {
+ timerId = setInterval(() => {
+ remainingSeconds -= 1;
+ // Update the display each second
+ updateDisplay();
+
+ if (remainingSeconds <= 0) {
+ // Time's up
+ remainingSeconds = 0;
+ clearInterval(timerId);
+ timerId = null;
+ playAlarm(); // plays sound only
+ startFlashing(); // flash background
+ }
+ }, 1000);
+}
+
+// Set a new alarm
+function setAlarm() {
+ const input = document.getElementById("alarmSet");
+ const time = parseInt(input.value, 10);
+
+ if (isNaN(time) || time <= 0) return;
+
+ clearInterval(timerId);
+ timerId = null;
+ remainingSeconds = time;
+ input.value = "";
+
+ stopFlashing(); // reset background if previous alarm was active
+ updateDisplay();
+ startCountdown();
+}
+
+// Pause countdown
+function pauseCountdown() {
+ if (timerId !== null) {
+ clearInterval(timerId);
+ timerId = null;
+ }
+ stopFlashing(); // stop flashing if paused
+}
+
+// Resume countdown
+function resumeCountdown() {
+ if (timerId === null && remainingSeconds > 0) {
+ startCountdown();
+ }
+}
+
+// --- Event listeners for Pause and Resume moved outside DO NOT EDIT ---
+window.addEventListener("DOMContentLoaded", () => {
+ const pauseBtn = document.getElementById("pause");
+ const resumeBtn = document.getElementById("resume");
+ const stopBtn = document.getElementById("stop");
+
+ if (pauseBtn) pauseBtn.addEventListener("click", pauseCountdown);
+ if (resumeBtn) resumeBtn.addEventListener("click", resumeCountdown);
+ if (stopBtn) stopBtn.addEventListener("click", stopFlashing); // reset background
+});
// DO NOT EDIT BELOW HERE
@@ -12,14 +104,17 @@ function setup() {
document.getElementById("stop").addEventListener("click", () => {
pauseAlarm();
});
+
}
function playAlarm() {
audio.play();
+
}
function pauseAlarm() {
audio.pause();
+
}
window.onload = setup;
diff --git a/Sprint-3/alarmclock/style.css b/Sprint-3/alarmclock/style.css
index 0c72de38b..747f2e854 100644
--- a/Sprint-3/alarmclock/style.css
+++ b/Sprint-3/alarmclock/style.css
@@ -13,3 +13,17 @@
h1 {
text-align: center;
}
+/* Add the advanced task that make the screen flashing */
+.flash {
+ animation: flash-bg 1s infinite alternate;
+}
+
+@keyframes flash-bg {
+ from {
+ background-color: white;
+ }
+
+ to {
+ background-color: red;
+ }
+}