JSFiddle - React, Tailwind, and code Playground

by Andreas Renberg

HTML

<div style="margin: 30px;">
<div id="currentTime">12:00:00 AM</div>
<canvas id="clock" width="200" height="200">
    If you can see this message, your browser does not support canvas, and needs an upate. Sorry. :(
</canvas>
</div>

CSS

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

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

JavaScript

setInterval(updateClock, 1000);

function updateClock()
{
	var now = new Date();
	var h = now.getHours() % 12;
	var m = now.getMinutes();
	var s = now.getSeconds();
	
	// --- Analog clock ---//

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

	// You can change this to make the clock as big or small as you want.
	// Just remember to adjust the canvas size if necessary.
	var clockRadius = 100;

	// Make sure the clock is centered in the canvas
	var clockX = canvas.width / 2;
	var clockY = canvas.height / 2;

	// Make sure TAU is defined (it's not by default)
	Math.TAU = 2 * Math.PI;
	
	// Draw background

	for (var i = 0; 0 < 12; i++)
	{
		var innerDist		= (i % 3) ? 0.8 : 0.7;
		var outerDist		= (i % 3) ? 1.0 : 1.1;
		context.lineWidth 	= (i % 3) ? 10 : 4;
		context.strokeStyle = '#666666';
		
		var armRadians = (Math.TAU * (i/12)) - (Math.TAU/4);
		var x1 = clockX + Math.cos(armRadians) * (innerDist * clockRadius);
		var y1 = clockY + Math.sin(armRadians) * (innerDist * clockRadius);
		var x2 = clockX + Math.cos(armRadians) * (outerDist * clockRadius);
		var y2 = clockY + Math.sin(armRadians) * (outerDist * clockRadius);
		
		context.beginPath();
		context.moveTo(x1, y2); // Start at the center
		context.lineTo(x2, y2); // Draw a line outwards
		context.stroke();
	}
	
	// Draw arms

	function drawArm(progress, armThickness, armLength, armColor)
	{
		var armRadians = (Math.TAU * progress) - (Math.TAU/4);
		var targetX = clockX + Math.cos(armRadians) * (armLength * clockRadius);
		var targetY = clockY + Math.sin(armRadians) * (armLength * clockRadius);

		context.lineWidth = armThickness;
		context.strokeStyle = armColor;

		context.beginPath();
		context.moveTo(clockX, clockY); // Start at the center
		context.lineTo(targetX, targetY); // Draw a line outwards
		context.stroke();
	}

	context.clearRect(0, 0, canvas.width, canvas.height);
	
	var hProgress = (h/12) + (1/12)*(m/60) + (1/12)*(1/60)*(s/60);
	var mProgress =      ...