Let's discuss your "Pomodoro Clock"

Jesse989 · June 21, 2016, 12:12am

Project Link - http://codepen.io/Jesse989/full/ezdBvX/

Still working out one or two minor things but for the most part it is completely functional!
I set the timers to start at 1min and 30sec so you can see the jars fill up faster. Once the jar fills up it pops up on the side!

irenenaya · June 22, 2016, 5:20am

Here’s mine:

[http://codepen.io/IreneNaya/full/EyNgWo/] http://codepen.io/IreneNaya/full/EyNgWo/

Decided to go for a different layout and to have a bit of fun with images and sounds. Any comments, criticism and bugs found, please leave a comment. Thanks!

irenenaya · June 22, 2016, 5:48am

It’s a bit… red!!

Now, seriously, I do think it’s a bit too red, to the point that it’s hard on the eyes after a while.
I did love some things, like the possibility of muting sounds and adding your own sounds.
I can’t run it, though. I may have ran it one or two days ago, not sure. The fact that the notification area on the top left is greyed out on me, tells me that maybe i did open it before. I had a popup asking me if I allowed or blocked the app from receiving notifications, and I blocked. It should still work, imo. Also, I find it a bit annoying that it remembers the settings from the last time I opened it. My guess is that you are using cookies or some form of storage, which I’m not too fond of in this kind of setting

Velenir · June 22, 2016, 8:20am

Thank you for your feedback, Irenenaya.

Yes, my pomodoro saves user settings in localStorage, but not Notification.permission. That one browser remembers on its own for each specific domain. The popup to allow it can only be run if you haven’t previously selected allow or deny (you could dismiss it too), so a site can only request permission as long as you haven’t given a definitive answer.
To reset it you would need to do so in the browser: in Chrome click on the badge at the left edge of the address bar (it displays an empty page or a lock depending on http(s) protocol), in Firefox Ctrl+I --> Permissions, then reload the page. As you can see, after you’ve made your choice, it’s out of my hands.

Also, seems we have a different tolerance for red:) I should probably choose a lighter color.

Velenir · June 22, 2016, 8:22am

I quite like your image transitions.

There is strange behavior I noticed – when you press stop and then start while countdown is in progress the timer adds an extra minute. Is this supposed to be punishment for pausing during an ongoing session? Bug or feature?
Was there a reason for limiting break length to 15 minutes? Pomodoro technique suggests 3, 5, 15 and 30 minutes for breaks, but of course it’s ultimately up to you.

Good job overall.

blackmorrow · June 24, 2016, 9:56am

Project Link - http://codepen.io/tychoCRD/full/OXWNGj/

Overall I’m pleased, but I was surprised with how much js this app required. I built two modules, one for the “engine” of the clock, and one for UI interaction. I ran into some headaches that required a less wholly-modular approach than I desired… I had to but the setInterval id var outside of both modules…various ways I tried to accomplish it inside properties didn’t work for me. I also tried to put everything in an immediately-invoked function, but I sometimes had issues where I needed to refer to a separate module’s property with full name, where I couldn’t use “this” and $(this) because they would point to the same thing… Sorry, I’m sure that’s confusing. Anyhow, wondering if my approach is sensible and succinct overall. Little patience for CSS these days, so my UI remains simple.

gperl27 · June 24, 2016, 3:11pm

Project Link - http://codepen.io/perlhax27/full/OXbBeO/

luishendrix92 · June 24, 2016, 9:15pm

Project Link - http://codepen.io/luishendrix92/pen/XXMREw

It was easy at first until I started to see the logic behind the break times and when I decided I wanted to animate the juice inside the soft drink container, haha, working with SVG math requires a lot of focus and logic; the logic behind the juice filling up isn’t that hard but I struggled since it was my first time working with SVG.

I used a modular javascript approach, one for the clock logic, another one for the audiovisuals. I also had to patch a styling mistake with the soft-drink using JS resize events. Design-wise, I’m surprised it looks that way, thanks to Skeleton (CSS Mini-Framework) and that amazing gradient and backgrounds I found. I spent most of the design time making it responsive. Also the first time I used Sass and ES6.

dogwaddle · June 25, 2016, 2:38am

Editor View
Full View

Me spending too much scattered time struggling through making it on the Free Code Camp Twitch Channel.

Plan on going back and refactoring it even more after taking the time out to spend more time learning modular javascript.

jenovs · June 26, 2016, 8:40am

Pomodoro Clock

I went for a minimal à la Material Design style.
Intentionally no pause button, because you can’t pause pomodoro.

No sound on mobile, but it is on my TODO list.

The code definitely needs refactoring and it is also on my TODO list.

rameshsyn · June 26, 2016, 1:34pm

Have a look guys my pomodoro clock project

thanks

parmytank · June 28, 2016, 11:28am

Here’s mine. I couldn’t figure out how to fiddle with the chart colors and I’m worried it looks a little vomity. Please let me know what you think!

Thanks

imtoobose · June 28, 2016, 11:58am

I really like the visual representation of the break time+work time. Something I noticed: you can reduce the work and break length to negative and zero values. This obviously ends up in undefined behavior. Try doing a boundary check if the user makes it go below 1:00.

Also if you learn some basic HTML canvas, you can actually have the clock representation be animated. It’s pretty neat, just in case you want to try something like it.

Otherwise, it’s a great project!