Love this solution, Martin! It looks amazing, and it's nice to see you adding some extra features as well. Good job manipulating SVG elements for the circular progress bar!
Did you learn anything new while working through this project?
@mattstuddert definetly! For starters, it was my first time working with a animation library (I used animejs). Was really helpful specially for animating the svg circular line.
Also had to research which was the best approach for changing the font a color in several places at the same time. Turns out the best practice was using css variables and update them with JS.
It was also a great UX excercise. Going through the project I had to make decisions such as:
- Should the clock stop when you open the menu?
- What happens if you want to reset the clock without realoading the page?
- It would be nice to keep track of the amount of time you've been working, without taking into account the breaks... maybe add a little clock for that?
It was interesting to develop the code with this questions in mind. I felt I could follow the guidelines of the project and then put some ideas of my own, which makes the end result more personal.
@ringm that's awesome! Those are some great questions that you were asking as you worked through the project. There's definitely a lot of scope for personalisation. It's those extra touches and details that really make the difference!
Using CSS variables for changing the theme was definitely a good approach to take. They make it so much simpler!