Sheffield | 26-ITP-Jan | Mahmoud Shaabo | Sprint 3 | Alarm Clock App

[mahmoudshaabo1984]

Hello Reviewers / CodeYourFuture Team,

I have completed the Alarm Clock App project for Sprint 3.

Acceptance Criteria Met:

• Updated the title in index.html to "Alarm clock app".
• Implemented setAlarm() in alarmclock.js to read the input and display the time in mm:ss format.
• Used setInterval() to decrement the timer every 1 second.
• When the timer reaches 00:00, the interval is cleared, the background changes to red, and the alarm audio plays.
• The "Stop Alarm" button clears the interval, resets the background, and pauses the audio.
• All Jest tests are passing locally.

Thank you for your review!

[mahmoudshaabo1984]

Hi @cifarquhar,

Here is my Pull Request for the Alarm Clock App. I successfully implemented the timer logic using setInterval and clearInterval, and handled the math to format the remaining seconds into a standard mm:ss display. All Jest tests passed successfully.

Looking forward to your feedback!

[cjyuan]

• Can you make the "Stop" button to also stop the count down? You can add another "click" event listener to the button to avoid modifying the original code.

• When input is 1, the alarm is played one second later -- an expected behavior.
  However, when input is 0, the alarm is also played one second later (instead of being played immediately). Can you make the app's behaviour more consistent?

[cjyuan]

Instead of keeping several copies of the code for displaying time (lines 18-21, lines 44-47, lines 32-33),
it is better to define a function to update the time display and call the function to update the time display.

Advantages:

• Keep the logic for updating time display in one place
• Less code

[mahmoudshaabo1984]

Hi CJ,

Thank you for the excellent feedback! I have just pushed an update to address all your points:

1. Created a helper function to format and display the time, avoiding code duplication (DRY principle).
2. Made sure the "Stop" button also clears the countdown interval.
3. Updated the logic so if the input is 0, the alarm triggers immediately.
4. Added validation to reject empty inputs or negative numbers.
5. Ensured pauseAlarm() is called at the start of a new alarm to maintain a clean state.

All Jest tests are still passing successfully. Please let me know if everything looks good to go!

Best regards,
Mahmoud

[cjyuan]

Previous changes are good.

I just have two more suggestions for you to consider.

[cjyuan]

It is better to introduce a separate element to show feedback message, and leave "#timeRemaining" for only displaying time.

[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