From ae8ac1f95afee54d4431c6c8e536656547478363 Mon Sep 17 00:00:00 2001 From: Angela McLeary Date: Mon, 23 Mar 2026 23:30:55 +0000 Subject: [PATCH 1/3] update html title --- Sprint-3/alarmclock/index.html | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) 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 8cd966d2c69694f71300df0dc4deec436340b648 Mon Sep 17 00:00:00 2001 From: Angela McLeary Date: Tue, 24 Mar 2026 19:26:25 +0000 Subject: [PATCH 2/3] Implement alarmclock.js --- Sprint-3/alarmclock/alarmclock.js | 33 ++++++++++++++++++++++++++++++- 1 file changed, 32 insertions(+), 1 deletion(-) diff --git a/Sprint-3/alarmclock/alarmclock.js b/Sprint-3/alarmclock/alarmclock.js index 6ca81cd3b..99bb70799 100644 --- a/Sprint-3/alarmclock/alarmclock.js +++ b/Sprint-3/alarmclock/alarmclock.js @@ -1,4 +1,35 @@ -function setAlarm() {} +let alarmInterval; + +function setAlarm() { + clearInterval(alarmInterval); + let timeRemaining = document.getElementById("alarmSet"); + const display = document.getElementById("timeRemaining"); + //what ever we input is turned into seconds + let totalSeconds = parseInt(timeRemaining.value); + + if (isNaN(totalSeconds) || totalSeconds <= 0) return; + + const formattedTime = (seconds) => { + const mins = Math.floor(seconds / 60) + .toString() + .padStart(2, "0"); + const secs = (seconds % 60).toString().padStart(2, "0"); + return `${mins}:${secs}`; + }; + + display.innerHTML = `Time Remaining: ${formattedTime(totalSeconds)}`; + + alarmInterval = setInterval(() => { + totalSeconds--; + + display.innerHTML = `Time Remaining: ${formattedTime(totalSeconds)}`; + + if (totalSeconds <= 0) { + clearInterval(alarmInterval); + playAlarm(); + } + }, 1000); +} // DO NOT EDIT BELOW HERE From 473b4a487fa610b4f15b7e8f7c577c060214d036 Mon Sep 17 00:00:00 2001 From: Angela McLeary Date: Thu, 26 Mar 2026 00:42:03 +0000 Subject: [PATCH 3/3] update css --- Sprint-3/alarmclock/style.css | 87 ++++++++++++++++++++++++++++++++++- 1 file changed, 86 insertions(+), 1 deletion(-) diff --git a/Sprint-3/alarmclock/style.css b/Sprint-3/alarmclock/style.css index 0c72de38b..d604b5a5f 100644 --- a/Sprint-3/alarmclock/style.css +++ b/Sprint-3/alarmclock/style.css @@ -1,4 +1,89 @@ +* { + box-sizing: border-box; + margin: 0; + padding: 0; + font-family: "Roboto", "Segoe UI", sans-serif; +} + +body { + background: linear-gradient(#d49562, #9e897c); + color: #797d8131; + height: 100vh; + display: flex; + justify-content: center; + align-items: center; +} + +/* Centered card*/ .centre { + background-color: #a16093; + padding: 40px 60px; + border-radius: 10px; + text-align: center; + box-shadow: 0 10px 25px rgba(0, 0, 0, 0.1); + min-width: 300px; +} + +/* Time display */ +h1 { + font-size: 2.5rem; + margin-bottom: 30px; + font-weight: 600; + color: #f1bcaf; + letter-spacing: 1px; +} + +/* Input time*/ +#alarmSet { + padding: 4px 15px 6px 15px; + font-size: 1.3rem; + border-radius: 4px; + border: 2px solid #cbc1bc; + outline: none; + margin-bottom: 20px; + margin-right: 10px; + width: 100px; + text-align: center; + background-color: #e8dfdb; + color: #121212; +} + +/* Buttons */ +button { + padding: 12px 25px; + margin: 10px; + font-size: 1rem; + border-radius: 5px; + border: none; + cursor: pointer; + font-weight: 600; + transition: all 0.3s ease-in-out; +} + +/* Set Alarm */ +#set { + background-color: #2b2c2d; + color: #fff; +} + +#set:hover { + background-color: #2b2c2d7b; + transform: translateY(-2px); +} + +/* Stop Alarm */ +#stop { + background-color: #2b2c2d; + color: #fff; +} + +#stop:hover { + background-color: brown; + transform: translateY(-1px); +} + +/* keep old styling in case you need to revert back */ +/* .centre { position: fixed; top: 50%; left: 50%; @@ -12,4 +97,4 @@ h1 { text-align: center; -} +} */