Looking to hire developers?
<button id="closeSettings" class="mr-4 mb-2 sm:mb-6 focus:outline-none">
<svg width="14" he...</button>@astroud
Posted
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
@ringm
Posted
@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!
1
@astroud
Posted
@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.
0
@emestabillo
Posted
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
@ringm
Posted
@emestabillo sorry about the repo problem! I just updated it :D
Thanks for the feedback! Let me know what you think about the code.
1
@mattstuddert
Posted
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?
1
@ringm
Posted
@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:
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.
1
@mattstuddert
Posted
@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!
0
Join over 160,000 people taking the challenges, talking about their code, helping each other, and chatting about all things front-end!
