London | 26-ITP-May | Eyob Zeray | Sprint 3 | alarmclock

[eyob-tech]

Learners, PR Template

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

Implemented setAlarm() in alarmclock.js so the app counts down from a
user-entered number of seconds, displays the remaining time in
#timeRemaining as MM:SS, and calls playAlarm() once it reaches zero.
Along the way, fixed a syntax error (missing backticks around template
literals) that was causing the whole script to fail to load and all 5 tests
to fail. All 5 tests in alarmclock.test.js now pass.

[Luro91]

The title of the webpage should say Alarm clock app. It says Title here at the moment

[Luro91]

Good job putting the code for formatting into an own function. This makes it reusable and easier to change the formatting if needed

[Luro91]

What happens if the number is 0 or negative?

[eyob-tech]

Good catch — I added a check right after reading the input to handle that. If the number's 0, negative, or not a real number at all, it just shows a message asking for a valid number and stops there instead of kicking off a countdown:

let secondsRemaining = Number(input.value);

if (!secondsRemaining || secondsRemaining <= 0) {
heading.innerText = "Please enter a number of seconds greater than 0";
return;
}

[Luro91]

What happens when a user clicks the set alarm button multiple times?

[eyob-tech]

Ah good catch — turns out clicking it multiple times was starting a new countdown each time without stopping the old one, so they’d all run at once and mess with the display. I fixed it by keeping track of the current interval outside the function, and clearing it out before starting a fresh one whenever setAlarm() runs again:
let currentIntervalId = null;

function setAlarm() {
// ...validation, then:

if (currentIntervalId !== null) {
clearInterval(currentIntervalId);
}

currentIntervalId = setInterval(() => {
secondsRemaining--;
updateDisplay();

if (secondsRemaining <= 0) {
  clearInterval(currentIntervalId);
  currentIntervalId = null;
  playAlarm();
}

}, 1000);
}