Skip to content

Glasgow| 2026-ITP-Jan | Tuan Nguyen| Sprint 3 | Alarm clock #1209

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
Jacknguyen4438 wants to merge 7 commits into
base: main
Choose a base branch
from
+59 −2
Open

Glasgow| 2026-ITP-Jan | Tuan Nguyen| Sprint 3 | Alarm clock #1209

Show file tree
Hide file tree
Changes from 6 commits
Commits
Show all changes
7 commits
Select commit Hold shift + click to select a range
d77934a
Changing the title to begin the course
Jacknguyen4438 Apr 19, 2026
c5122f9
build the function and ready for PR
Jacknguyen4438 Apr 21, 2026
832f671
Ming change for pull request
Jacknguyen4438 Apr 21, 2026
005369b
Making minor change so that the function can work with decimal number.
Jacknguyen4438 Apr 22, 2026
0f8a136
Making small validation change that show on HTML
Jacknguyen4438 Apr 23, 2026
a04f01c
formatting for the code for better for checking bugs
Jacknguyen4438 Apr 23, 2026
0bae369
Make some change on how to the error display without interfere with t…
Jacknguyen4438 Apr 23, 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
57 changes: 56 additions & 1 deletion Sprint-3/alarmclock/alarmclock.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,5 +1,60 @@
function setAlarm() {}
let countdown = null;

function resetAlarm() {
clearInterval(countdown);
countdown = null;
pauseAlarm();
updateHeading(0);
}

function showError(message) {
const heading = document.getElementById("timeRemaining");
heading.innerText = message;
Copy link
Copy Markdown
Contributor

@cjyuan cjyuan Apr 23, 2026

Choose a reason for hiding this comment

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

Would be better to introducing a separate element to showing message.

Copy link
Copy Markdown
Author

@Jacknguyen4438 Jacknguyen4438 Apr 23, 2026

Choose a reason for hiding this comment

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

@cjyuan thank you for you reply I have making change that now will display the error without interfering with the heading element in HTML page. Here is my solution:

function showError(message) {
const heading = document.getElementById("errorMessage");
heading.innerText = message;
}

function setAlarm() {
const input = document.getElementById("alarmSet");
let time = Number(input.value);

resetAlarm();

if (isNaN(time) || time < 0 || !Number.isInteger(time)) {
showError("Please enter a whole number of seconds.");
return;
}

document.getElementById("errorMessage").innerText = "";

for better checking I have make an commit with full code so you can check for better view of the whole code. Thank you.

}

function setAlarm() {
const input = document.getElementById("alarmSet");
let time = Number(input.value);
Copy link
Copy Markdown
Contributor

@cjyuan cjyuan Apr 21, 2026

Choose a reason for hiding this comment

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

What type and range of number should time be? Invalid user input could cause the app to behave abnormally.

Copy link
Copy Markdown
Author

@Jacknguyen4438 Jacknguyen4438 Apr 21, 2026

Choose a reason for hiding this comment

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

Thank you for the feed back I have add validation cod to help with this here is my validation code below:

if (isNaN(time) || time < 0) {
updateHeading(0);
return;
}

Copy link
Copy Markdown
Contributor

@cjyuan cjyuan Apr 22, 2026 •
edited
Loading

Choose a reason for hiding this comment

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

What do you expect the app to behave when the user enters 3.14 as input?

Copy link
Copy Markdown
Author

@Jacknguyen4438 Jacknguyen4438 Apr 22, 2026

Choose a reason for hiding this comment

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

Thank you for the feed back here is my explain when decimal is pass down:

If the user enters 3.14, Number() converts it to a floating‑point number.
The countdown will decrease by 1 each second (3.14 → 2.14 → 1.14 → 0.14 → alarm), but the display will show whole seconds because of the formatting.

const minutes = Math.floor(time / 60);
const seconds = time % 60;

This behaviour is technically valid but not intuitive for users, since countdown timers usually expect whole seconds.

A more predictable behaviour would be to either:

reject decimal input as invalid, or

convert it to an integer using Math.floor() or Math.round().

This would make the app’s behaviour clearer and more consistent.

Thank you for the reading and I will some change base on this explanation to make sure the function work properly.

Copy link
Copy Markdown
Member

@illicitonion illicitonion Apr 23, 2026

Choose a reason for hiding this comment

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

In general if you're just ignoring user input (as you do if someone puts in a float), it's good to show an error message telling them what's wrong, rather than just ignore it.

Also, if you already had an alarm counting down, then submitted 1.2, it will set to 00:00 but then shortly after start counting down again.

Can you fix up both of these things?

Copy link
Copy Markdown
Author

@Jacknguyen4438 Jacknguyen4438 Apr 23, 2026

Choose a reason for hiding this comment

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

Hello @illicitonion thank you for your feed back I have understand what your like to ask me to do so here is my validation code that will show on the HTML page:

if (isNaN(time) || time < 0 || !Number.isInteger(time)) {
showError("Please enter a whole number of seconds.");
return;
}


resetAlarm();

if (isNaN(time) || time < 0 || !Number.isInteger(time)) {
showError("Please enter a whole number of seconds.");
return;
}

if (time === 0) {
updateHeading(0);
playAlarm();
return;
}

updateHeading(time);

countdown = setInterval(() => {
time--;

if (time <= 0) {
updateHeading(0);
clearInterval(countdown);
playAlarm();
} else {
updateHeading(time);
}
}, 1000);
}

function updateHeading(time) {
const heading = document.getElementById("timeRemaining");

const minutes = Math.floor(time / 60);
const seconds = time % 60;

const mm = String(minutes).padStart(2, "0");
const ss = String(seconds).padStart(2, "0");

heading.innerText = `Time Remaining: ${mm}:${ss}`;
}
// DO NOT EDIT BELOW HERE

var audio = new Audio("alarmsound.mp3");
Expand Down
2 changes: 1 addition & 1 deletion Sprint-3/alarmclock/index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -4,7 +4,7 @@
<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