diff --git a/Sprint-3/alarmclock/alarmclock.js b/Sprint-3/alarmclock/alarmclock.js index 6ca81cd3b..ece3df001 100644 --- a/Sprint-3/alarmclock/alarmclock.js +++ b/Sprint-3/alarmclock/alarmclock.js @@ -1,19 +1,93 @@ -function setAlarm() {} +let timer = null; +let totalSeconds = 0; -// DO NOT EDIT BELOW HERE +function formatTime(seconds) { + const mins = Math.floor(seconds / 60); + const secs = seconds % 60; + return `${String(mins).padStart(2, "0")}:${String(secs).padStart(2, "0")}`; +} -var audio = new Audio("alarmsound.mp3"); +function parseInputTime(value) { + if (!/^\d{2}:\d{2}$/.test(value)) return null; + const [m, s] = value.split(":").map(Number); + if (s > 59) return null; + return m * 60 + s; +} -function setup() { - document.getElementById("set").addEventListener("click", () => { - setAlarm(); - }); +function updateDisplay() { + const heading = document.getElementById("timeRemaining"); + const input = document.getElementById("alarmSet"); + + const formatted = formatTime(totalSeconds); + + input.value = formatted; + heading.innerHTML = `Time Remaining:

${formatted}`; +} - document.getElementById("stop").addEventListener("click", () => { - pauseAlarm(); - }); +function incrementTime(amount) { + totalSeconds += amount; + if (totalSeconds < 0) totalSeconds = 0; + updateDisplay(); } +function resetAlarmState() { + if (timer) clearInterval(timer); + timer = null; + + audio.pause(); + audio.currentTime = 0; +} + +function setAlarm() { + resetAlarmState(); + const input = document.getElementById("alarmSet"); + const parsed = parseInputTime(input.value); + + if (parsed === null) { + alert("Use MM:SS format"); + return; + } + + totalSeconds = parsed; + updateDisplay(); + + if (totalSeconds === 0) { + playAlarm(); + return; + } //Alarm plays immediately if time is set to 00:00 + + timer = setInterval(() => { + totalSeconds -= 1; + if (totalSeconds <= 0) { + totalSeconds = 0; + updateDisplay(); + clearInterval(timer); + timer = null; + playAlarm(); + return; + } + updateDisplay(); + }, 1000); +} + +function stopTimer() { + if (timer) clearInterval(timer); + timer = null; + totalSeconds = 0; + updateDisplay(); + audio.pause(); +} + +document.getElementById("up").addEventListener("click", () => incrementTime(5)); +document + .getElementById("down") + .addEventListener("click", () => incrementTime(-5)); +document.getElementById("set").addEventListener("click", setAlarm); +document.getElementById("stop").addEventListener("click", stopTimer); + +// DO NOT EDIT BELOW HERE +var audio = new Audio("alarmsound.mp3"); + function playAlarm() { audio.play(); } @@ -21,5 +95,3 @@ function playAlarm() { function pauseAlarm() { audio.pause(); } - -window.onload = setup; diff --git a/Sprint-3/alarmclock/index.html b/Sprint-3/alarmclock/index.html index 48e2e80d9..b0f7068a1 100644 --- a/Sprint-3/alarmclock/index.html +++ b/Sprint-3/alarmclock/index.html @@ -4,17 +4,35 @@ - Title here + Alarm Clock App -
-

Time Remaining: 00:00

- - +
+ - - + + +
+ + +
+ + + +

+ Time Remaining:
00:00 +

+ +
+ diff --git a/Sprint-3/alarmclock/style.css b/Sprint-3/alarmclock/style.css index 0c72de38b..24fe71289 100644 --- a/Sprint-3/alarmclock/style.css +++ b/Sprint-3/alarmclock/style.css @@ -1,15 +1,63 @@ -.centre { - position: fixed; - top: 50%; - left: 50%; - -webkit-transform: translate(-50%, -50%); - transform: translate(-50%, -50%); +.container { + font-family: "Franklin Gothic Medium", "Arial Narrow", Arial, sans-serif; + display: flex; + flex-direction: column; + align-items: center; + justify-content: center; + height: 100vh; + gap: 15px; } -#alarmSet { - margin: 20px; +.time-label { + font-size: 44px; + font-weight: bold; } -h1 { +.time-input { + font-size: 64px; text-align: center; + width: 200px; + padding: 15px; + border-radius: 10px; + border: 3px solid #0904b0; } + +.increment-buttons { + display: flex; + gap: 10px; +} + +.increment-buttons button { + font-size: 20px; + padding: 10px 15px; + border-radius: 6px; + border: 2px solid #444; +} + +.set-button { + font-size: 30px; + padding: 10px 20px; + border-radius: 8px; + border: 3px solid green; +} + +.time-remaining { + font-size: 36px; + font-weight: 900; + text-align: center; +} + +.stop-button { + font-size: 40px; + padding: 15px 30px; + border-radius: 10px; + border: 4px solid red; +} + +.stop-large-button { + font-size: 40px; + padding: 15px 30px; + border-radius: 10px; + border: 4px solid red; +} +