How to get Pomodoro break timer to start?

1

I am currently working on the pomodoro clock project, and I found a great API that has been very useful (flipclock.js). The problem I am currently having is that I cannot seem to get the break timer to start when the work timer ends, even when I add a conditional that should start that timer when the work timer goes to zero. Additionally, the work timer doesn’t stop when it gets to zero, but continues counting, upwards. How can I solve these problems? Any specific examples would be greatly appreciated.
Here is the javascript:

clock = $(’.clock’).FlipClock({
clockFace: ‘MinuteCounter’,
autoStart: false,
callbacks: {
stop: function() {
$(’.message’).html(‘Time to take a break!’)
}
}
});

break_clock = $(’.break_clock’).FlipClock({
clockFace: ‘MinuteCounter’,
autoStart: false,
callbacks: {
stop: function() {
$(’.message’).html(‘Get back to work!’)
}
}
});

time = 25*60;
clock.setTime(time);

$("#btn2").on(“click”, function() {
time += 60;
clock.setTime(time);
});

$("#btn3").on(“click”, function() {
time -= 60;
clock.setTime(time);
});

$("#btn4").on(“click”, function() {
time = 25*60;
clock.setTime(time);
});

var break_time = 300;
break_clock.setTime(break_time);

$("#btn5").on(“click”, function() {
break_time += 60;
break_clock.setTime(break_time);
});

$("#btn6").on(“click”, function() {
break_time -= 60;
break_clock.setTime(break_time);
});

$("#btn1").on(“click”, function() {
clock.setCountdown(true);
clock.start(function() {
if(clock.getTime()===0){
clock.stop();
}

});
console.log(clock.getTime());
});

If that is too hard to read on here, the link to the codepen is here:

Also, here is the flipclock.js api link for reference:
http://flipclockjs.com
Thanks!

2

From what I can tell, you never start the break timer.

It seems to me that once the work timer stops (the code is in the $("#btn1") on click block) that the break timer would then be called to start. Likewise, once the break timer ends, the work timer would be called to start.

As an aside, you might want to consider making your div ids have a meaningful name (e.g. btn-start-work). I know that this is a bit more typing, but it makes things easier for people to see what you are trying to do (“btn1” only indicates that it is a button, of which there are six). It might even make the code clearer to you.

Anyhow, I think that you are pretty close to finishing this. The api you are using gives the clock a nice feel.

I hope this has helped.

3

You can post code correctly on here with proper formatting: