My Pomodoro Clock with Animations

My Pomodoro Clock with Animations
0

#1

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:


#2

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'
      document.getElementById('myAudio').play();      
      countDown(breakVal,ident);
    }else if (val == 0 && ident == 'Break'){
      ident = 'Session';
      spinSwitch = 'sessionSpin'
      document.getElementById('myAudio').play();
      countDown(sessionVal,ident);
    }

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';
      document.getElementById('myAudio').play(); 
      countDown(nextVal,ident);
    }

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';

#3

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: