JSFiddle - React, Tailwind, and code Playground
HTML
<div id="countup">
It's been
<p id="days">00</p>
<p class="timeRefDays">days</p>
<p id="hours">00</p>
<p class="timeRefHours">hours</p>
<p id="minutes">00</p>
<p class="timeRefMinutes">minutes</p>
<p id="seconds">00</p>
<p class="timeRefSeconds">second</p>
</div>
<div id="geld">
You've wasted:
$
<p id="Cents">00</p>
<p class="timeRefCents"></p>
of your employer's money
</div>
CSS
#countup p {
display: inline-block;
padding: 5px;
background: #FF111100;
margin: 0 0 20px;
}
#geld p {
display: inline-block;
padding: 5px;
background: #FF0000;
margin: 0 0 20px;
}
JavaScript
/*
* Basic Count Up from Date and Time
* Author: @mrwigster / trulycode.com
*/
window.onload=function() {
// Month,Day,Year,Hour,Minute,Second
// upTime('jan,01,2017,00:00:00'); // ****** Change this line example 'jan,01,2017,00:00:00'!
var month = new Array("jan", "feb", "mar", "apr", "may", "jun", "jul", "aug", "sep", "oct", "nov", "dec");
var today = new Date();
var hrs = today.getHours();
var min = today.getMinutes();
var sec = today.getSeconds();
var dd = today.getDate();
var mm = today.getMonth();
var currentMonth = month[mm];
var yyyy = today.getFullYear();
today = currentMonth + ',' + dd + ',' + yyyy + ',' + hrs + ':' + min + ':' + sec;
upTime(today);
}
var SalaryAnnual = prompt("Please enter your Annual Salary", "50000");
function upTime(countTo) {
SalaryWeekly= SalaryAnnual/52;
SalaryHourly= SalaryWeekly/40;
SalaryMinute= SalaryHourly/60;
SalarySecond= SalaryMinute/60;
SalaryMillisecond= SalarySecond/1000;
now = new Date();
countTo = new Date(countTo);
difference = (now-countTo);
days=Math.floor(difference/(60*60*1000*24)*1);
hours=Math.floor((difference%(60*60*1000*24))/(60*60*1000)*1);
mins=Math.floor(((difference%(60*60*1000*24))%(60*60*1000))/(60*1000)*1);
secs=Math.floor((((difference%(60*60*1000*24))%(60*60*1000))%(60*1000))/1000*1);
secsinfinite=(((difference%(60*60*1000*24))%(60*60*1000))%(60*1000))/1000*1;
salarysec=((difference/1000) * SalarySecond).toFixed(2);
salarydol=(((difference/1000) * SalarySecond)/100).toFixed(2);
document.getElementById('countup').setAttribute("uptime",days+':'+hours+':'+mins+':'+secs)
document.getElementById('days').firstChild.nodeValue = days;
document.getElementById('hours').firstChild.nodeValue = hours;
document.getElementById('minutes').firstChild.nodeValue = mins;
document.getElementById('seconds').firstChild.nodeValue = secs;
// document.getElementById('Dollars').firstChild.nodeValue = SalarySec;
...