Feedback for my Pomodoro Clock

I’m super nervous about sharing what I made and this is me conquering my fears. If you want to see my code, my Github username is julieg18. What do you guys think?

My Pomodoro Clock:
https://julieg18.github.io/fcc-pomodoro-clock/

No need to be nervous.
It looks alright and seems to work fine. :+1:
Nice touch with the light / dark option.
My only negative thought was the buttons appear small.

I’ll try to make the buttons bigger, thanks!!

1 Like

Functionality works great.

1 Like

Nice design!

Hovering the buttons will increase the width/height. It looks not comfortable to me coz it will affect the layout of the same group of button. Try to use CSS transform scale() instead.

2 Likes

Sharing the project in this forum is the best way to get feedback that will help you get input that could help you improve your project.

This is what I noticed.

  1. It does not fit on the tiny iPhone 5/SE screen.

  2. I recommend increasing the size of the digits on larger screen sizes to make the timer more prominent. You can use media queries like this:

@media only screen and (min-width: 800px) {
    #time-left {
        font-size: 5rem;
    }
}

This will increase the size of the digits on screens wider than 800px.
Look at my broken Pomodoro clock that I am still working on. https://github.com/brandon-wallace/pomodoro-focus

  1. Increase spacing around button text making buttons larger. (opinion)

  2. Notice that when the seconds hit 1 the width of the numbers change. There is a little jump in the total width of the digits. To stop this from happening use a monospace font for the digits. Monospace fonts have characters that are all the same width. The number 1 will have the same width as the other characters.

You project is simple, well designed, and visually appealing. More importantly it works!

1 Like

Thanks for the advice! I’ll add a media querie, make the buttons bigger, and look for a monospace font.

One more thing. It appears that you can only run one session (one work period and one break period) at a time. It would be nice to have another session run automatically after the break time.

You can also add the time counting down to the tab of the browser just in case the person goes to another tab they will still be able to see the time remaining.

1 Like

Hmm, I’m able to run multiple sessions. Can you tell me more about that problem.

Great idea!! I’m definitely doing that!

@jujug12

I thought that the idea behind the Pomodoro clock was to have 25 minutes of work with 5 minutes of break. That would be one 30 minute session. You have the work period labeled as “session” in your project.

In my timer I do not let the users adjust the break/work periods. I only allow them to add multiple 30 minute sessions or intervals. I am afraid that my users would adjust their work timer down to 5 minutes and the break time up to 25 minutes. LOL!!! just joking…
Neither one of us is wrong we just created our projects differently. What do you think?

It is really nice to have this forum to be able to discuss our projects.

I definitely think I need to rename my session period to work period. I feel like everyone should be able to choose their own time, even if the times they choose are not very productive.

1 Like

@jujug12 I think that being able to adjust the time is a nice feature. The 25 minute work period may not work for some people.

1 Like