This is a solution to the Pomodoro app challenge on Frontend Mentor. Frontend Mentor challenges help you improve your coding skills by building realistic projects.
A pomodoro app. Times for pomodoros and breaks as well as the color and font themes can be customized in the settings. A coloured arc around the timer shrinks while the time is counted down. At 0:00 a tibetan bell rings.
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
- Solution URL: GitHub repository
- Live Site URL: pomodoro-su.netlify.app
- Semantic HTML5 markup
- SCSS
- Flexbox
- CSS Grid
- JavaScript
- labels as customized (hidden) radio buttons
- implementing SVGs as icont in the markup to minimize HTTP requests
- manipulating SVGs by JavaScript to animate the timer arc (see resources)
- increasing accessability by making elements tabbable
- using design files (figma) as template
- SVGs - (German) This page helped me to see how SVGs are built up and can be used.
- How SVG arcs can be calculated and alterated - A great thread on stackoverflow on displaying and manipulating SVG circles via JavaScript.
Stephan Ullmann
- Frontend Mentor - @StephanUllmann