London | 25-ITP-May | Houssam Lahlah | Sprint 3 | Alarm Clock

[HoussamLh]

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

Basic Functionality

1. User can set an alarm using the input field.
2. Countdown timer displays time remaining in mm:ss format.
3. Alarm sound plays when the timer reaches 00:00.

Advanced Features

1. Flashing Background: The background flashes red/white when the alarm is triggered.
2. Pause/Resume:
   2.1. Pause button stops the countdown and flashing.
   2.2. Resume button continues the countdown from the paused time.
3. Stop Alarm:
   3.1. Stop button stops the alarm sound.
   3.2. Background resets to white and flashing stops.
4. Clear Input field: is cleared after setting the alarm.

Code Organization & Refactoring

• Countdown logic is separated into reusable functions: startCountdown(), pauseCountdown(), resumeCountdown().
• Flashing behavior is handled in startFlashing() / stopFlashing() to keep the DO NOT EDIT section untouched.
• Pause/Resume/Stop event listeners are attached outside the DO NOT EDIT section using DOMContentLoaded, so the setup function is untouched.
• playAlarm() and pauseAlarm() in DO NOT EDIT section are untouched and continue to handle only audio.

Edge Cases & Fixes

• Prevents invalid input (non-numbers, zero, negative numbers).
• Stops flashing if the alarm is paused or stopped.
• Countdown stops automatically at 00:00 without going negative.

Questions

• I know that I can't edit under the comment ‘DO NOT EDIT BELOW HERE’, however, is it acceptable to add code for advanced features (pause/resume, flashing background, stop alarm) above it, even if some logic seems similar to the code below, to avoid uplicating functionality and still keep the code clean and well-organized?

[cjyuan]

Code looks good. I have nothing to add.