Let's discuss your "Pomodoro Clock"

thanks you do have a point. I m sorry I have my modal turned off in this version. I have a help window that is supposed to open when you enter the site but i turned it off on codepen. but still i think im going to make the slider look more obviously a slider.

here is version on gitpages with modal

help modal version

the fact that i need a help menu…

1 Like

nice. i see your tomato has different approach. i used progress element. looks like you did some trickery as well. i didn’t dig too deep but you used a background layer and had height increasing with setInterval. I like the green man nice touch.

Here’s my attempt at the Pomodoro Clock.

Hi, here is my clock pen https://codepen.io/snsan/full/bRdJwJ
Please check it and I would appreciate any kind of feedback. Thanks

Project Link - https://codepen.io/arry14/full/bRpEGL/

Hello all, please see my first draft of the Pomodoro App. I decided to concentrate on the logic of the timer, and to stick with the design of the example. The logic is not DRY yet :sweat_smile: , it definitely needs some refactoring.

I’m planning to style it more, and to refactor the code when I revisit this soon.

A very funny and challenging project.
This is my pomodoro clock: http://www.luigibenvenuti.com/work/pomodoro-clock/pomodoro-clock.html
And this is the coode: https://github.com/lbluigi/pomodoro-clock

For this one, I wanted to practice with Sass. I didn’t use any framework or library, it’s all plain JavaScript.
Also, I tried HTML5 range sliders to set the timer. Something different by ‘+’ and ‘-’ buttons.

Hope you like, feedback appreciated (especially if you find any bug!)

Nice design. Works fine except the sliders. They are a little odd, don’t work well. When slided to the left or right edge the value doesn’t change. Also if you slide and release the mouse button outside the slider the value doesn’t change.

1 Like

Project Link - https://codepen.io/mapacarta/pen/yXJdbM

Thinking about working more on design part later :smiley:

1 Like

Thanks for the feedback. I saw your project and I like ti very much.
I know about the bug, but I really don’t know why it happens. I used an HTML element input type range, while I see you used another tecnique. The problem could be related to the input element?

1 Like

Project Link - https://codepen.io/blinvarfi/full/awpeNq/

I used canvas element for the slider.

I don’t know much about html input type range but the problem is probably because of the click event. You should also add a mouseup event. The mouseup event will also call updateWorkSession function. Here is a fiddle about mouseup, I found from stackoverflow: http://jsfiddle.net/ZFefV/

1 Like

Thank you very much!
I’m going to fix it as soon as I can.

Hi. Here is my Pomodoro Clock. https://codepen.io/Ddorab/full/BRgvYm/
It is a very simplistic one, but it fulfills the user stories. Any feedback is appreciated.

Here’s mine - https://codepen.io/AzFalconer/full/owqWYj/

Added a binary clock/counter for something different. Just an FYI for other’s testing, set the interval to 250, instead of 1000. Runs faster so you can check how everything works. Not happy with my color pallet, I have the hardest time picking color combos…

Would appreciate help with why the audio chime doesn’t fire before the alert box…

And mine. https://codepen.io/cloudsociety/full/JJrbaZ/

Had some fun with the SVG circle. Really enjoying VueJs for a lot of these projects.

@AzFalconer: For color, I’m a huge fan of snagging a color palette using the Palettab extension for Chrome.

Thanks I will check out Paettab.
Nice slick interface you came up with.

Okay, this is my one :tomato:
Project Link - https://codepen.io/kambala3000/full/VWqrxR
Fonts may not work :crab:

Here is the link to my Pomodoro Clock. Wanted to challenge myself by building the Flip Clock animation myself and it definitely was that.

1 Like

Love it! The work you put into the “flip” was worth it.

Project link : https://codepen.io/Bodzh/full/MowaJd/