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?
Design Comparison
SolutionDesign
Report
0Accessibility
issues0HTML
issues
Community Feedback
- 1
- 1
@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.
- 0
@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!
- 1
Hey @ringm, awesome job! I like that I can see the timer on the browser tab. I'm viewing this on a smaller laptop and I'm not able to scroll down and see the entire length of of the project. Seems the class
.h-screen {height: 100vh}is doing it. I'd also very much like to study your code and learn from it but the repo is not giving me anything lol.- 1
- 1
Nice work Martin! I'm still working on my solution. Started out as a pure js solution like yours, but now I've learned enough React to reimplement it as a React app.
What was part did you find the most difficult? I stalled out at the circular progress bar. I think I'll be using this library to implement it.
- 1
@astroud thank you! I'm planning to do a React course now, and then take new challenges to put it to practice.
The progress bar was certainly challenging, I used animejs as an animation library and was great, gave me lot of control when it came down to animating it. I made transition animations between clocks and also when u reset the counter.
I'm looking forward on seeing your solution!
- 0
@ringm Martin, I finally wrapped up my version.
I'm interested in any and all feedback. I'm planning to refactor the project after a learn more about testing and state management with Redux. I also have a CSS issue or two to track down.
P
P
PGive some feedback to ringm about their solution
Join our Slack community
Join over 45,000 people taking the challenges, talking about their code, helping each other, and chatting about all things front-end!