Skip to content

NW | ITP-May-25 | Geraldine Edwards | Module-Data-Groups | Sprint-3 | Alarm Clock App #585

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

NW | ITP-May-25 | Geraldine Edwards | Module-Data-Groups | Sprint-3 | Alarm Clock App #585

Show file tree
Hide file tree
Changes from 1 commit
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
f4a929f
add title in index.html and add code to setAlarm function for alarmcl…
Gerbil1511 Jul 11, 2025
8dcc421
refactor code by adding helper function
Gerbil1511 Jul 13, 2025
7e96759
refactor code to add a helper function to format the input values wit…
Gerbil1511 Jul 15, 2025
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
71 changes: 70 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,73 @@
function setAlarm() {}
// initialize the countdown variable to null so that it can be used to store the interval ID for the countdown (the unique ID for when we use setInterval() to start a countdown later in the code)
let countdown = null;

function setAlarm() {
// stop a countdown if one has already started
if (countdown) {
// uses the unique ID stored in the countdown variable to stop the countdown
clearInterval(countdown);
// clear the variable so that it can be reused
countdown = null;
}
// set the background colour of the page to white
document.body.style.backgroundColor = "white";

// access the value from the input field a
const input = document.querySelector("#alarmSet");

// parse the value from the input field as an integer to prevent errors when the user enters a string or a decimal number
const timeInSeconds = parseInt(input.value, 10);

// check for invalid inputs and update the <h1> element with an error message if the input is invalid
if (!Number.isInteger(timeInSeconds) || timeInSeconds < 0) {
alert("Please enter a valid number of seconds!");
return; // stop the code if the input is invalid
Copy link

Choose a reason for hiding this comment

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

if (typeof timeInSeconds !== "number" || timeInSeconds < 0) {
throw new Error("Invalid input: timeInSeconds must be a non-negative number");
} you could promote will a more specific alert message.

Copy link
Author

Choose a reason for hiding this comment

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

I completely understand where you are coming from there. I suppose when I was writing the invalid input validation I was thinking along the lines of the UX for the user - I considered the system error approach but I believe it would crash the app. I have adjusted the message, however; it is now alert("Please enter a whole number of seconds (like 60 for 1 minute)")
I am curious to know which would be the better approach though in a real-world project- send an alert to the user or throw a system error?
Thank you :)

}
// if the input is valid and the time is zero, update the <h1> element with "Time Remaining: 00:00", play the alarm sound, and set the background to red
if (timeInSeconds === 0) {
playAlarm();
document.body.style.backgroundColor = "red";
return;
}

// format the input into minutes and seconds MM:SS
const minutes = Math.floor(timeInSeconds / 60)
.toString()
.padStart(2, "0");
const seconds = (timeInSeconds % 60).toString().padStart(2, "0");
const display = `Time Remaining: ${minutes}:${seconds}`;

// when the user clicks the set alarm button the countdown display in <h1> should update to show the value of the input in MM:SS format.
document.querySelector("#timeRemaining").innerText = display;

// set a new variable to hold the time in seconds value from th input.
// create a countdown function using setInterval() that takes a callback function and a time in milliseconds (1000ms = 1 second)
// the callback function checks that if there is any value in teh input greater than 0, if there is then decrease that value by 1 every second
// if the value reaches zero (which is the "else" condition) then stop the countdown using clearInterval() and play the alarm sound.
let time = timeInSeconds;
countdown = setInterval(() => {
if (time > 0) {
time -= 1; // decrease the time by 1 every second
const minutes = Math.floor(time / 60)
.toString()
.padStart(2, "0"); // calculate the minutes and format it to 2 digits
const seconds = (time % 60).toString().padStart(2, "0"); // calculate the seconds and format it to 2 digits
Copy link

Choose a reason for hiding this comment

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

In general, the code looks good. here is something you could improve. const minutes = Math.floor(timeInSeconds / 60)
.toString()
.padStart(2, "0"); this has been used multiple time, so considering use a helper function to abstract this.

Copy link
Author

Choose a reason for hiding this comment

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

oh yes of course, I was so busy being focused on getting the pull request completed I totally forgot to refactor the code :( - I have made the changes now and it is much better, thank you!

const display = `Time Remaining: ${minutes}:${seconds}`; // format the display in MM:SS
document.getElementById("timeRemaining").innerText = display; // update the <h1> element with the new display
} else {
// if the time is zero stop the countdown
clearInterval(countdown);
countdown = null;
// play the alarm sound
playAlarm();
// update the <h1> element with "Time Remaining: 00:00"
document.getElementById("timeRemaining").innerText =
"Time Remaining: 00:00";
// set the background colour of the page to red
document.body.style.backgroundColor = "red";
}
}, 1000);
}

// DO NOT EDIT BELOW HERE

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