CODEWITHSUNDEEP
javascript
Jacob
Jacob

Reputation: 29

Create Time Countdown in Javascript

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

Upvotes: 2

Views: 474

Answers (3)

Aniketh Malyala
Aniketh Malyala

Reputation: 2660

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

Upvotes: 1

Silvan Bregy
Silvan Bregy

Reputation: 2734

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.

Upvotes: 0

Huan Le
Huan Le

Reputation: 206

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

Upvotes: 0

Related Questions