How to alternate between two separate counts

JavaScript
1

Hi I’m trying to build a small personal workout app.

link: https://codepen.io/jtog95/pen/zYrMpPB

What I have so far: A loop that’s counts up to a specified number (10 seconds). Then once it hits that number moves onto and displays the next workout in my exerciseList array. This array will loop 3 times until cleared.

What I want: I want after each exercise a period of rest (20 seconds). I want this to alternate and be displayed as the current exercise between each exercise. For example : Push-ups 10secs, Rest 20 secs, Pull-ups 10 secs, Rest 20secs, etc…

What I tried: All different types of things. The one iteration I thought might work was with two setIntervals running simultaneously trying to make one count start when the other count stopped, but I’m still pretty new to this and was having trouble getting it going.

Also I’d just like to know was I on track trying to use two setIntervals at the same time? Or could this be done with just one? Is it possible to use 2? Or is that generally not good practice.

My working bit of code :

var increasing = true;
var exercises = document.getElementById('exercises');
var counter = document.getElementById('counter');
var count = 0;
var specifiedNum = 10;
var exerciseCount = 0;
var exerciseList = ['Push-ups', 'Pull-ups', 'Squats', 'Curls'];
var iterations = 0;

var restNum = 20;

var fnLoop = setInterval(exerciseLoop, 1000);

function exerciseLoop(){
    increasing === true ? count++ : count = 0;
    counter.innerHTML = count; 
    if(count === specifiedNum) {
        iterations++;
        console.log(iterations)
        count = 0;
        counter.innerHTML = count;
        exerciseCount++
        exercises.innerHTML = exerciseList[exerciseCount%exerciseList.length];  
    }
    
    if(iterations >= exerciseList.length * 3) {
        clearInterval(fnLoop)
    }
  
}
2

There are many ways to implement this but the first thing that came to mind was to add ‘rest’ in your exerciseList array after each exercise, then when your exercise count is even (or I guess odd if we’re starting at 0) you temporarily change specifiedNum to 20 (every second iteration), then back to 10 for the next one. Or something like that. no need for a second setInterval.

3

Thanks Soupdenuit that worked. As a new programmer I feel like I reach for the most complicated solution all the time, when most of the time the solution is pretty simple and logical.

Updated code for those curious:

var increasing = true;
var exercises = document.getElementById('exercises');
var counter = document.getElementById('counter');
var count = 0;
var specifiedNum = 5;
var exerciseCount = 0;
var exerciseList = ['Push-ups','Rest', 'Pull-ups','Rest', 'Squats','Rest', 'Curls', 'Rest'];
var iterations = 0;

var fnLoop = setInterval(exerciseLoop, 1000);

function exerciseLoop(){
    increasing === true ? count++ : count = 0;
    counter.innerHTML = count; 
    if(count === specifiedNum) {
        iterations++;
        console.log(iterations)
        count = 0;
        counter.innerHTML = count;
        exerciseCount++
        console.log('rest' + exerciseCount);
        exercises.innerHTML = exerciseList[exerciseCount%exerciseList.length];  
    }

    if(exerciseCount === 1 ) {
        specifiedNum = 20;
    } else if(exerciseCount === 2) {
        specifiedNum = 5
    } else if(exerciseCount === 3) {
        specifiedNum = 20;
    } else if (exerciseCount === 4) {
        specifiedNum = 5;
    } else if(exerciseCount === 5) {
        specifiedNum = 20;
    } else if(exerciseCount === 6) {
        specifiedNum = 5;
    } else if( exerciseCount === 7){
        specifiedNum = 20;
    }
    
    if(iterations >= exerciseList.length * 3) {
        clearInterval(fnLoop)
    }
  
}
1 Like
4

Very good, however you want to avoid repetition.
Here’s a one-liner using the ternary operator (checking if specifiedNum is odd) instead of your series of else ifs:

exerciseCount % 2 !== 0 ? specifiedNum = 20 : specifiedNum = 5;

Just after your exercises.innerHTML... line