Help with pomodoro clock javascript

Help with pomodoro clock javascript
0

#1

I have my pomodor clock mostly done but I’m having a couple issues:

  1. When the user clicks the buttons to add/subtract time from the break or work session it updates on the clock, but after hitting start the clock doesn’t show the appropriate time. For example: If the clock is set to run for 1 minute and you increment the session time to 5 minutes, after hitting start the clock still only counts down from 1 minute.

  2. I can’t get the reset function to properly reset the clock.

Been stuck on these issues for a while and any pointers would be appreciated.


#2

I will help you get started with this question. You have the following line of code:

var totalSecondsWork = pomodoro.wTime * 60;

Since pomodoro.wTime is set to 1, totalSecondsWork starts each time at 60. Nowhere in your code to you change totalSecondsWork after clicking on the +/- for the session.


#3

I noticed that too and changed the click functions for the button:

I changed the totalSecondsWork from:
totalSecondsWork + 60;

to:
totalSecondsWork += 60;

$('#addSessionMinute').click(function(){
    if(pomodoro.wTime < 60){
      pomodoro.wTime += 1;
      $('#sessionDisplay').text(pomodoro.wTime);
      //Changes clock to new amount but also decrements by that amount per second instead of 1 seconds per second
      totalSecondsWork += 60;
      clockInit();
    }
  })

This updates the clock time the way it should i.e. pressing the work session button to 5 starts the clock from 4:59. The problem I’m having is now that also decrements each tick of the clock by 5 seconds instead of one. Whatever I increment the work session to the clock is decremented by that many seconds per tick. If I increment the session to 12 minutes the clock decrements 12 seconds per second and so forth.

I can’t figure out what’s causing this behavior. The tick function still decrements totalSecondsWork–. I don’t understand why changing the work session would cause this function to decrement more than once per second.


#4

It took me a bit to figure this one out, but I finally figured out that the tick function was being called the same number of times that showed in the session length. So I thought “what affects the session length?” Well, every time you click the element with id=“addSessionMinute” or the element with id=“subtractSessionMinute”.

When I looked at those two event handlers, I saw some calculations which seemed normal and then I saw this on the last line of those function:

clockInit();

Inside the clockInit function you have:

    $('#start').on('click', function(){
      startClock();
    })

Each time clockInit is called, it adds another click event handler on the element with id=“start”. When you finally do click start, the function startClock executes multiple times (based on the number of times the - or + session time was clicked.

To correct this problem, you simply need to move the above code outside of the clockinit funtion.


#5

Thanks! I was going nuts trying to fix that.