boldrack · April 15, 2022 10:47 · boldrack · Apr 15, 2022 · boldrack · Apr 15, 2022
diff --git a/daty.html b/daty.html
 <!DOCTYPE html>
 <html>
 <head>
 	<meta charset="utf-8">
 	<meta name="viewport" content="width=device-width, initial-scale=1">
 	<title></title>
 	<style>
 		body {
 			min-height: 100vh;
 			display: flex;
 			justify-content: center;
 			align-items: center;
 		}
 		button {
 			width: 10rem;
 		}
 		.time-container {
 			display: flex;
 			flex-flow: column nowrap;
 			height: 10rem;
 		}
 		.timeholder {
 			display: block;
 			font-family: 'IBM Plex Sans', sans-serif;
 			text-align: center;
 		}
 	</style>
 </head>
 <body>
 	<div class="time-container">
 		<p class="timeholder"></p>
 		<button>Toggle</button>
 	</div>
 <script>
 	const timeholder = document.querySelector('.timeholder')
 	let hours12 = false

 	const updateTime = () => {
 		const newTime = new Intl.DateTimeFormat(
 			'en-US', 
 			{
 				hour: 'numeric', 
 				minute: 'numeric', 
 				second: 'numeric', 
 				hour12: hours12
 			}
 		).format(new Date());
 		timeholder.innerHTML = newTime;
 	}

 	// the timer 
 	setInterval(updateTime, 1000);

 	// attach the toggle to the button , we do not need to bind cos 
 	// the variable we're changing is also variable. a property of `window`
 	document.querySelector('button').addEventListener('click', function() {
 		hours12 = !hours12;
 	});

 </script>
 </body>
 </html>
	<!DOCTYPE html>
	<html>
	<head>
	<meta charset="utf-8">
	<meta name="viewport" content="width=device-width, initial-scale=1">
	<title></title>
	<style>
	body {
	min-height: 100vh;
	display: flex;
	justify-content: center;
	align-items: center;
	}
	button {
	width: 10rem;
	}
	.time-container {
	display: flex;
	flex-flow: column nowrap;
	height: 10rem;
	}
	.timeholder {
	display: block;
	font-family: 'IBM Plex Sans', sans-serif;
	text-align: center;
	}
	</style>
	</head>
	<body>
	<div class="time-container">
	<p class="timeholder"></p>
	<button>Toggle</button>
	</div>
	<script>
	const timeholder = document.querySelector('.timeholder')
	let hours12 = false

	const updateTime = () => {
	const newTime = new Intl.DateTimeFormat(
	'en-US',
	{
	hour: 'numeric',
	minute: 'numeric',
	second: 'numeric',
	hour12: hours12
	}
	).format(new Date());
	timeholder.innerHTML = newTime;
	}

	// the timer
	setInterval(updateTime, 1000);

	// attach the toggle to the button , we do not need to bind cos
	// the variable we're changing is also variable. a property of `window`
	document.querySelector('button').addEventListener('click', function() {
	hours12 = !hours12;
	});

	</script>
	</body>
	</html>