I'm seeking assistance with the listeners for my pomodoro clock, specifically for minBreak and plusBreak. Oddly enough, the listeners for minWork and plusWork in jQuery are functioning properly, but the ones for minBreak and plusBreak are not. Any insights on why this might be happening? Below is the code snippet (please excuse the unfinished design)
$(document).ready(function() {
//variables
var workTime = 2; //working time
var breakTime = 10; //break time
var seconds = 00;
var minutes = workTime; //setting clock = to workTime
var clockDisplay = document.getElementById("display");
var counterId = 0;
var state = "on";
//start clock whenc button clicked
$("#start").click(function() {
console.log("started!");
setInterval(countDown, 1000);
$(this).hide(); //hide start button
$("#stop").show(); //show stop button
});
//stop clock when stop clicked
$("#stop").click(function() {
console.log("stopped!");
state = "off";
minutes = workTime;
seconds = 0;
clockDisplay.innerHTML = workTime + ":00";
$(this).hide(); //hiding stop
$("#start").show(); //showing start
});
//add work time
$('.plusWork').click(function() {
workTime++;
$('.work').text(workTime);
console.log(workTime);
});
//substract work time
$('.minWork').click(function() {
workTime--;
$('.work').text(workTime);
console.log(workTime);
});
//add break time
$('.plusBreak').click(function() {
breakTime++;
$('.break').text(breakTime);
console.log(breakTime);
});
//substract break time
$('.minBreak').click(function() {
breakTime--;
$('.break').text(breakTime);
console.log(breakTime);
});
//countdown function
function countDown() {
//if workTime = 0 reset counter and stop
if (minutes == 0 || state == 'off') {
clearTimeout(counterId);
return;
}
//when seconds < 0 substract a minute
else if (seconds < 0) {
minutes--;
seconds = 59;
clockDisplay.innerHTML = minutes + ":" + seconds;
} else {
//if second single digit add 0
if (seconds < 10) seconds = "0" + seconds;
clockDisplay.innerHTML = minutes + ":" + seconds;
seconds--;
}
}
});body {
background-color: #22313f;
;
}
.title {
margin: auto;
text-align: center;
font-size: 30px;
}
.container {
text-align: center;
}
h2 {
font-size: 50px;
margin: 0 0 0 0;
}
.clockContainer {
position: relative;
text-align: center;
}
#display {}
/* .timer {
margin: 0 50px;
margin-top: 70px;
text-align: center;
border: solid black 1px;
font-size: 44px;
width: 500px;
height: 200px;
display: inline-block;
} */
.controlContainer {
position: absolute;
text-align: center;
width: 100px;
display: inline-block;
}
.control {
width: 100px;
height: 100px;
border-radius: 100px;
border: solid black 1px;
text-align: center;
margin-bottom: 20px;
}
.button {
margin-top: 30px;
}
.hide {
display: none;
}
.time {
margin-top: 5px;
margin-bottom: 5px;
font-size: 20px;
}
.ticker {
display: inline-block;
font-size: 30px;
margin-top: 0px;
}
.minus {
margin-right: 10px;
}
.plus {
margin-left: 10px;
}<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div class="container">
<!-- header title -->
<div class="title primary-text">
<h1>Pomodoro Clock</h1>
</div>
<!-- clock container -->
<div class="clockContainer">
<h2>Session</h2>
<!-- timer / clock -->
<div class="timer">
<h1 id="display">30:00</h1>
</div>
<!-- this section for controlling clock -->
<div class="controlContainer">
<div class="control">
<div id="start" class="button title">Start</div>
<div id="stop" class="button hide title">Stop</div>
</div>
<div class="control">
<h3 class="time work">30</h3>
<h3 class="title">Work</h3>
<h3 class="minWork ticker minus">-</h3>
<h3 class="plusWork ticker plus">+</h3>
</div>
<div class="control">
<h3 class="time break">10</h3>
<h3 class="title">Break</h3>
<h3 class="minBrake ticker minus">-</h3>
<h3 class="plusBrake ticker plus">+</h3>
</div>
</div>
</div>
</div>