#42Countdown

Overview

Build a countdown timer that tests your React fundamentals by handling state, side effects, and precise time-based updates under real-world conditions.

Requirements

• Render the Countdown component inside App.
• The countdown must start from INIT_COUNT (in seconds) when the app loads.
• The remaining time must update every second and be displayed in mm:ss format.
• Clicking the Pause / Play button must pause and resume the countdown without resetting it.
• When the countdown reaches 0, it must stop completely and never go into negative values.
• When the countdown finishes, the title must change from "Countdown" to "Finished".

Notes

• Think about which props the <Countdown /> component should receive to allow pausing, reacting when it finishes, and starting from a specific value.
• Some tests may pass initially due to the initial render state.
• You may use the timeToString function located in utils.ts to format the remaining time.
• Be careful not to create unnecessary intervals.
• Remember to clean up side effects when the component updates or unmounts.

Tests

1. renders the countdown componente
2. display the initial count
3. display the correct time after 1 second
4. pauses the countdown when the pause button is clicked
5. changes the title to 'Finished' when the countdown reaches 0
6. stops at 0 and does not go into negative values