My Pomodoro Clock is done. Hope to have some reviews

The App: https://zuqsw.csb.app/
The Code of App: https://codesandbox.io/s/gracious-gagarin-zuqsw?fontsize=14

INFO: i made it faster for test purpose.

Hello everybody, I am very happy that I could accomplish this project. It was not easy. Just want to have your Opinion and may be if you like you can help me out with some questions.

  • Is it always so hard to manage SVG icons (like I did) in React, or there is an easier way??

  • Also, for managing control buttons (minutes up and down) I attached event handler on the parent element and then I was looking for a certain className. Is it OK like this or there is a simpler way to do that performance? (Look at the image or source code of TimerComponent)

If you have some ideas How I can do it better, you are wellcome.

Hi @MichaelRo, at the moment I don’t have enough experience to answer your questions, but I checked the website and there are 2 things I noticed.

I found it a bit hard to read the words, I plugged in the background and foreground colors in http://www.checkmycolours.com/ and they don’t pass the accessibility tests because there isn’t enough contrast between those two colors (more info on accessibility here https://www.w3.org/WAI/tips/designing/).

The other thing that I’ve noticed is that by pressing again the play button, the timer restarts from the beginning. I think that it would be better if that button gets disabled while the timer is running and if it gets enabled while the timer is paused.
I haven’t done the challange yet and I don’t know if it is required that the play button are separated. In case it isn’t those buttons could be merged in a single one, that transforms its appearance and onClick function according to the state running/not rounning of the timer.

It looks nice but the timing might be off. It doubles in speed every time play is pressed.

I didn’t investigate the code much, but adding a condition in the startCountDown method prevented it from speeding up.

or maybe add a ternery to the button to decide. It might even make sense to have one button be a pause and play button so the two never mix.