Skip to content
Submitted about 2 years ago

Responsive Pomodoro Timer using React.js, Vite, CSS, Tailwind

react, typescript, vite, tailwind-css
LVL 2
@batyr-qhan
A solution to the Pomodoro app challenge

Solution retrospective


What are you most proud of, and what would you do differently next time?

I'm proud of accomplishing this pomodoro timer. The design looks great and I finally transferred it into the code.

What challenges did you encounter, and how did you overcome them?
  • one of the first things I was worrying about was the timer itself, I was thinking about how to control the time, how to start the timer, how to pause, etc. After some research I managed to find some solutions which seemed very relevant, so it helped my to come up with my version.
  • also quite much time I was stuck on the timer container and the progress bar. There are not really straightforward solutions in CSS on how to do the dynamic circle progress line. There is one way is using SVG, but in my version I used external package which actually uses the SVG method under the hood.

So yeah, these were one of the main challenges for me.

What specific areas of your project would you like help with?

I would love if anyone give the feedback. Maybe find some CSS issues and the timer functionality. Or would be great if you suggest some improvements.

I was thinking about adding the reset button and some other stuff on top of the current timer.

Code
Loading...

Please log in to post a comment

Log in

Community feedback

No feedback yet. Be the first to give feedback on Batyrkhan Zhaparov’s solution.

Join our Discord community

Join thousands of Frontend Mentor community members taking the challenges, sharing resources, helping each other, and chatting about all things front-end!

Join our Discord