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 1 commit into
base: main
Choose a base branch
from
+7,900 −3
Open

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

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
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.

}
// 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.

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