Pomodoro clock - feedback welcome + CSS question

Code Feedback
1

Hi,
I finished my Pomodoro Clock challenge - it´s working as I planned:

  • you can set the time between 1min-90min
  • the buttons for setting time are active only when not running
  • the buttons Start/Stop are disabled/enabled as needed
  • the background image changes depending on the work/break time
  • the site is responsive
  • (NEW) there is a tone when the countdown reaches 00:00

Any feedback for the whole project is welcome. :wink:

Project Link - https://codepen.io/mmajam/pen/ELjmvW?editors=0110

EDIT: The following three problems below are solved now (as described in my post below) :wink:

However, there are still some issues in CSS, which I don´t see how to fix:
1. The “.wrapper” used as a filter for the background-picture (so that this is not so much contrasting) is not completely up to the top. :frowning: How to fix this? :thinking:

2. If I make the browser-window really narrow, so that the three buttons at the bottom come into two rows, when scrolling down, I see that the background (and probably also the “.wrapper” is not completely to the bottom/to the footer. :thinking:

3. The button “-” (minutes/seconds down) is a bit down from the box. Why? :thinking:

Can you give me advice how to fix these three issues?

1 Like
2

For me I don’t want to watch the clock all the time so an alarm between work and break times would be good.
I also recommend giving pens a title. Easier to find when you have many pens.

I tinkered with your code. This is the closest I got to getting rid of the gap at the top:

There seem to be conflicting styles everywhere.

3

Thank you for your comment! :wink:

4

I finally found out how to solve the problems!
For the .wrapper over the whole page helped adding these to my css: :slight_smile: :sunglasses:

.wrapper {
position: fixed;
padding: 0;
margin: 0;
top: 0;
left: 0;
width: 100%;
height: 100vh;
}

I also added the audio when the countdown reaches 00:00. :wink:

I look forward for your feedback and comments! :wink: :slight_smile:

5

Much better now :+1:

6

Seems great. Well done!

7

Thank you!!! :wink: :slight_smile:

8

Hi mmajam,

Really strange, it could just be my browser, but when I click on the + or - buttons nothing happens. I stopped the clock and then reset it but the buttons still don’t increase or decrease the clocks.

Using Chrome.