Skip to content

Cape Town | 2026-ITP-Jan | Isaac Abodunrin | Sprint 3 | Grouping data: Alarm Clock #1182

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
bytesandroses wants to merge 18 commits into
base: main
Choose a base branch
from
Open

Cape Town | 2026-ITP-Jan | Isaac Abodunrin | Sprint 3 | Grouping data: Alarm Clock #1182

Show file tree
Hide file tree
Changes from 14 commits
Commits
Show all changes
18 commits
Select commit Hold shift + click to select a range
104bc75
Rename app title
bytesandroses Mar 29, 2026
bc9db0d
Implement set Alarm
bytesandroses Apr 5, 2026
2e9abac
Refactor: remove duplicate setAlarm button event listener
bytesandroses Apr 5, 2026
15cd7d0
Refactor: remove duplicate stopAlarm button event listener
bytesandroses Apr 5, 2026
01299b1
Refactor: separate time display into a function
bytesandroses Apr 6, 2026
13a05e6
Refactor: improve readability
bytesandroses Apr 6, 2026
7a55810
Feat: allow alarm to countdown
bytesandroses Apr 6, 2026
d0daf34
Refactor: move timer countdown into separate function
bytesandroses Apr 6, 2026
47e2f22
Refactor alarm countdown
bytesandroses Apr 6, 2026
5fcb0b1
Fix: add 0 in front of minutes when single digit
bytesandroses Apr 6, 2026
98a0a64
Fix: prevent multiple setInterval timers running at the same time
bytesandroses Apr 6, 2026
dfa1f57
Fix: update timer value immediately after button is clicked
bytesandroses Apr 6, 2026
cb65771
Fix: ensure timer stops at 00:00 and doesn't go below
bytesandroses Apr 6, 2026
eeb1c24
Refactor: improve readability of formatTime() function
bytesandroses Apr 6, 2026
f165cf5
Validate and sanitize user's time input
bytesandroses Apr 10, 2026
e903b09
Fix: ensure previous timer is reset before starting a new one
bytesandroses Apr 11, 2026
76e9b57
Fix: remove 1 second delay to ensure alarm sounds at exact 00:00
bytesandroses Apr 11, 2026
5386aff
Fix: ensure alarm plays immediately if user enters a time of 0 second…
bytesandroses Apr 11, 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
40 changes: 38 additions & 2 deletions Sprint-3/alarmclock/alarmclock.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,6 +1,42 @@
function setAlarm() {}
let timeRemaining;
let timerInterval;

// DO NOT EDIT BELOW HERE
function formatTime(time) {
const minutes = String(Math.floor(time / 60)).padStart(2, "0");
const seconds = String(time % 60).padStart(2, "0");

return `${minutes}:${seconds}`;
}

function displayAlarm(time) {
const alarmBox = document.getElementById("timeRemaining");
alarmBox.textContent = `Time Remaining: ${formatTime(time)}`;
}

function decreaseAlarmTime() {
if (timeRemaining <= 0) {
clearInterval(timerInterval);
timerInterval = null;
timeRemaining = 0;
playAlarm();
return;
}

timeRemaining--;
displayAlarm(timeRemaining);
}
Comment on lines +16 to +26
Copy link
Copy Markdown
Contributor

@cjyuan cjyuan Apr 9, 2026

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

When the countdown reaches 00:00, there is a one second delay before the alarm sound is played. Is this by design?

At line 25, when timeRemaining changes from 1 to 0, the app only changes the display to 00:00. It's only in the next interval, the code on lines 17-22 is executed.

Copy link
Copy Markdown
Member Author

@bytesandroses bytesandroses Apr 11, 2026

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

No this definitely a bug -- it wasn't by design.

I've applied a fix by changing the order of execution: timeRemaining is first decremented so that the alarm sound can be played at exactly 00:00 without needing to start a new loop.


function setAlarm() {
const setTime = document.getElementById("alarmSet").value;
timeRemaining = parseInt(setTime, 10);
Copy link
Copy Markdown
Contributor

@cjyuan cjyuan Apr 9, 2026

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Using user input without proper validation and sanitisation can be dangeours.

Currently, some unusual input values can make your app behave abnormally. Can you add code to sanitise them?

Copy link
Copy Markdown
Member Author

@bytesandroses bytesandroses Apr 11, 2026

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

You're absolutely right -- the timer behaves oddly if certain inputs are automatically allowed without sanitizing. If a user enters a negative number, a negative timer is displayed which can't be counted down. And if a number isn't entered, it simply displays NaNs.

To fix this, I've added two validation checks:

  1. Ensure the input is a number
  2. Ensure the number is positive


if (timerInterval) {
clearInterval(timerInterval);
}
Copy link
Copy Markdown
Contributor

@cjyuan cjyuan Apr 9, 2026 •
edited
Loading

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

The countdown interval is not the only state to be reset.

Hint: a user may not click the "Stop" button first before starting a new count down.

You can also consider introducing a dedicated reset function to return the app to a clean initial state to help ensure consistency.

Copy link
Copy Markdown
Member Author

@bytesandroses bytesandroses Apr 11, 2026

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I see what you mean. The clearInterval(timerInterval) only stops the timer counting down -- it doesn't remove it. So it creates a situation where multiple timers can run at the same time.

I've taken your suggestion and handled it in s single reset() function.

Copy link
Copy Markdown
Contributor

@cjyuan cjyuan Apr 11, 2026

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I meant to point out "alarm not reset", which you have handled now in the reset() function.

In JS, calling clearInterval(timerInterval) is enough to remove the active interval.
Performing timerInterval = null; is optional but a good practice.


displayAlarm(timeRemaining);
timerInterval = setInterval(decreaseAlarmTime, 1000);
}

var audio = new Audio("alarmsound.mp3");

Expand Down
4 changes: 2 additions & 2 deletions Sprint-3/alarmclock/index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,10 +1,10 @@
<!DOCTYPE html>
<!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>Title here</title>
<title>Alarm clock app</title>
</head>
<body>
<div class="centre">
Expand Down
Loading