Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found

Submitted

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

P

@batyr-qhan

Desktop design screenshot for the Pomodoro app coding challenge

This is a solution for...

  • HTML
  • CSS
  • JS
4advanced
View challenge

Design comparison


SolutionDesign

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.

Community feedback

Please log in to post a comment

Log in with GitHub
Discord logo

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