cferdinandi · June 26, 2024 23:09 · vabue · Mar 11, 2023 · cferdinandi · Mar 11, 2023
diff --git a/ding.mp3 b/ding.mp3
diff --git a/timer.html b/timer.html
 <!DOCTYPE html>
 <html>
 <head>
 	<title>Timer</title>

 	<style type="text/css">
 		body {
 			margin: 0 auto;
 			max-width: 40em;
 			width: 88%;
 		}

 		#app {
 			font-size: 2em;
 			font-weight: bold;
 		}
 	</style>
 </head>
 <body>

 	<h1>Timer</h1>

 	<div id="app" aria-live="polite">5</div>

 	<script>
 		// Get the #app element
 		let app = document.querySelector('#app');

 		// Track the count
 		let count = 5;

 		/**
 		 * Play the chime sound
 		 */
 		function playSound () {
 			let ding = new Audio('ding.mp3');
 			ding.play();
 		}

 		// Run a callback function once every second
 		let timer = setInterval(function () {

 			// Reduce count by 1
 			count--;

 			// Update the UI
 			if (count > 0) {
 				app.textContent = count;
 			} else {
 				app.textContent = '⏰';
 				clearInterval(timer);
 				playSound();
 			}

 		}, 1000);
 	</script>

 </body>
 </html>
	<!DOCTYPE html>
	<html>
	<head>
	<title>Timer</title>

	<style type="text/css">
	body {
	margin: 0 auto;
	max-width: 40em;
	width: 88%;
	}

	#app {
	font-size: 2em;
	font-weight: bold;
	}
	</style>
	</head>
	<body>

	<h1>Timer</h1>

	<div id="app" aria-live="polite">5</div>

	<script>
	// Get the #app element
	let app = document.querySelector('#app');

	// Track the count
	let count = 5;

	/**
	* Play the chime sound
	*/
	function playSound () {
	let ding = new Audio('ding.mp3');
	ding.play();
	}

	// Run a callback function once every second
	let timer = setInterval(function () {

	// Reduce count by 1
	count--;

	// Update the UI
	if (count > 0) {
	app.textContent = count;
	} else {
	app.textContent = '⏰';
	clearInterval(timer);
	playSound();
	}

	}, 1000);
	</script>

	</body>
	</html>