Pomodoro Clock and SCSS

Hello guys!

I just finished my Pomodoro Clock challenge, I’m happy with the design, but I know that if I use SCSS I will be able to improve it, could anyone recommend me some easy tutorial to start learning SCSS?

Also… any feedback about my project will be appreciated… as always!

I do like the design very much. However, I find the process of setting the work vs break time not be very intuitive. Also, when I click the tomato to start the clock nothing happens or does not appear to happen. I can not see a count down of seconds to indicate how much time I have left before my break. Also, I can not tell if it starts with work or break, because there is no visual indicator (i.e. text that says “Work” or “Break”).

Hello @RandellDawson, I understand your point!

The question is, as the Pomodoro is about minutes… I didn’t put the seconds countdown… Actually I’m looking for a sound to indicate that the countdown starts, but if you set a diferent pomodoro size the “OK! Click to start…” message is showed, once you click, the message dissapear… this indicates that the countdown started, I will add the same message to initial screen, by default!

The WORK or BREAK statements are showed with diferent colors, red tomato means WORK, green tomato means BREAK…

Actually, my initial design includes a “rule” to show the time lapse… But I can’t figure out how to do this! hahaha I will try it again in the future!


Sass/SCSS won’t allow you to create any effects you can’t already in CSS. The beauty of Sass is that it allows you to reuse style information as variables and mixins, which makes your app more scalable and easier to change.

The problem is, none of this should require explanation. The user just needs to understand how to operate the app and what the displayed information means.

Another problem is that it’s inoperable on mobile devices (the controls are beyond the sides of the screen).

I really love the images and colors, though. Could be a really neat timer with a few UX tweaks.

I mentioned SCSS because all the CSS drawings I’ve seen are done with SCSS, so I presume it’s a little easier to “draw” with that …^^ thks for the explanation!

To be honest… I don’t see any difficult related with operation… If I saw a “Click to start” message and after I click on the tomato the message suddenly disapear… for me… it’s working…

About the mobile, yes… I didn’t work on it to be responsible… I added two media queries (Is it the right name?) to CSS now… I think it works…