Let's discuss your "Pomodoro Clock"

Here is my link, how does it look https://codepen.io/uvieugo/full/XgwxaP/

just got done with mine here: https://codepen.io/Dee73/full/JJVGbZ/

After realizing how hard it was to draw a simple semi-circle using just html/css, I decided to learn about and then use the canvas element to build the clock using only Javascript. The canvas gives you a much greater flexibility in what you can draw but the drawback is that every single interaction has to be made from scratch with JS, as none of the clickable / html elements are available for access. Another great learning experience overall.

1 Like

Thatā€™s why I preferred inline SVG. Itā€™s like a happy middle ground between Canvas and HTML. You can get quite complex too, but I think Iā€™d switch to Canvas at that point. :wink:

Really well done on the timer element. Looks good.

Thanks DaveC. I did read an article that SVG was indeed the middle ground, but I am yet to read up on how to use it, perhaps for the next project I will attempt to do just that and use it. I am now trying to make this project ā€˜mobile friendlyā€™ as I mistakenly used fixed coordinates to draw it on the canvas and hence it is unable to scale down.

Hey guys, Iā€™m just beginning to learn thingsā€¦
here is my pomodoro, please leave your suggestions and feedbacks. Iā€™ll greatly appreciate!

1 Like

Clever design. I like it. Very cool ā€œTronā€ aesthetic.

Iā€™d recommend that the stop button not immediately clear the counterā€”or possibly include a ā€œpauseā€ buttonā€”in case I need to pause it and continue the countdown later. :wink:

1 Like

Project Link - https://codepen.io/Francois-Leblanc/full/YxzBYL/

Simple yet fun progress bar design. Cool project ! Comments welcomed :slight_smile:

@DaveC, thanks man! that really helped!!! I have revised it now.

Project Link - https://codepen.io/huan555/full/eEOGEv/

Any feedback is greatly appreciated!!

Hey folks!

Hereā€™s my modest contribution: https://codepen.io/ToHeckmann/full/BZdvGv/

Any positive feedback is welcome, any helpful criticism even moreā€¦

1 Like

Project Link - [REDACTED]

1 Like

I just finished my Pomodoro Clock. I struggle with SVG animations but got it to work nicely. Appreciate the feedback

Project Link - https://codepen.io/tiagovalverde/full/xLVpZL/

project-link

I made a simplistic version of a Pomodoro Clock, using basically plain text. The background and text color change between the stand by, work and break phases. For the progress bar I used the css ā€˜linear-gradientā€™ property to fill it, playing with te percentage with the help of a counter and the total seconds that the timer has. Any feedback is appreciated: https://codepen.io/ricardoblancodias/full/xLdZre/

My modern, simple and customizable version !

Project Link - https://codepen.io/CRAKERSS/full/qXNqmL/

1 Like

Wow! Fantastic. Design looks lovely and works like a charm. Great job.

1 Like

Project Link - https://codepen.io/Arun4033622/full/jLaPdZ/ Feedback Please!

Thank you very much !
Your own clock look great too ! but it could be a little bit better if you avoid scroll on your page =D
Anyway ā€œmaterial designā€ is a good choice !

1 Like

Thank you @CRAKERSS :smiley:! Fixed it.

This is my second attempt to get it right, made it very simple. Please provide your comments or feedback. Thank you
Pomodoro Clock