Finished my Pomodoro Clock! Feedback/criticism highly desired :D

Hey guys! So I finished the Pomodoro Clock project (https://codepen.io/Bosa100/full/BRYLEy/). My main concern is the that the color filling up as time goes by feature might not work for all browsers. Since the -webkit-, -moz-, -ms-, etc., goes before the linear-gradient, as opposed to the background, I was unable to change the gradient for all the different browser versions through JQuery’s .css() function. It would just override the normal background, as opposed to changing the different background versions. If anyone knows how I might be able to fix this please let me know. Sorry if my explanation did not make sense.
Thank you so much! :smiley:

It looks good. Functionally it seems to work great.

I have a few UX issues.

  1. It’s not intuitive how to reset. My first thought wasn’t “click on the title”. I would have a button labeled reset. As one of my old bosses used to say, “Cliches may be cliches, but they’re cliches for a reason.” Any time the user has to read your mind or even guess, that is a failure in design.

  2. It’s good that you keep me from adjusting the times when the clock is running, but there is no indication of that. I would fade the colors of the time selectors when they are not changeable. That’s pretty standard. Or maybe completely fade the + and - to black. Just a thought.

But still, works great.

1 Like

Thanks for the feedback! Good point about the reset. I went ahead a put a reset button in. For some reason I was unable to style button elements, so I ended up using a div. I also did the whole fade to black when disabled thing you mentioned. :smiley: Please let me know what you think of the changes! I feel the reset button kind of kills the vibe, but maybe it’s just me.
Thanks you so much for the feedback!

  • and - buttons are not showing after clicking reset button. Here’s how I encountered the problem:
  1. click session
  2. click reset button
1 Like

Cool, good job. Hav fun with tic tac toe.

1 Like

Oops, sorry, Ryan is right. You need to fade the + and - back in after reset.

But that should be an easy fix. Good job.

(I know, I know, it seems like there’s always one … more … thing …)

Thanks for pointing this out to me! :smiley: Fixed the whole reset issue. Are you using Chrome? If so, which version? I honestly have no idea where those red lines came from. :scream: I was expecting some issues when using in other browsers, so I think that may be why.

No the red lines are from MS Paint. I used them to highlight the missing + and - buttons :grin:

Oh ok! I guess that explains all the white space as well. Scared me there for a sec. :sweat_smile:

Its all fixed now. Great work! :+1:

1 Like

Thanks so much man! :+1: