JSFiddle - React, Tailwind, and code Playground
by AaronJohnson
HTML
<!DOCTYPE html>
<html>
<h1 style="text-align:center;">Power Hour</h1>
<body>
<p>
<style type="text/css">
body {
margin:0px;
padding:0px;
background-color:#8B0000;
}
h1 {
color:#FFF;
font-family:Arial, Helvetica, sans-serif;
}
.clock {
position: relative;
}
.val {
margin:0;
position: absolute;
top:0;
left:0;
width:100%;
height:100%;
line-height: 122px;
font-family: Arial, Helvetica, sans-serif;
font-size: 35px;
color:#FFF;
font-weight: bold;
text-align: center;
}
.text {
font-family: Arial, Helvetica, sans-serif;
font-size: 14px;
font-weight: bold;
color:#FFF;
background:#000000;
text-align: center;
text-transform: uppercase;
}
</style>
<script>
//Set Initial Count
var secCountFix=0;
var minCountFix=0;
var hrCountFix=1;
var dayCountFix=0;
//Set Max Count
var secCountReset=59;
var minCountReset=59;
var hrCountReset=1;
var dayCountReset=dayCountFix;
//timer:- tirgger in ms
var speed=1000;
var secCount=secCountFix;
var minCount=minCountFix;
var hrCount=hrCountFix;
var dayCount=dayCountFix;
var unitCount_sec=2/secCountFix;
var unitCount_min=2/minCountFix;
var unitCount_hr=2/hrCountFix;
var unitCount_day=2/dayCountFix;
var globCount_sec=0,globCount_min=0,globCount_hr=0,globCount_day=0;
var canvas_sec,ctx_sec;
var canvas_min,ctx_min;
var canvas_hr,ctx_hr;
var canvas_day,ctx_day;
var redirectCount=0;
function init(){
document.getElementById("timeSec").innerHTML=secCountFix;
document.getElementById("timeMin").innerHTML=minCountFix;
document.getElementById("timeHr").innerHTML=hrCountFix;
document.getElementById("timeDay").innerHTML=dayCountFix;
//Sec
canvas_sec=document.getElementById("canvas_sec");
ctx_sec=canvas_sec.getContext("2d");
ctx_sec.beginPath();
...