London | 26-ITP-Jan | Miriam Jorna | Sprint 3 | Alarmclock

[miriamjorna]

Self checklist

• I have titled my PR with Region | Cohort | FirstName LastName | Sprint | Assignment Title
• My changes meet the requirements of the task
• I have tested my changes
• My changes follow the style guide

Changelist

Made a working alarm clock.
The page changes colour when the alarm goes off.
I've made a colour reset provision for when the alarm is paused (=what the user perceives as turning it off).
Noticed input could be negative; have made sure only positive integers can now be used to set the time.

[cjyuan]

Currently, when starting a new countdown, the application does not always return to a clean initial state, which can lead to inconsistent behavior between runs.

Consider introducing a dedicated reset function to return the app to a clean initial state, and call this function before starting a new countdown to help ensure consistency.

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

[cjyuan]

Indentation is off.

Have you installed the prettier VSCode extension and enabled "Format on save/paste" on VSCode,
as recommended in
https://github.com/CodeYourFuture/Module-Structuring-and-Testing-Data/blob/main/readme.md
?

---

If you have enabled "Format on save" but it is not working, it is likely that you haven't assign a formatter for JS file. This could happen if you have zero or multiple extensions that can format .js file.

If you have installed "Prettier" extension. To assign it as the formatter of JS code, you can try:

1. Use "Format document" to format the JS file. Sometimes, VSCode will ask you to choose a formatter, and you can manually select "Prettier".
2. Edit settings.json and set Prettier as the default formatter for JS.

See: https://marketplace.visualstudio.com/items?itemName=esbenp.prettier-vscode

[miriamjorna]

Oh, my apologies, I inserted that and did not prettify it after doing so. Tbh I would normally have done that by hand quickly. Just forgot.

[cjyuan]

Some invalid input can make the app behave abnormally.

Note: Why requiring min to be 0 here but set the "min" attribute in HTML to 1?

[cjyuan]

To respect the // DO NOT EDIT BELOW HERE marker, we could reset the background in a separate callback as:

window.addEventListener("load", function() {
  document.getElementById("stop").addEventListener("click", () => {
    // code to reset background
    ...
  });
});

[cjyuan]

To better separate presentation logic from application logic, you can consider defining a CSS class, and use classList.toggle() to apply/remove the style. For example,

document.body.classList.toggle("alarm-activated", true);  // apply style
document.body.classList.toggle("alarm-activated", false); // remove style

[miriamjorna]

Ah - this would then also remove the need to do the above recommendation on resetting the background colour, did I see that correctly? (the bit that is currently not respecting the // DO NOT EDIT BELOW HERE marker)

[cjyuan]

You can still change background color, just specify a default background color for the body element in style.css, and then define a class, says .alarm-activated with a different background color.

By adding and removing the class from body, you can then switch between two background colors.

Note: What you want to do (besides stopping the alarm) when the user clicks the "Stop" button is up to you.