Iam creating a workout countdown timer using javascript.
This is my code
var counter = 30;
setInterval( function(){
counter--;
if( counter >= 0 ){
id = document.getElementById("count");
id.innerHTML = counter;
}
if( counter === 0 ){
id.innerHTML = "REST";
}
}, 1000);<div class="container">
<h1 id="count">WORK</h1>
</div>
The time countdown running well, but i want to add a rest time countdown after 30sec workout.
Please Help me Thanks...
The following code should work. Once the workout counter reaches 0, we can switch to rest mode and rest for 30 seconds (you can change how long the user rests for as well). After these 30 seconds are up, the timer will switch back into workout mode and the loop continues.
Edit: We can create a variable rounds and increment this variable every time we go into Workout Mode. Once rounds reaches the value of 11, we can use clearInterval() to stop the code, after setting the setInterval(function(){},1000) to a variable called interval.
var counter = 30;
var mode = "Workout";
var rounds = 1;
var interval = setInterval( function(){
counter--;
if(mode == "Workout" && counter >= 0 ){
id = document.getElementById("count");
id.innerHTML = "Workout Number " + rounds + ": " + counter;
}
else{
id = document.getElementById("count");
id.innerHTML = "Rest: " + counter;
}
if( counter === 0 ){
if(mode == "Workout"){
mode = "Rest";
}
else{
mode = "Workout";
rounds++;
}
id.innerHTML = "REST";
counter = 30;
if (rounds == 11){
clearInterval(interval);
}
}
}, 1000);<div class="container">
<h1 id="count">WORK</h1>
</div>
I hope this helped! Let me know if you need any further details or clarification :)
You should put the id outside of current scope, and also clear interval:
var counter = 30;
var intervalId = setInterval( function(){
counter--;
var id = document.getElementById("count");
if( counter >= 0 ){
id.innerHTML = counter;
}
if( counter === 0 ){
id.innerHTML = "REST";
clearInterval(intervalId)
}
}, 1000);
You can have a function which accepts trainingTime aswell as restTime and display one of them conditionally on every interval.
function startTraining(trainingTime, restTime) {
const fullTime = trainingTime + restTime
var counter = 0
const display = (value) => {
id = document.getElementById("count");
id.innerHTML = value;
}
// display the start time immediatly!.
display('TRAIN: ' + fullTime)
const interval = setInterval(function () {
counter++;
// stop training if fulltime is reached/exceeded
if (counter >= fullTime) {
clearInterval(interval)
display('training ended')
// start next training here!.
// ...
}
else {
// calculate remaining time
const remainingTime = fullTime - counter
// Display "TRAIN" if counter is less than needed trainingTime
// else display "REST"
const keyword = counter < trainingTime ? 'TRAIN' : 'REST'
// update html:
display(keyword + ': ' + remainingTime)
}
}, 1000);
}
const trainingTime = 15
const restTime = 15
startTraining(trainingTime, restTime)<div class="container">
<h1 id="count">WORK</h1>
</div>With above snippet you can also know the exact moment a training ended.