Exercise Countdown
Answer for SE question http://stackoverflow.com/questions/32446524/how-to-append-a-countdown-that-initializes-after-appending
HTML
<div class="countdown">
</div>
<div class="routine">
</div>
JavaScript
var counter = 47; //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 === 46) {
$(".routine").append("<p class='itemName'>Jumping Jacks!</p>");
secondsLeft = 2;
}
else if (counter === 44) {
$(".routine").empty().append("<p class='itemName'>Take a break!</p>");
secondsLeft = 1;
}
else if (counter === 43) {
$(".routine").empty().append("<p class='itemName'>Lounges!</p>");
secondsLeft = 3;
}
else if (counter === 40) {
$(".routine").empty().append("<p class='itemName'>Take a Break!</p>");
secondsLeft = 1;
}
else if (counter === 39) {
$(".routine").empty().append("<p class='itemName'>Sit Ups!</p>");
secondsLeft = 3;
}
else if (counter === 36) {
$(".routine").empty().append("<p class='itemName'>Take break!</p>");
secondsLeft = 1;
}
else if (counter === 35) {
$(".routine").empty().append("<p class='itemName'>Plank!</p>");
secondsLeft = 35;
}
// will add additional workouts & breaks
else if (counter === 0) {
$(".routine").empty().append("Finished!!");
clearInterval(countDown);
}
}, 1000);