Cape Town| 26-ITP-May | Liyema Mfengwana| Sprint 3 | Alarm clock app - #1417
Cape Town| 26-ITP-May | Liyema Mfengwana| Sprint 3 | Alarm clock app#1417LiyemaMfengwana wants to merge 14 commits into
Conversation
| setTimeout(countdown, 1000); | ||
| } | ||
|
|
||
| countdown(); |
There was a problem hiding this comment.
Try in the browser: set the alarm to 30, then straight away change the input to 10 and click Set Alarm again.
What do you expect to happen? What actually happens?
Think about how many countdowns are running at that point, and what each one is doing to the heading. setTimeout returns something when you call it and that might be useful.
There was a problem hiding this comment.
Thanks for the feedback! I've made the requested changes:
Added validation for empty and non-positive input.
Added min="1" to prevent negative values through the number input.
Changed variables to const where they aren't reassigned.
Stored the setTimeout ID.
Prevented users from setting a new alarm while a countdown is already running by disabling the Set Alarm button.
Re-enabled the button once the countdown finishes.
| document.getElementById("timeRemaining").textContent = | ||
| `Time Remaining: ${formattedMinutes}:${formattedSeconds}`; | ||
|
|
||
| if (seconds === 0) { |
There was a problem hiding this comment.
2 cases to check
- Click Set Alarm with the input left empty. What does
Number("")give you? - The input is
type="number", so a user can type-5. Try it pls.
| let remainingSeconds = seconds % 60; | ||
|
|
||
| let formattedMinutes = String(minutes).padStart(2, "0"); | ||
| let formattedSeconds = String(remainingSeconds).padStart(2, "0"); |
There was a problem hiding this comment.
Use const instead of let. let only for something that changes
Self checklist
Changelist
Clock alarm app complete