JSFiddle - React, Tailwind, and code Playground

by bigdave

HTML

<h2>Stat Grinder</h2>
<p>Time Left: <span id="time_left"></span></p>
<p>Percentage Left: <span id="percent_left"></span>%</p>
<div id="done_holder"><div id="done_bar"></div></div>
<p>Made: $<span id="made"></span></p>

CSS

#done_holder, #done_bar {
    height: 6px;
}

#done_holder {
    width: 100%;
    border: 1px solid blue;
}

#done_bar {
    background-color: blue;
}

JavaScript

function calculate() {
    var d = new Date();
    var milliseconds = d.getMilliseconds();
    var seconds = d.getSeconds();
    var minutes = d.getMinutes();
    var hours = d.getHours();
    var current = hours*3600000+minutes*60000+seconds*1000+milliseconds;

    var START = 7*3600000;
    var DURATION = 9*3600000;
    var done = current-START;
    var left = DURATION-done;
    
    var m_leading_zero = '';
    if (parseInt((left%3600000)/60000, 10) < 10) {
        m_leading_zero = '0';
    } else {
        m_leading_zero = '';
    }
    
    var s_leading_zero = '';
    if (left%60000/1000 < 10) {
        s_leading_zero = '0';
    } else {
        s_leading_zero = '';
    }
    
    var formatted_left = parseInt(left/3600000, 10) + ':' + m_leading_zero + parseInt((left%3600000)/60000, 10) + ':' + s_leading_zero + parseInt((left%60000)/1000, 10) + ':' + milliseconds;
    $('#time_left').html(formatted_left);
    
    var percent_left = (1 - (done / DURATION)) * 100;
    $('#percent_left').html(percent_left.toPrecision(4));
    
    $('#done_bar').css('width', (100-percent_left)+'%');
    
    var made = 300*(1-(percent_left/100));
    $('#made').html(made.toFixed(2));
}

calculate();
setInterval(calculate, 1);