Create Time Countdown in Javascript-CodePudding

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 >
      <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...

CodePudding user response：

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 >
      <h1 id="count">WORK</h1>
</div>

I hope this helped! Let me know if you need any further details or clarification :)

CodePudding user response：

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);

CodePudding user response：

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 >
      <h1 id="count">WORK</h1>
</div>

With above snippet you can also know the exact moment a training ended.