Maximum Effort - A Pomodoro Timer
Rather than get lost in the rewrite of my budget app server, I decided to dive back into frontend work for a short project. The project I settled on was a pomodoro style timer.
Over a cup of coffee I sketched the basic UI, and determined that the tool would have the following features:
- The user can set work and break lengths
- The user can pause, resume, and reset the timer
- The timer would play an alert sound when a timer completed to notify the user
- The timers must be accurate
Step one was to start the UI. I settled on using vanilla everything. It’s a dead simple app, and using Vue or React would be a heinous amount of overkill. So, onwards. I created all the components, and styled them with Sass and a BEM naming convention.
The sound was actually the easiest thing to implement. I added a hidden
audio element to the page. From there playing a noise was as simple as invoking the
play() method of that element. I wrapped it in a function and added it to the final callbacks for the work and break timers.
What I learnt:
- Front load the work and create reusable, flexible classes. This was something that bit my first attempt at the timer class
- Not everything requires a framework.
- HTML has a quotes element,