My Pomodoro Clock is done. Hope to have some reviews

The App:
The Code of App:

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 and they don’t pass the accessibility tests because there isn’t enough contrast between those two colors (more info on accessibility here

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.