My Pomodoro Clock with Animations

Hello Guys,

I have completed Pomodoro Clock.
Took about 4 days to complete this, since I focused more on CSS.
I learnt lot of CSS, including animations from this project and really enjoyed it.

Really appreciate if you can have a look at my project and provide some feedback. :relaxed:

Cheers!!! :beers:

Very original design! I think your layout and design is great and I have no suggestions for it.

For your code, I have one main suggestion which applies to various sections of your JavaScript. You need to make your code DRY, which stands for Do Not Repeat Yourself.

Below is a section of your timeLoopFalse function which has a lot of duplicate code. This is just one of many sections where the code is duplicated. In fact, the timeLoopFalase and timeLoopTrue functions have at least 95% of the code duplicated and should be refactored into a single function.

    if (val == 0 && ident == 'Session'){
      ident = 'Break';
      spinSwitch = 'breakSpin'
    }else if (val == 0 && ident == 'Break'){
      ident = 'Session';
      spinSwitch = 'sessionSpin'

One possible way to make the above code DRY is:

    if (val == 0) {
      ident = ident == 'Session' 
        ? (nextVal = breakVal,'Break')
        : (nextVal = sessionVal,'Session');
      spinSwitch = ident.toLowerCase()+'Spin';

Another section of code which is not DRY is in your reset button ‘click’ callback function (see below).

    if (functionSwitch == false){
      functionSwitch = true;
      identifier = 'Session';
    }else if (functionSwitch == true){
      functionSwitch = false;
      identifier = 'Session';

One possible way to make it DRY and simply in general is:

    functionSwitch = !functionSwitch; 
    identifier = 'Session';
1 Like

Thank you so much randelldawson!
You have always been a great code reviewer.
You are always emphasizing to make my code DRY.
I will put more effort in to this.
Thank you again! :slight_smile: :slight_smile: :slight_smile: