From ba1d60ca85c6dfa599b44a3548adc2a514e57ccd Mon Sep 17 00:00:00 2001 From: Liban Jama Date: Mon, 23 Mar 2026 11:03:50 +0000 Subject: [PATCH 1/4] Completed alarm clock task --- Sprint-3/alarmclock/alarmclock.js | 29 ++++++++++++++++++++++++++--- Sprint-3/alarmclock/index.html | 4 ++-- 2 files changed, 28 insertions(+), 5 deletions(-) diff --git a/Sprint-3/alarmclock/alarmclock.js b/Sprint-3/alarmclock/alarmclock.js index 6ca81cd3b..d4ccb34ce 100644 --- a/Sprint-3/alarmclock/alarmclock.js +++ b/Sprint-3/alarmclock/alarmclock.js @@ -1,8 +1,30 @@ -function setAlarm() {} +var audio = new Audio("alarmsound.mp3"); -// DO NOT EDIT BELOW HERE +let countdown; -var audio = new Audio("alarmsound.mp3"); +function formatTime(seconds) { + let mins = Math.floor(seconds / 60); + let secs = seconds % 60; + return String(mins).padStart(2, "0") + ":" + String(secs).padStart(2, "0"); +} + +function setAlarm() { + let seconds = parseInt(document.getElementById("alarmSet").value); + clearInterval(countdown); + document.getElementById("timeRemaining").textContent = + "Time Remaining: " + formatTime(seconds); + + countdown = setInterval(() => { + seconds--; + document.getElementById("timeRemaining").textContent = + "Time Remaining: " + formatTime(seconds); + + if (seconds <= 0) { + clearInterval(countdown); + playAlarm(); + } + }, 1000); +} function setup() { document.getElementById("set").addEventListener("click", () => { @@ -19,6 +41,7 @@ function playAlarm() { } function pauseAlarm() { + clearInterval(countdown); audio.pause(); } diff --git a/Sprint-3/alarmclock/index.html b/Sprint-3/alarmclock/index.html index 48e2e80d9..66748001e 100644 --- a/Sprint-3/alarmclock/index.html +++ b/Sprint-3/alarmclock/index.html @@ -1,10 +1,10 @@ - + - Title here + Alarm clock app
From 16e648ef16e1b2cf9660251608a53e0a9862e157 Mon Sep 17 00:00:00 2001 From: Liban Jama Date: Tue, 24 Mar 2026 16:48:44 +0000 Subject: [PATCH 2/4] Completed extra tasks and added styling --- Sprint-3/alarmclock/alarmclock.js | 2 + Sprint-3/alarmclock/index.html | 2 + Sprint-3/alarmclock/style.css | 109 +++++++++++++++++++++++++++--- 3 files changed, 105 insertions(+), 8 deletions(-) diff --git a/Sprint-3/alarmclock/alarmclock.js b/Sprint-3/alarmclock/alarmclock.js index d4ccb34ce..dd3be80bd 100644 --- a/Sprint-3/alarmclock/alarmclock.js +++ b/Sprint-3/alarmclock/alarmclock.js @@ -21,6 +21,7 @@ function setAlarm() { if (seconds <= 0) { clearInterval(countdown); + document.body.classList.add("alarm-finished") playAlarm(); } }, 1000); @@ -43,6 +44,7 @@ function playAlarm() { function pauseAlarm() { clearInterval(countdown); audio.pause(); + document.body.classList.remove("alarm-finished") } window.onload = setup; diff --git a/Sprint-3/alarmclock/index.html b/Sprint-3/alarmclock/index.html index 66748001e..048377059 100644 --- a/Sprint-3/alarmclock/index.html +++ b/Sprint-3/alarmclock/index.html @@ -12,9 +12,11 @@

Time Remaining: 00:00

+
+
diff --git a/Sprint-3/alarmclock/style.css b/Sprint-3/alarmclock/style.css index 0c72de38b..ef263a6e9 100644 --- a/Sprint-3/alarmclock/style.css +++ b/Sprint-3/alarmclock/style.css @@ -1,15 +1,108 @@ +* { + box-sizing: border-box; +} + +body { + margin: 0; + font-family: Arial, sans-serif; + min-height: 100vh; + display: flex; + justify-content: center; + align-items: center; + background: linear-gradient(90deg, #fcff9e 0%, #c67700 100%); + transition: background 0.4s ease; +} + +.alarm-finished { + background: linear-gradient(90deg, #FC466B 0%, #3F5EFB 100%); + animation: flashBg 0.6s infinite alternate; +} +@keyframes flashBg { + 0% { + background: linear-gradient(90deg, #FC466B 0%, #3F5EFB 100%); + } + 100% { + background: linear-gradient(90deg, #fcff9e 0%, #c67700 100%); + } +} + .centre { - position: fixed; - top: 50%; - left: 50%; - -webkit-transform: translate(-50%, -50%); - transform: translate(-50%, -50%); + width: 360px; + padding: 26px; + background: #ffffff; + border-radius: 20px; + box-shadow: 0 10px 25px rgba(0, 0, 0, 0.2); + text-align: center; +} + +label { + display: block; + margin-bottom: 10px; + font-size: 15px; + color: #555; +} + +#timeRemaining { + margin: 0 0 22px; + font-size: 30px; + font-weight: bold; + color: #333; +} + +label { + display: block; + margin-bottom: 10px; + font-size: 15px; + color: #555; } #alarmSet { - margin: 20px; + width: 100%; + padding: 12px; + font-size: 16px; + border: 2px solid #ddd; + border-radius: 12px; + outline: none; + margin-bottom: 18px; + transition: 0.2s; } -h1 { - text-align: center; +#alarmSet:focus { + border-color: #667eea; + box-shadow: 0 0 6px rgba(102, 126, 234, 0.4); +} + +.button-group { + display: flex; + gap: 12px; +} + +button { + flex: 1; + padding: 12px; + font-size: 15px; + border: none; + border-radius: 12px; + cursor: pointer; + color: white; + font-weight: bold; + transition: transform 0.15s ease, box-shadow 0.15s ease; +} + +#set { + background: #4CAF50; +} + +#set:hover { + background: #43a047; + transform: translateY(-2px); +} + +#stop { + background: #f44336; +} + +#stop:hover { + background: #e53935; + transform: translateY(-2px); } From 22008f863250f93398503aff148ae1bf34e6df6b Mon Sep 17 00:00:00 2001 From: Liban Jama Date: Sat, 4 Apr 2026 17:08:59 +0100 Subject: [PATCH 3/4] fixed linting issue --- Sprint-3/alarmclock/index.html | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/Sprint-3/alarmclock/index.html b/Sprint-3/alarmclock/index.html index 048377059..92b352229 100644 --- a/Sprint-3/alarmclock/index.html +++ b/Sprint-3/alarmclock/index.html @@ -13,9 +13,9 @@

Time Remaining: 00:00

- - -
+ + + From fc50e531337303c8f40a5cea65f05e4984b293ee Mon Sep 17 00:00:00 2001 From: Liban Jama Date: Sat, 4 Apr 2026 17:32:31 +0100 Subject: [PATCH 4/4] Added error handling --- Sprint-3/alarmclock/alarmclock.js | 7 +++++-- 1 file changed, 5 insertions(+), 2 deletions(-) diff --git a/Sprint-3/alarmclock/alarmclock.js b/Sprint-3/alarmclock/alarmclock.js index dd3be80bd..5298e7617 100644 --- a/Sprint-3/alarmclock/alarmclock.js +++ b/Sprint-3/alarmclock/alarmclock.js @@ -10,6 +10,9 @@ function formatTime(seconds) { function setAlarm() { let seconds = parseInt(document.getElementById("alarmSet").value); + if (!Number.isFinite(seconds) || seconds < 1) { + throw new Error("Please enter a valid number greater than 0"); + } clearInterval(countdown); document.getElementById("timeRemaining").textContent = "Time Remaining: " + formatTime(seconds); @@ -21,7 +24,7 @@ function setAlarm() { if (seconds <= 0) { clearInterval(countdown); - document.body.classList.add("alarm-finished") + document.body.classList.add("alarm-finished"); playAlarm(); } }, 1000); @@ -44,7 +47,7 @@ function playAlarm() { function pauseAlarm() { clearInterval(countdown); audio.pause(); - document.body.classList.remove("alarm-finished") + document.body.classList.remove("alarm-finished"); } window.onload = setup;