Response title
This is preview!
How Do I Fix MY Broken Timer
in Using jQuery
•
5 years ago
I am working on a tabata timer but as soon as I tried to put a "rounds" feature in it broke as well as the reset button. SOS. HELP. Below is my code:
HTML
<head>
<!--outside libraries/functionality -->
<audio id="buzzer" src=></audio> </audio> <type="audio/mpeg"></audio>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<!--linking to files-->
<link rel="stylesheet" type="text/css" href="style.css">
<script type="text/javascript" src="function.js"></script>
</head>
<body>
<!--Main div-->
<div>
<h1>Clock<h1>
<h3>By Nicole Dupuis</h3>
<div class="center">
<!--Div for storage-->
<div id="timeDiv">
<!--Session time-->
<h1 id="title1">Session Time</h1>
<!--Session time subtraction-->
<a href="#" class="btn btn-primary" id="minus5Clock">-</a>
<h3 id="timeType"></h2>
<!--5 Mins-->
<h2 id="num" class="whaterver">1</h2>
<!--Session time addition-->
<a href="#" class="btn btn-primary" id="add5Clock">+</a>
</div>
<div>
<!--Break Time-->
<div id="breakDiv">
<h1 id="title2">Break Time</h1>
<!--Break Time subtraction-->
<a href="#" class="btn btn-primary" id="minus5Break">-</a>
<h2 id="breakNum">1</h2>
<!--Break Time subtraction-->
<a href="#" class="btn btn-primary" id="add5Break">+</a>
</div>
</div>
<div>
<!--Break Time-->
<div id="roundsDiv">
<h1 id="title3">Rounds</h1>
<h2 id="numberofRounds"></h2>
<!--Break Time subtraction-->
<a href="#" class="btn btn-primary" id="minus5Rounds">-</a>
<h2 id="roundNum">1</h2>
<!--Break Time subtraction-->
<a href="#" class="btn btn-primary" id="add5Rounds">+</a>
</div>
</div>
<div>
<!--Start-->
<a href="#" class="btn btn-primary" id="start">Start</a>
<!--Reset-->
<a href="#" class="btn btn-primary" id="reset">Reset</a>
</div>
</div>
</body>
JQuery
//document can only be manipulated safely once "ready"
$(document).ready(function() {
//array for buzzer
var buzzer = $("#buzzer")[0];
//Integers for timer to be displayed
var count = parseInt($("#num").html());
var breakTime = parseInt($("#breakNum").html());
var rounds = parseInt($("#roundNum").html());
//rest will only show for end of timer
$("#reset").show();
//event handler for start
$("#start").click(function() {
//adjusting for seconds
var counter = setInterval(timer, 1000);
count*=60;
breakTime*=60;
rounds--;
//local function once it hits zero it stops counting down
function timer() {
//hide variables
$("#numberofRounds").html("Rounds:");
$("#start, #minus5Clock, #add5Clock, #minus5Break, #add5Break, #breakNum, #add5Rounds, #minus5Rounds, #title1, #title2, #title3").hide();
//display "session time" in document
$("#timeType").html("Session Time:");
//added rounds here
//minus one second every iteration
count -= 1;
//play buzzer when reaches 0
if (rounds === 0) { //redo this
if (count === 0) {
buzzer.play();
//stop at 0
clearInterval(counter);
clearInterval(rounds);
//adjusting for seconds
var startBreak = setInterval(breakTimer, 1000);
//hide number for session time
$("#num").hide();
}
//if not a single digit number than change html
if(count%60>=10){
$("#num").html(Math.floor(count/60)+":"+count%60);
}else{
$("#num").html(Math.floor(count/60)+":"+"0"+count%60);
}
//---- var breakTime = setInterval(timer, 1000);
function breakTimer() {
//changes to break time
$("#timeType").html("Break Time: ");
//displays the break number
$("#breakNum").show();
//60 used to be here
$("timeType").show();
//counting down by seconds
breakTime -= 1;
//once done clear interval
if(breakTime === 0){
clearInterval(startBreak);
buzzer.play();
//show reset button
// $("#reset").show();
//hiding "break time" and break numner
$("#breakNum, #timeType").hide();
}
if(breakTime%60>=10){
$("#breakNum").html(Math.floor(breakTime/60)+":"+breakTime%60);
}else{
$("#breakNum").html(Math.floor(breakTime/60)+":"+"0"+breakTime%60);
}
}
}
}
});
//for resetting will reset both sets of numbers to 25 and hide rest and time
$("#reset").click(function() {
count=1;
breakTime=1;
rounds=1;
//displays numbers buttons and types
$("#num").html(count);
$("#breakNum").html(breakTime);
//show orginal layout
$("#start, #reset, #num, #minus5Clock, #add5Clock, #minus5Break, #add5Break, #breakNum, #add5Rounds, #minus5Rounds, #roundNum, #title1, #title2, #title3" ).show();
//hide time type and reset button
$( "#timeType, #numberofRounds").hide();
});
//"#start, #minus5Clock, #add5Clock, #minus5Break, #add5Break, #breakNum, #add5Rounds, #minus5Rounds, #roundNum, #title1, #title2"
//when subtracting you cannot go below 5 mins for session time
$("#minus5Clock").click(function() {
if (count > 1) {
count -= 1;
$("#num").html(count);
// console.log(count);
}
});
//can add 5 minutes additionally for session time
$("#add5Clock").click(function() {
count += 1;
$("#num").html(count);
//console.log(count);
});
//can subtract 5 minutes additionally for break time
$("#minus5Break").click(function() {
if (breakTime > 1) {
breakTime -= 1;
$("#breakNum").html(breakTime);
// console.log(count);
}
});
//can add 5 minutes additionally for break time
$("#add5Break").click(function() {
breakTime += 1;
$("#breakNum").html(breakTime);
//console.log(count);
});
//can subtract 5 minutes additionally for break time
$("#minus5Rounds").click(function() {
if (rounds >= 1) {
rounds -= 1;
$("#roundNum").html(rounds);
// console.log(count);
}
});
//can add rounds additionally
$("#add5Rounds").click(function() {
rounds += 1;
$("#roundNum").html(rounds);
//console.log(count);
});
});
1