diff --git a/Sprint-3/alarmclock/alarmclock.js b/Sprint-3/alarmclock/alarmclock.js index 6ca81cd3b..c68b7389b 100644 --- a/Sprint-3/alarmclock/alarmclock.js +++ b/Sprint-3/alarmclock/alarmclock.js @@ -1,19 +1,74 @@ -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 updateDisplay() { + document.getElementById("alarmSet").value = formatTime(totalSeconds); + document.getElementById("timeRemaining").textContent = `Time Remaining: ${formatTime(totalSeconds)}`; +} + +function incrementTime(amount) { + totalSeconds += amount; + if (totalSeconds < 0) totalSeconds = 0; + updateDisplay(); +} + +function setAlarm() { + const input = document.getElementById("alarmSet"); + const parsed = parseInputTime(input.value); + if (parsed === null) { + alert("Use MM:SS format"); + return; + } -function setup() { - document.getElementById("set").addEventListener("click", () => { - setAlarm(); - }); + totalSeconds = parsed; + updateDisplay(); - document.getElementById("stop").addEventListener("click", () => { - pauseAlarm(); - }); + if (timer) clearInterval(timer); + + timer = setInterval(() => { + totalSeconds--; + updateDisplay(); + if (totalSeconds <= 0) { + clearInterval(timer); + timer = null; + playAlarm(); + } + }, 1000); +} + +function stopTimer() { + if (timer) { + clearInterval(timer); + timer = null; + } + totalSeconds = 0; + updateDisplay(); + pauseAlarm(); } +// attach to window so HTML buttons can call them +window.incrementTime = incrementTime; +window.setAlarm = setAlarm; +window.stopTimer = stopTimer; +window.playAlarm = playAlarm; +window.pauseAlarm = pauseAlarm; + +// DO NOT EDIT BELOW HERE +var audio = new Audio("alarmsound.mp3"); + function playAlarm() { audio.play(); } @@ -22,4 +77,5 @@ function pauseAlarm() { audio.pause(); } -window.onload = setup; + + diff --git a/Sprint-3/alarmclock/index.html b/Sprint-3/alarmclock/index.html index 48e2e80d9..83e20730c 100644 --- a/Sprint-3/alarmclock/index.html +++ b/Sprint-3/alarmclock/index.html @@ -3,18 +3,94 @@ - - 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..0292a7fcc 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; +} +