Feedback on my Pomodoro Clock

Code Feedback
1

Here’s the link - https://codepen.io/jfar/full/zWwzzo/

Its very simple and minimal design wise. Would be happy to get some feedback in order to improve my skills. Also, audio is not working as Codepen doesn’t allow me to add external files.

Thanks

2

I know it’s not required but I would suggest a section describing the purpose of the Pomodoro Clock and maybe instructions on how to use it.

3

Good Idea. I agree; that it would be very confusing for a first time user to navigate or understand how it works. I’ll add a section explaining it. Thanks.

4

Looks nice, and it seems to work well too. Congrats!

If you really want it to be accurate, read this post about timers in Javascript: https://www.sitepoint.com/creating-accurate-timers-in-javascript/

Basically, instead of setInterval to run the timer, you can run run a function on an interval more frequently to check the system time and use that to determine how much time remains rather than decrementing the remaining time with the setInterval callback.

I’d also work on the UX a bit. I had to discover how to start the timer by clicking on it. That’s not too bad, but you could improve it by overlaying a play icon on the timer while the time isn’t running. That would be a clear indicator that clicking on it would start the timer. It would also be nice to overlay a pause icon on the timer when the user hovers over it to clearly indicate clicking on the running timer will pause the timer.

Great work!

5

Thank you for the detailed feedback. All great suggestions. I am going to work on them now and will update it soon hopefully.

1 Like