Skip to content

Brussels | ITP-2026-1 | Benjamin | Sprint 3 | Alarmclock | Week 9 #123

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
nuttyproducer wants to merge 3 commits into
base: main
Choose a base branch
from
Open

Brussels | ITP-2026-1 | Benjamin | Sprint 3 | Alarmclock | Week 9 #123

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
4109c2c
feat: display timer in mm:ss format and initialize to 00:00
nuttyproducer Apr 20, 2026
1aaeac6
feat: add countdown alarm clock behavior and improve code clarity
nuttyproducer Apr 20, 2026
cee2a98
Refactor: Running alarmclock.test.js now runs clean without errors:
nuttyproducer Apr 20, 2026
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
50 changes: 49 additions & 1 deletion Sprint-3/alarmclock/alarmclock.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,4 +1,49 @@
function setAlarm() {}
let secondsLeft; // Stores how many seconds are left in the countdown.
let intervalId; // Stores the interval ID so the timer can be stopped later.

function setAlarm() {
// Stop and reset the alarm sound before starting a new timer.
audio.loop = false;
audio.pause();
audio.currentTime = 0; // Reset the audio back to the beginning.

// Stop any previous countdown before starting a new one.
clearInterval(intervalId);

// Reset the background color when a new alarm is set.
document.body.style.backgroundColor = "white";

// Read the input value, convert it to a number, and show it immediately.
// This gives instant feedback instead of waiting one second for the interval.
const seconds = document.getElementById("alarmSet").value;
secondsLeft = Number(seconds);
const mins = Math.floor(secondsLeft / 60);
const sec = secondsLeft % 60;
const timerDisplay = `${mins.toString().padStart(2, "0")}:${sec.toString().padStart(2, "0")}`;
document.getElementById("timeRemaining").textContent =
`Time Remaining: ${timerDisplay}`;
// Run the countdown every second.
// Each tick reduces the remaining time, updates the display,
// and stops the timer when the countdown reaches zero.
intervalId = setInterval(() => {
secondsLeft--;
const mins = Math.floor(secondsLeft / 60);
const sec = secondsLeft % 60;
const timerDisplay = `${mins.toString().padStart(2, "0")}:${sec.toString().padStart(2, "0")}`;
document.getElementById("timeRemaining").textContent =
`Time Remaining: ${timerDisplay}`;
if (secondsLeft <= 0) {
clearInterval(intervalId);
document.body.style.backgroundColor = "red";
playAlarm();
}
}, 1000);
}

// Expose functions globally so Jest tests can see them.
window.setAlarm = setAlarm;
window.playAlarm = playAlarm;
window.pauseAlarm = pauseAlarm;

// DO NOT EDIT BELOW HERE

Expand All @@ -15,10 +60,13 @@ function setup() {
}

function playAlarm() {
// Keep the alarm sound repeating until it is stopped.
audio.loop = true; // Repeat the sound continuously.
audio.play();
}

function pauseAlarm() {
audio.loop = false; // Stop the looping sound.
audio.pause();
}

Expand Down
20 changes: 20 additions & 0 deletions Sprint-3/alarmclock/alarmclockapp.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,20 @@
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link rel="stylesheet" href="style.css" />
<title>Benji's Alarm Clock Example</title>
</head>
<body>
<div class="centre">
<h1 id="timeRemaining">Time Remaining: 00:00</h1>
<label for="alarmSet">Set time to:</label>
<input id="alarmSet" type="number" />

<button id="set" type="button">Set Alarm</button>
<button id="stop" type="button">Stop Alarm</button>
</div>
<script src="alarmclock.js"></script>
</body>
</html>