Need help with pomodoro clock?

Need help with pomodoro clock?
0.0 0

#1

Need to figure out why the break time, when finished, keeps subtracting down after it is over and the reset button won’t show up afterwards. Any help is appreciated, thanks!


#2

You declare startBreak inside the timer function with:

let startBreak = setInterval(breakTimer, 1000);

When you write clearInterval(startBreak) within breakTimer, startBreak is undefined, so the interval keeps going. Why is startBreak undefined? Because it local to the timer function. If you declare it inside the document.ready callback function as:

let startBreak;

then breaktimer will have access to it.


#3

Still doesn’t solve the entire code. Thanks anyway.


#4

That is because you still have it declared locally inside timer also.

Edit: You did not need to take out the other setTimeout. All you needed to do was declare startBreak outside of both timer and breakTimer functions.


#5

I tried it, now to wait 10 mins to see if it works.

EDIT: Did not work, haha
EDIT2: This is incredibly frustrating and at the same time humbling. What a wonderful thing it is to learn something new.


#6

You did not put the correct code back inside the timer function AND you are still declaring startBreak with let and you should not be.

Comment out the following line inside breakTimer function:

let  startBreak = setInterval(breakTimer, 20);

and then add the following on the line after $("#num").hide(); inside the timer function.

startBreak = setInterval(breakTimer, 20);

All you have to do is modify your setInterval times to something like 50 instead of 1000 and the timers will move much faster.


#7

I appreciate but don’t understand why I can’t declare startBreak with let at the top of the document ready function? Where else would I declare it for the code to work?


#8

You can declare startBreak with let at the top of the document ready function. That is what I told you in third reply back (see below for my reply). Just don’t declare it inside timer or breakTimer also.


#9

Thanks again, but still it doesn’t work properly. Man, I suck at this.


#10

Let me take another look at your current code and get back with you in about 5 minutes.


#11

You have a typo in the following line:

startBreak = setInterval(breakTime, 20);

setInterval expects a function for the first argument.


#12

Hopefully you figured out the typo was you wrote breakTime instead of the function name breakTimer. Make that change and your timers should work as you intended. Next, I would try to make your code a bit more dry. For example, you could replace the following two similar sections in timer and breakTimer with a standalone function.

      if (count % 60 >= 10) {
        $("#num").html(Math.floor(count / 60) + ":" + count % 60);
      } else {
        $("#num").html(Math.floor(count / 60) + ":" + "0" + count % 60);
      }

AND

      if (breakTime % 60 >= 10) {
        $("#breakNum").html(Math.floor(breakTime / 60) + ":" + breakTime % 60);
      } else {
        $("#breakNum").html(Math.floor(breakTime / 60) + ":" + "0" + breakTime % 60);
      }

The following standalone function would accomplish the work of both of the above sections.

    function displayTime(timerDiv,seconds) {
      let leadingZero = seconds  % 60 < 10 ? "0" : "";
      $("#" + timerDiv).html(Math.floor(seconds / 60) + ":" + leadingZero + seconds % 60);
    }

Then you would call the function as follows:

Inside timer:

displayTime("num", count);  

Inside breakTimer:

displayTime("breakNum", breakTime); 

#13

Geez, thank you so much I didn’t see that error at all! Any idea how to bring the time down from “session time” like it is with “break time”?


#14

Couldn’t get it to work with your suggestion so I changed it back. How would I be able to get the time below “Session Time:” in the same way “Break Time:” is?


#15

What could you not get to work?

You need to look at the structure of your html for this part.