yunga · September 1, 2022 18:32
diff --git a/jsClock.html b/jsClock.html
 <!DOCTYPE html>

 <title>Javascript Clock Example</title>

 <style>
 	body {
 		font-family:           Monospace;
 		font-weight:           600;
 		font-size:             calc(100vw / 5.5);
 		-webkit-text-stroke:   calc(100vw / 200) #000;

 		width:                 100vw;
 		height:                100vh;
 		margin:                0;

 		display:               flex;
 		align-items:           center;
 		justify-content:       center;
 	}
 </style>

 <p id="clock">

 <script>
 	let clock = document.getElementById( `clock` );

 	let click = 0;
 	document.body.addEventListener( `click`, () => click++ );

 	const updateClock = () => {
 		let date    = new Date();
 		let time    = [ ( date.getHours() + click ) % 24, date.getMinutes(), date.getSeconds() ];
 		let hue     = (   time[ 0 ] * 3600              + time[ 1 ] * 60   + time[ 2 ]         ) / 240;
 		let cos     = Math.cos( hue * Math.PI / 180 );

 		clock.innerText = time.map( n => String( n ).padStart( 2, `0` ) ).join( `:` );

 		let gradX   = hue * 100 / 360;
 		let gradY   = 50 + 40 * cos;
 		let gradLum = 50 - 25 * cos;
 		let color1  = `hsl( ${ hue -  30 } 100% 50%)`;
 		let color2  = `hsl( ${ hue +  30 } 100% ${ gradLum }%)`;

 		document.body.style.color           = `hsl( ${ hue + 180 } 100% 50%)`;
 		document.body.style.backgroundColor = `hsl( ${ hue       } 100% 50%)`;
 		document.body.style.backgroundImage = `radial-gradient(circle at left ${ gradX }vw top ${ gradY }vh, #FFF 0%, ${ color1 } 5%, ${ color2 } 100%)`;
 	};

 	setInterval( updateClock, 1000 );
 </script>
	<!DOCTYPE html>

	<title>Javascript Clock Example</title>

	<style>
	body {
	font-family: Monospace;
	font-weight: 600;
	font-size: calc(100vw / 5.5);
	-webkit-text-stroke: calc(100vw / 200) #000;

	width: 100vw;
	height: 100vh;
	margin: 0;

	display: flex;
	align-items: center;
	justify-content: center;
	}
	</style>

	<p id="clock">

	<script>
	let clock = document.getElementById( `clock` );

	let click = 0;
	document.body.addEventListener( `click`, () => click++ );

	const updateClock = () => {
	let date = new Date();
	let time = [ ( date.getHours() + click ) % 24, date.getMinutes(), date.getSeconds() ];
	let hue = ( time[ 0 ] * 3600 + time[ 1 ] * 60 + time[ 2 ] ) / 240;
	let cos = Math.cos( hue * Math.PI / 180 );

	clock.innerText = time.map( n => String( n ).padStart( 2, `0` ) ).join( `:` );

	let gradX = hue * 100 / 360;
	let gradY = 50 + 40 * cos;
	let gradLum = 50 - 25 * cos;
	let color1 = `hsl( ${ hue - 30 } 100% 50%)`;
	let color2 = `hsl( ${ hue + 30 } 100% ${ gradLum }%)`;

	document.body.style.color = `hsl( ${ hue + 180 } 100% 50%)`;
	document.body.style.backgroundColor = `hsl( ${ hue } 100% 50%)`;
	document.body.style.backgroundImage = `radial-gradient(circle at left ${ gradX }vw top ${ gradY }vh, #FFF 0%, ${ color1 } 5%, ${ color2 } 100%)`;
	};

	setInterval( updateClock, 1000 );
	</script>