JSFiddle - React, Tailwind, and code Playground

by alexfromapex

HTML

<p style="float:left;">Money Saved: </p><b><p id="ds"  style="float:left;">$</p></b>
<div id="counter" style="float:left;"></div>
<script type="text/javascript">

var START_DATE = new Date("january 1, 2012 12:00:00"); // put in the starting date here
    
var INTERVAL = 1000; // savings per second
var INCREMENT = 0.005; // money saved per second
var START_VALUE = -50000; // configures proper savings calculation
var count = 0;
var msInterval;
    
function numberWithCommas(x) {
    return x.toString().replace(/\B(?=(\d{3})+(?!\d))/g, ",");
}
    
function formatCurrency(num) {
    num = isNaN(num) || num === '' || num === null ? 0.00 : num;
    return parseFloat(num).toFixed(2);
}


function updateMoney()
{
var now = new Date();
msInterval = INTERVAL * 1
count = parseInt((now - START_DATE)/msInterval) * INCREMENT + START_VALUE;
document.getElementById('counter').innerHTML = numberWithCommas(formatCurrency(count));
count += INCREMENT;
}
    
setInterval(updateMoney, msInterval);

</script>

CSS

#counter {margin:0px 0px 0px 0px;}
#ds {margin:0px 0px 0px 7px;}