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