Pomodoro Clock - please review it!

Code Feedback
1

Hey guys, just finished with pomodoro clock! design looks a bit wierd and unusual,Styling in pure CSS and i’ve made the logic to work using pure javascript and jquery, seems to be working fine!
Please comment your reviews and don’t forget to mention bugs if you find any! Thankyou :slight_smile:

link : http://codepen.io/excviral/full/grROzL/

3 Likes
2

Hey @ExcViral!

This looks really great. Your design is unique and it’s clear you put a lot of work into it.

The code mostly works fine. Here’s the problems I noticed:

  • There’s no reset button, so if I want to start the timer over I have to reload the page.
  • It can be difficult to tell when the timer is starting or stopping. Maybe some feedback with a momentary color change would help?
  • The clock doesn’t have leading zeros
3

The design is innovative.

However, this might be just for me, but the design wasn’t intuitive. I don’t understand how to start the timer and the button placement for increasing the session/break time was confusing.

I would suggest improving the user interface so that others can understand the app better.

Keep up the great work!

4

@ExcViral Very well done! The design is very original. My only critique is that single-digit numbers aren’t padded. For example, 24 minutes and 9 seconds is displayed as 24:9 instead of 24:09. (edit: just noticed that @PortableStick already mentioned this issue, so I’m just going to second it.) Really nice job! I wish I had your CSS skills. :grin:

5

Acknowledged! thanks for the reviews buddy! i was wondering how to solve that leading zeros thing, but i was too frustrated to solve it… let’s hope i find the solution soon! :smile: and i’ll add a reset button soon, and the timer resets when we change any length of session/break, restarting with session time! And i was thinking of adding a responsive bordering along the inner-circumference, which will be empty at start… and filling itself up as timer finishes. Long way to make it happen though! :smile:

6

Looks great, but I’ve no idea how to start it. I clicked everywhere and it did start eventually, but it should be more intuitive. I’d recommend making it possible to start it either with a very visible button or on the clock face itself. You could also expand the click region for the +/- buttons to the entire button, not just the character (+/-). Also on clickable objects, in the CSS use:

{cursor: pointer;}

Apart from those few kinks (which might just be me being picky), though it looks fantastic. Nice work.