Back

Pomodoro Clock

An implementation of a clock for Pomodoro technique, where you work hard for 25 minutes and take a break for 5 minutes. A challenge by Frontend Mentor.

vueastrotailwindcssvitestplaywright

Links

Overview

The challenge

Users should be able to:

  • Set a pomodoro timer and short & long break timers
  • Customize how long each timer runs for
  • See a circular progress bar that updates every minute and represents how far through their timer they are
  • Customize the appearance of the app with the ability to set preferences for colors and fonts

Keyboard Navigation

KeyAction
1, 2, 3Select clock type
PStart/resume/pause the clock

Screenshot

Home Mobile

Home mobile

Settings Mobile

Settings mobile

Home Tablet

Home tablet

Settings Tablet

Settings tablet

Home desktop

Home desktop

Settings desktop

Settings desktop

My process

Built with

What I learned

I learned how to work with the circular progress bar using stroke-dasharray and <svg> element. That’s kinda weird, but okay to work with for an animatable.