Tomato Timer Review Please V1.1

Hi campers,

https://tomatoclock.netlify.com/

Please take a moment to review my Pomodoro Clock. Few things I have added extra is

  1. document title displays timer
  2. Loading bar
  3. Change session/rest lengths through inputs.

Thank you.

(One thing I noticed was timer on document title doesn’t work when I switch to other tab, any suggestions?)

2 Likes

Hey! Nice job there.

I would just make the footer have a few pixels of white-space on the bottom.
Oh and maybe you should add like a question button for break lenght for the people like me that don’t know ? X).

Good job,
-Tech.

1 Like

Nicely done! It looks great in Chromium based browsers. Although the inputs look a little wonky in Firefox (the screenshot was taken using Firefox Developer Edition) That said, it’s just a styling gripe.

The functionality and interactions are well thought out! I like how it responds to multiple screen scales! Good on ya!

2 Likes

@Tech that’s good idea, thanks for the input!
@geekosupremo totally forgot to test on other browsers, thanks for the reminder and compliment!

1 Like

Very nice but for me it only looked nice below 80% on Chrome and 67% on Firefox (my normal viewing is 100% to 115-125%). Above those two % (for example 100%)- everything got overlaid- the footer didn’t readjust etc.

I couldn’t figure out how to start the break length timer though…

1 Like

Thanks for your review but I can’t seem to replicate your problem when I change my zoom to different percentages. Can you post screenshots please?

Thanks all I made changes to fix cross browser style issues.

And it looks brilliant! Good on ya!

I am currently using it. Taking advantage of the Side View addon for Firefox, and it is working a treat!

BTW I reallly like the little ‘pulse’ animation on the progress bar. That’s a nice little touch!

1 Like

Nice job.

  1. I would disable text selection on the spans, if I click the +/- fast enough I start to select text.

user-select: none;

  1. The number inputs accept negative values.

  2. Personally, I would prefer the timer not starting on page load.

edit: Oh another small little thing, see if you can give the favicon a transparent background.

1 Like
  1. Found out that if I am filtering values greater than 1 minute, it makes it impossible to enter single digit number from typing. Because double back arrows will always be 0 (less than 1). Is there any good solutions to this?

Hopefully I made myself clear…

It looks clean and neat. Great job @shimphillip .

@Gopikrishna
Thanks a lot!

I only had a quick look. But can’t you just check the newLength value in changeDefaultTimer and only allow 0 as the lowest value.

after convertToSeconds call:
newLength = newLength > 0 ? newLength : 0;

If you set either the session or break time to 0 it will just reset to the default values.

Makes good sense. Thanks!

here you go…

Firefox at 100% zoom level

Chrome at 100%

1 Like