yunga/jsClock.html

## 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>