How to append a countdown that initializes after appending?

Question

I am creating a web application. Upon page loading, a routine starts, "looping" through each workout (without using keypress or clicks). I am using setInterval to append different "workouts" to the HTML. I would like to append each workout with a countdown (that lets the user know when the workout is over and the next one starts).

(note that these if/else statements will be refactored DRY later on)

This is what I have:

$(document).ready(function() {
    var counter = 470; //total length of routine in seconds
    var countDown = setInterval(function(){
      counter-- //decrease the counter each second
        if (counter === 470) {
            $(".routine").append("<p class='itemName'>Jumping Jacks!</p>");
        }
        else if (counter === 440) {
            $(".routine").empty().append("<p class='itemName'>Take a break!</p>");
        }
        else if (counter === 430) {
            $(".routine").empty().append("<p class='itemName'>Lounges!</p>");
        }
        else if (counter === 400) {
            $(".routine").empty().append("<p class='itemName'>Take a Break!</p>");
        }
        else if (counter === 390) {
            $(".routine").empty().append("<p class='itemName'>Sit Ups!</p>");
        }
        else if (counter === 360) {
            $(".routine").empty().append("<p class='itemName'>Take break!</p>");
        }
        else if (counter === 350) {
            $(".routine").empty().append("<p class='itemName'>Plank!</p>");
        }
        // will add additional workouts & breaks
        else if (counter === 0) {
            console.log("Finished!!");
            clearInterval(countDown);
          }
    }, 1000);

I have tried:

This, but appending the span tag instead of hardcoding it
This too
And this, also appending the HTML instead of hardcoding it

if i understand right ... you can set new countdown after before ended. And you can create new with own setter seconds. — daremachine, Sep 07 '15 at 22:04
i want to understand the question, but it's confusing. instead of `.empty().append` why not use `.html()`? Also, you could do with caching your `$(".routine")` selector: `var $routine= $(".routine");` — Data, Sep 07 '15 at 22:06

score 1 · Accepted Answer · answered Sep 07 '15 at 22:20

Not exactly sure what you are asking for here, but I fixed a couple small bugs in your code and added a "count down" clock for each exercise, which counts down the number of seconds until the next break. JS Fiddle: http://jsfiddle.net/jouef2bx/

var counter = 470; //total length of routine in seconds
var secondsLeft = 0;

var countDown = setInterval(function(){
  counter--;  //decrease the counter each second
  secondsLeft--;  // decrease time left in current exercise
  $(".countdown").html("Just " + secondsLeft + " seconds to go!");
    if (counter === 469) {
        $(".routine").append("<p class='itemName'>Jumping Jacks!</p>");
        secondsLeft = 20;
    }
    else if (counter === 440) { 
...

Since you said you were going to DRY the code after getting it working, I left the your original algorithm in tact, but it really would be simpler to code and debug with some decomposition and abstraction. Good luck.

No problem. I had a quick go at decomposing this a bit (can't help myself). Hope this is also helpful for you: http://jsfiddle.net/powderflask/3bwcw1pz/ — powderflask, Sep 08 '15 at 17:17

score 0 · Answer 2 · answered Sep 07 '15 at 22:25

You can simply as following, so you don't have to write lot of code.

$(document).ready(function() {
      var counter = 470; //total length of routine in seconds
      var countDown = setInterval(function() {

        if (counter === 470) {
          setText("Jumping Jacks")
        } else if (counter === 440) {
          setText("Take a break");
        } else if (counter === 430) {
          setText("Lounges");
        } else if (counter === 400) {
          setText("Take a Break");
        } else if (counter === 390) {
          setText("Sit Ups");
        } else if (counter === 360) {
          setText("Take break");
        } else if (counter === 350) {
          setText("Plank");
        }
        // will add additional workouts & breaks
        else if (counter === 0) {
          console.log("Finished!!");
          clearInterval(countDown);
        }
        counter-- //decrease the counter each second
      }, 1000);
});

function setText(message) {
  return $("#routine").append("<p class='itemName'>" + message + "!</p>");
}

How to append a countdown that initializes after appending?

2 Answers2