This repo is for my Precourse Week 4 project.
The project was to build a “Pomodoro timer” - a productivity tool that helps you time alternating periods of working and resting. For more details, click here. Click here to see my solution.
Having encorporated similar functionality in my application website, I found the task a really useful exercise in reviewing my understanding of the setInterval method, as well as event listeners and updating html elements.
While sometimes needing to reference guidance to confirm exact syntax, my awareness of functionality and concepts is strengthening. My biggest challenge and learning was around CSS, and trying to refine my use to achieve the desired result. My biggest win on this project was effectively using rem, as well as vmin - unaware of vmin/vmax I had previously coupled vw/vh with media queries to distinguish between landscape/portrait settings.
- A “work” timer that counts down to zero (defaulting 25 minutes)
- A second “break” timer that counts down to zero (defaulting 5 minutes)
- Buttons to start a session, pause the timer, or cancel the session and restart
- Customisable lengths of time for work using slider (break auto calculated to 20% of work time)
- Play an alarm sound to make it obvious the time is up (whistle sounds on work start; horn on work finish)
- Changing text content and style, according to timer status
- Animated alarm icon
🚀