CODEWITHSUNDEEP
javascripthtml
Michael McComb
Michael McComb

Reputation: 21

How can I repeat the display of this array three times?

I am trying to display a workout every minute and then repeat the entire array three times. So far everything I have tried doesn't work. I want repeat three times and then maybe display something that says workout completed. 

function startMinuteTimer(duration, display) {
  var timer = duration,
    minutes, seconds;
  setInterval(function() {
    seconds = parseInt(timer % 60, 10);
    seconds = seconds < 10 ? "0" + seconds : seconds;

    display.textContent = " " + seconds;

    if (--timer < 0) {
      timer = duration;
    }
  }, 1000);
}

window.onload = function() {
  var oneMinute = 60 * 1,
    display = document.querySelector('#minutetime');
  startMinuteTimer(oneMinute, display);
};

var workouts = ["Goblet Squat", "Mountain Climber", "Single-Arm Dumbbell Swing", "T-Pushup", "Split Jump", "Dumbbell Row", "Dumbbell Side Lunge and Touch", "Pushup-Position Row", "Dumbbell Lunge and Rotation", "Dumbbell Push Press"];

setInterval(function() {
  document.getElementById("workouts").innerHTML = workouts.shift();
  //workouts[0].push();

}, 2000);
<body>
  <div>Complete as many reps as you can in <span id="minutetime">60</span> seconds!
  </div>
  <div><span id="workouts"></span> </div>
</body>

Link to the codepen https://codepen.io/McComb/pen/MrOWbM

Upvotes: 0

Views: 59

Answers (2)

Blundering Philosopher
Blundering Philosopher

Reputation: 6805

Ok, I changed things up a bit to use the Promise class. It's pretty useful, I'd highly recommend learning about it, especially when working with asynchronous events (like setInterval).

So in you first function, I simplified like 2 lines, then added a bit like this:

function startMinuteTimer(duration, display) {
    var timer = duration;
    var minutes, seconds;

    return new Promise( (resolve, reject) => {
        let interval = setInterval(() => {
            // timer comes in as a number, not string (no parseInt needed)
            seconds = timer % 60;
            seconds = seconds < 10 ? "0" + seconds : seconds;

            // you don't need an empty space in this string
            display.textContent = "" + seconds;

            if (--timer < 0) {
                timer = duration;
                // clear interval so this specific instance doesn't keep looping
                clearInterval(interval);
                // tell promise we're ready to move on.
                resolve();
            }
        }, 1000);
    });
};

Then I added a function called displayWorkout which should loop through a given array of workout titles, and display them all while ALSO calling your first function startMinuteTimer to display the countdowns each minute:

function displayWorkout(workouts, index=0) {

    var oneMinute = 60 * 1,
        display = document.querySelector('#minutetime');

    return new Promise( (resolve, reject) => {
        // check if there are more workouts to display
        if (index < workouts.length) {
            // put workout text in html
            document.getElementById("workouts").innerHTML = workouts[index];

            // now start the timer
            startMinuteTimer(oneMinute, display)
            .then(() => {
                // after 1 minute, call displayWorkout again to display
                // next workout in list
                return displayWorkout(workouts, index + 1);
            })
            .then(() => {
                // once the next workout is done displaying, this promise is done.
                resolve();
            });
        } else {
            // no more workouts -> this set of workouts is done.
            resolve();
        }
    });
}

Finally, in onload I just set the array and passed it to displayWorkout three times, asynchronously (using Promises). I included console.log statements to show you when rounds 1, 2, and 3 are completed:

window.onload = function() {
    var workouts = [
        "Goblet Squat", "Mountain Climber", "Single-Arm Dumbbell Swing",
        "T-Pushup", "Split Jump", "Dumbbell Row",
        "Dumbbell Side Lunge and Touch", "Pushup-Position Row",
        "Dumbbell Lunge and Rotation", "Dumbbell Push Press"
    ];

    console.log('starting round 1!');
    displayWorkout(workouts)
    .then(() => {
        console.log('starting round 2!');
        return displayWorkout(workouts);
    })
    .then(() => {
        console.log('starting round 3!');
        return displayWorkout(workouts);
    })
    .then(() => {
        console.log('done!');
    });
};

So to put it all together, just copy this code:

function startMinuteTimer(duration, display) {
    var timer = duration;
    var minutes, seconds;

    return new Promise( (resolve, reject) => {
        let interval = setInterval(() => {
            // timer comes in as a number, not string (no parseInt needed)
            seconds = timer % 60;
            seconds = seconds < 10 ? "0" + seconds : seconds;

            // you don't need an empty space in this string
            display.textContent = "" + seconds;

            if (--timer < 0) {
                timer = duration;
                // clear interval so this specific instance doesn't keep looping
                clearInterval(interval);
                // tell promise we're ready to move on.
                resolve();
            }
        }, 1000);
    });
};

function displayWorkout(workouts, index=0) {

    var oneMinute = 60 * 1,
        display = document.querySelector('#minutetime');

    return new Promise( (resolve, reject) => {
        // check if there are more workouts to display
        if (index < workouts.length) {
            // put workout text in html
            document.getElementById("workouts").innerHTML = workouts[index];

            // now start the timer
            startMinuteTimer(oneMinute, display)
            .then(() => {
                // after 1 minute, call displayWorkout again to display
                // next workout in list
                return displayWorkout(workouts, index + 1);
            })
            .then(() => {
                // once the next workout is done displaying, this promise is done.
                resolve();
            });
        } else {
            // no more workouts -> this set of workouts is done.
            resolve();
        }
    });
}

window.onload = function() {
    var workouts = [
        "Goblet Squat", "Mountain Climber", "Single-Arm Dumbbell Swing",
        "T-Pushup", "Split Jump", "Dumbbell Row",
        "Dumbbell Side Lunge and Touch", "Pushup-Position Row",
        "Dumbbell Lunge and Rotation", "Dumbbell Push Press"
    ];

    console.log('starting round 1!');
    displayWorkout(workouts)
    .then(() => {
        console.log('starting round 2!');
        return displayWorkout(workouts);
    })
    .then(() => {
        console.log('starting round 3!');
        return displayWorkout(workouts);
    })
    .then(() => {
        console.log('done!');
    });
};

Upvotes: 1

Luis felipe De jesus Munoz
Luis felipe De jesus Munoz

Reputation: 7923

I did a new function for you. Any question just let me know.

PD: Explanation is in the code

function startMinuteTimer(duration, display) {
var timer = duration, minutes, seconds;
setInterval(function () {
    seconds = parseInt(timer % 60, 10);
    seconds = seconds < 10 ? "0" + seconds : seconds;

    display.textContent =" " + seconds;

    if (--timer < 0) {
        timer = duration;
    }
}, 1000);
}

window.onload = function () {
var oneMinute = 60 * 1,
    display = document.querySelector('#minutetime');
startMinuteTimer(oneMinute, display);
};




var workouts = ["Goblet Squat", "Mountain Climber", "Single-Arm Dumbbell Swing", "T-Pushup", "Split Jump", "Dumbbell Row", "Dumbbell Side Lunge and Touch", "Pushup-Position Row", "Dumbbell Lunge and Rotation", "Dumbbell Push Press"];

//Current position 
var repetitions = 0

// array length
var _workout_length = workouts.length


startWorkout = function(){

  // if the position is greater than the array size we start over
  if(repetitions >= _workout_length) 
    repetitions = 0
    
  // then we print our result and wait 2 sec before doing it again
  document.getElementById("workouts").innerHTML = workouts[repetitions]
  repetitions++
  setTimeout(function(){    
    startWorkout()
  }, 2000)  
}
startWorkout()
<body>
<div>Complete as many reps as you can in <span id="minutetime">60</span> 
seconds!</div>
<div><span id="workouts"></span> </div>
</body>

Upvotes: 0

Related Questions