Pomodoro
A timer using the Pomodoro technique for studying, with internalization to three languages and simple style settings.
Published onUpdated on
0.715
astro
playwright
tailwindcss
vitest
vue
Overview
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
Features
- Main Pomodoro Timer + Short Break timer + Long Break timer.
- Keyboard Navigation with Accessibility in mind.
- Fully Unit tested with 99% coverage using Vitest Browser Mode (Playwright Driver) and Testing Library, and coverage checked with Istanbul.
- Change styles between three colors of the application.
- Customize the length of each timer.
- Change the styles between three fontfaces.
- Change languages between English, Japanese and Vietnamese.
Keyboard Navigation
| Key | Action |
|---|---|
| 1, 2, 3 | Select clock type |
| P | Start/resume/pause the clock |
Screenshot
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.