convert time

converts time from milliseconds to HR:MN:SC

by smingers

HTML

<h1>Tartine Basic Country Bread</h1>

<div class="timer">
    <button class="prev" disabled><<</button>
    <button class="play">></button>
    <button class="pause" disabled>||</button>
    <button class="add" disabled>+</button>
    <button class="next" disabled>>></button>
    
    <h2 class="time">Time: <span class="display"></span></h2>

    <p class="step">to complete this recipe</p>
</div>

CSS

h1 {
    color: #333;
    font-family: sans-serif;
    margin-left: 50px;
}

.timer {
    color: #333;
    font-family: sans-serif;
    margin: 25px;
    background-color: hsl(0, 0%, 80%);
    border-radius: 10px;
    box-sizing: border-box;
    padding: 25px;
}
/* helpfully copied from bootstrap */
.current {
    border-color: #66afe9;
    outline: 0;
    -webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, .075), 0 0 8px rgba(102, 175, 233, 0.6);
    box-shadow: inset 0 1px 1px rgba(0, 0, 0, .075), 0 0 8px rgba(102, 175, 233, 0.6);
}
.timesUp {
    border-color: #953b39;
    -webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 6px #d59392;
    box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 6px #d59392;
}

JavaScript

var zeroTimer; // counts down the time (invisibly) using setTimeout
var countDown; // counts down the time (visibly) using setInterval
var currentStep = 0; // current step in the recipe, set to zero by default
var currentStepSelector = "'#" + (currentStep + 1) + "'"; // for use in changing classes for current step
var paused;  // assigned boolean value if timer paused (true) or not (false)
// var elapsed; // TEST
// var remaining; // TEST
// var startTime; // TEST
// var timeAtPause; // TEST


// times, in ms, for each step in the Tartine Basic Country Bread recipe
var recipeStepTimes = [5000 /*for testing purposes only*/ , 43200000, null, null, null, 2400000, null, null, 1800000, 1800000, 1800000, 1800000, 1800000, 1800000, 1800000, 1800000, null, 1800000, null, 9600000, null, 1200000, 1200000, null, 600000, 1200000, 1200000, null];


// simple calculator to convert milliseconds into human readable format
var convertedTime = function (milliseconds) {
    // converts time into hours, minutes, seconds
    var absMilliseconds = Math.abs(milliseconds);
    var hours = Math.floor(absMilliseconds / 3600000);
    var minutes = Math.floor((absMilliseconds % 3600000) / 60000);
    var seconds = Math.floor(((absMilliseconds % 3600000) % 60000) / 1000);
    var timeDisplay;

    // determines whether time should appear positive or negative
    if (Math.floor(milliseconds) > -1000) {
        timeDisplay = ("0" + hours).slice(-2) + ":" + ('0' + minutes).slice(-2) + ":" + ("0" + seconds).slice(-2);
    } else {
        timeDisplay = "-" + ("0" + hours).slice(-2) + ":" + ('0' + minutes).slice(-2) + ":" + ("0" + seconds).slice(-2);
        }

    return timeDisplay;
};


//calcuate sum of all times in the recipeStepTimes array, then display it
var totalTime = 0;
for (i = 0; i < recipeStepTimes.length; i++) {
    totalTime += recipeStepTimes[i];
}

$('.display').text(convertedTime(totalTime));


// function that combines setTimer with setInterval
startCountdown = function() {
  ...