From cf3676ff6e21cfddbb243b692643025331751af5 Mon Sep 17 00:00:00 2001 From: shreefAhmedM Date: Tue, 14 Oct 2025 14:04:42 +0100 Subject: [PATCH 1/4] implementing and built alarm clock app --- Sprint-3/alarmclock/alarmclock.js | 31 ++++++++++++++++++++++++++++++- Sprint-3/alarmclock/index.html | 2 +- 2 files changed, 31 insertions(+), 2 deletions(-) diff --git a/Sprint-3/alarmclock/alarmclock.js b/Sprint-3/alarmclock/alarmclock.js index 6ca81cd3b..589d93160 100644 --- a/Sprint-3/alarmclock/alarmclock.js +++ b/Sprint-3/alarmclock/alarmclock.js @@ -1,5 +1,34 @@ -function setAlarm() {} +let alarmTime; +let countDown; +function setAlarm() { + const timeRemaining = document.getElementById("timeRemaining"); + const alarmSet = document.getElementById("alarmSet").value; + alarmTime = parseInt(alarmSet); + if (countDown) { + clearInterval(countDown); + } + countDown = setInterval(startCount, 1000); + updateDisplay(timeRemaining); +} +function startCount() { + if (alarmTime > 0) { + alarmTime--; + updateDisplay(document.getElementById("timeRemaining")); + } else { + clearInterval(countDown); + playAlarm(); + document.body.style.background = "#e14343"; + } +} +function updateDisplay(timeRemainingElement) { + let minutes = Math.floor(alarmTime / 60); + let seconds = alarmTime % 60; + timeRemainingElement.innerHTML = `Time Remaining: ${String(minutes).padStart( + 2, + "0" + )}:${String(seconds).padStart(2, "0")}`; +} // 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..ff2d3b453 100644 --- a/Sprint-3/alarmclock/index.html +++ b/Sprint-3/alarmclock/index.html @@ -4,7 +4,7 @@ - Title here + Alarm clock app
From 8caafb9d304524f11d5d6b51cc4633a2c79e395d Mon Sep 17 00:00:00 2001 From: shreefAhmedM Date: Tue, 28 Oct 2025 17:23:52 +0000 Subject: [PATCH 2/4] refactorig and updating alarmClock app --- Sprint-3/alarmclock/alarmclock.js | 121 +++++++++++++++++++++--------- Sprint-3/alarmclock/index.html | 13 ++-- Sprint-3/alarmclock/style.css | 16 ++-- 3 files changed, 102 insertions(+), 48 deletions(-) diff --git a/Sprint-3/alarmclock/alarmclock.js b/Sprint-3/alarmclock/alarmclock.js index 589d93160..b782b14fd 100644 --- a/Sprint-3/alarmclock/alarmclock.js +++ b/Sprint-3/alarmclock/alarmclock.js @@ -1,54 +1,101 @@ -let alarmTime; -let countDown; -function setAlarm() { - const timeRemaining = document.getElementById("timeRemaining"); - const alarmSet = document.getElementById("alarmSet").value; - alarmTime = parseInt(alarmSet); - if (countDown) { - clearInterval(countDown); - } - countDown = setInterval(startCount, 1000); - updateDisplay(timeRemaining); +let timer; +let timeLeft = 0; +let paused = false; +const timeDisplay = document.getElementById("timeRemaining"); +const pauseBtn = document.getElementById("pauseAndResume"); +const setBtn = document.getElementById("set"); +const stopBtn = document.getElementById("stop"); +const inputField = document.getElementById("alarmSet"); +const audio = new Audio("alarmsound.mp3"); + +// update alarm +function updateDisplay() { + const mm = String(Math.floor(timeLeft / 60)).padStart(2, "0"); + const ss = String(timeLeft % 60).padStart(2, "0"); + timeDisplay.textContent = `Time Remaining: ${mm}:${ss}`; } -function startCount() { - if (alarmTime > 0) { - alarmTime--; - updateDisplay(document.getElementById("timeRemaining")); - } else { - clearInterval(countDown); - playAlarm(); - document.body.style.background = "#e14343"; - } + +// stop or start flashing +let flashingInterval; +const flashingColors = ["#FF4136", "#2ECC40", "#0074D9", "#FFDC00"]; +function startFlashingBackground() { + let colorIndex = 0; + flashingInterval = setInterval(() => { + document.body.style.backgroundColor = flashingColors[colorIndex]; + colorIndex = (colorIndex + 1) % flashingColors.length; + }, 200); +} +function stopFlashingBackground() { + clearInterval(flashingInterval); + document.body.style.backgroundColor = ""; } -function updateDisplay(timeRemainingElement) { - let minutes = Math.floor(alarmTime / 60); - let seconds = alarmTime % 60; - timeRemainingElement.innerHTML = `Time Remaining: ${String(minutes).padStart( - 2, - "0" - )}:${String(seconds).padStart(2, "0")}`; +// start countDown +function startCountdown() { + clearInterval(timer); + timer = setInterval(() => { + if (--timeLeft <= 0) { + clearInterval(timer); + startFlashingBackground(); + playAlarm(); + pauseBtn.style.display = "none"; + updateDisplay(); + } else { + updateDisplay(); + } + }, 1000); } -// DO NOT EDIT BELOW HERE -var audio = new Audio("alarmsound.mp3"); +// set up alarm +function setAlarm() { + const val = parseInt(inputField.value); + if (!val || val <= 0) return; -function setup() { - document.getElementById("set").addEventListener("click", () => { - setAlarm(); - }); + timeLeft = val; + updateDisplay(); + startCountdown(); - document.getElementById("stop").addEventListener("click", () => { - pauseAlarm(); - }); + setBtn.style.display = "none"; + pauseBtn.style.display = "inline"; + inputField.style.display = "none"; } function playAlarm() { + audio.currentTime = 0; audio.play(); } +// pause or resume alarm +function pauseResumeHandler() { + if (!paused) { + clearInterval(timer); + pauseBtn.textContent = "Resume"; + } else { + startCountdown(); + pauseBtn.textContent = "Pause"; + } + paused = !paused; +} -function pauseAlarm() { +// stop alarm +function stopAlarm() { + clearInterval(timer); audio.pause(); + audio.currentTime = 0; + stopFlashingBackground(); + timeLeft = 0; + updateDisplay(); + + setBtn.style.display = "inline"; + pauseBtn.style.display = "none"; + inputField.style.display = "inline"; + pauseBtn.textContent = "Pause"; + paused = false; +} + +function setup() { + setBtn.addEventListener("click", setAlarm); + pauseBtn.addEventListener("click", pauseResumeHandler); + stopBtn.addEventListener("click", stopAlarm); } window.onload = setup; diff --git a/Sprint-3/alarmclock/index.html b/Sprint-3/alarmclock/index.html index ff2d3b453..bf5e0b71b 100644 --- a/Sprint-3/alarmclock/index.html +++ b/Sprint-3/alarmclock/index.html @@ -8,12 +8,13 @@
-

Time Remaining: 00:00

- - - - - +

Time Remaining: 00:00

+
+ + + + +
diff --git a/Sprint-3/alarmclock/style.css b/Sprint-3/alarmclock/style.css index 0c72de38b..693fbdfd7 100644 --- a/Sprint-3/alarmclock/style.css +++ b/Sprint-3/alarmclock/style.css @@ -2,14 +2,20 @@ position: fixed; top: 50%; left: 50%; + margin: auto; -webkit-transform: translate(-50%, -50%); transform: translate(-50%, -50%); + text-align: center; + box-shadow: 0px 0px 2px 3px rgba(0, 0, 0, 0.08); + background: #fcfcfc; + padding: 30px; + width: 20%; } - -#alarmSet { - margin: 20px; -} - h1 { text-align: center; + font-size: 1.3rem; +} +input, +button { + font-size: 1.1rem; } From 47074293acb659e83a731d639afcefc17d61bd1e Mon Sep 17 00:00:00 2001 From: shreefAhmedM Date: Wed, 29 Oct 2025 17:53:42 +0000 Subject: [PATCH 3/4] refactoring and moving tow variable for global scope to local scope --- Sprint-3/alarmclock/alarmclock.js | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/Sprint-3/alarmclock/alarmclock.js b/Sprint-3/alarmclock/alarmclock.js index b782b14fd..583073d70 100644 --- a/Sprint-3/alarmclock/alarmclock.js +++ b/Sprint-3/alarmclock/alarmclock.js @@ -1,15 +1,14 @@ let timer; let timeLeft = 0; let paused = false; -const timeDisplay = document.getElementById("timeRemaining"); const pauseBtn = document.getElementById("pauseAndResume"); const setBtn = document.getElementById("set"); -const stopBtn = document.getElementById("stop"); const inputField = document.getElementById("alarmSet"); const audio = new Audio("alarmsound.mp3"); // update alarm function updateDisplay() { + const timeDisplay = document.getElementById("timeRemaining"); const mm = String(Math.floor(timeLeft / 60)).padStart(2, "0"); const ss = String(timeLeft % 60).padStart(2, "0"); timeDisplay.textContent = `Time Remaining: ${mm}:${ss}`; @@ -93,6 +92,7 @@ function stopAlarm() { } function setup() { + const stopBtn = document.getElementById("stop"); setBtn.addEventListener("click", setAlarm); pauseBtn.addEventListener("click", pauseResumeHandler); stopBtn.addEventListener("click", stopAlarm); From b4507112b88c9b392f96847668366a6773985cdf Mon Sep 17 00:00:00 2001 From: shreefAhmedM Date: Wed, 29 Oct 2025 18:00:41 +0000 Subject: [PATCH 4/4] error message for unfalid value --- Sprint-3/alarmclock/alarmclock.js | 5 ++++- 1 file changed, 4 insertions(+), 1 deletion(-) diff --git a/Sprint-3/alarmclock/alarmclock.js b/Sprint-3/alarmclock/alarmclock.js index 583073d70..f985e5319 100644 --- a/Sprint-3/alarmclock/alarmclock.js +++ b/Sprint-3/alarmclock/alarmclock.js @@ -48,7 +48,10 @@ function startCountdown() { // set up alarm function setAlarm() { const val = parseInt(inputField.value); - if (!val || val <= 0) return; + if (!val || val <= 0) { + alert("Please enter a valid number of seconds."); + return; + } timeLeft = val; updateDisplay();