Pomodoro clock simple

hi guys this Pomodoro clock challenge https://codepen.io/webster123/full/gexaVB/
please checkout and give your suggestion:eyeglasses:
please try to reload the to check what happen:fireworks:

I think it’s good. I would try adding a pause button for completeness. :+1:

One suggestion I might make is that your text is ‘moving’ once the session begins in part because you are using fadeIn/Out which removes the element from the DOM with JQuery causing everything to re position.

A way to avoid this with JQuery is to instead transition to 0 the opacity proper of the blocks, which can also be combined with a CSS or JQuery animation. This will leave the block intact, so the content won’t move, but it will still give you the overall appearance you seem to be looking for.

Thanks I will try to add pause

1 Like

Thanks for your suggestion .I will tried to apply your suggestion

Not ‘needed’ but I think it will look much better. Also ‘interesting’ because you get a better understanding of how JQuery affects the DOM module in cases such as fadeOut.