JSFiddle - React, Tailwind, and code Playground

by Andreas Renberg

HTML

<span id="currentTime"></span>
<canvas id="canvas" width="200" height="200">
    
</canvas>

CSS

#currentTime {
    font-weight: bold;
    display: block;
    text-align: center;
    width: 200px;
}

#canvas {
    border:1px solid #000000;
    padding: 10px;
}

JavaScript

var t=setInterval(tick,1000);
function tick() {
    
var now = new Date();
var h = now.getHours() % 12; //Otherwise, returns 24 hour time
var m = now.getMinutes();
var s = now.getSeconds();

var sAngle = s * (1/60);
var mAngle = m * (1/60) + sAngle * (1/60);
var hAngle = h * (1/12) + mAngle * (1/60);

var timeStr = String(h) + ":" + String(m) + ":" + String(s) + " " + ( (h>12)?"PM":"AM" );
document.getElementById("currentTime").innerHTML = timeStr;

var canvas = document.getElementById("canvas");
var graphics = canvas.getContext("2d");

Math.TAU = Math.PI * 2;

var clockWidth = canvas.width;
var clockHeight = canvas.height;
function drawHand(radianAngle, armThickness, armLength, armColor)
{
    graphics.lineWidth = armThickness;
    graphics.strokeStyle = armColor;
    
    var targetX = Math.cos(radianAngle) * (clockWidth/2) * armLength;
    var targetY = Math.sin(radianAngle) * (clockHeight/2) * armLength;
    
    graphics.beginPath();
    graphics.moveTo(clockWidth/2, clockHeight/2);
    graphics.lineTo(clockWidth/2 + targetX, clockHeight/2 + targetY);
    graphics.stroke();
}

graphics.clearRect(0, 0, canvas.width, canvas.height);
drawHand(Math.TAU * hAngle - (Math.TAU/4), 10, 1/2, '#000000');
drawHand(Math.TAU * mAngle - (Math.TAU/4), 4, 3/4, '#000000');
drawHand(Math.TAU * sAngle - (Math.TAU/4), 2, 1, '#FF0000');

}