yortuc/1-drum-machine.html

## 1-drum-machine.html
<html>
	<head>
		<title>Drum Machine</title>
		<style>
			div.Key{
				display: inline-block;
				margin-right: 10px;
				border:1px solid #ccc;
				background-color: #efefef;
				border-radius: 3px;
				font-size: 24px;
				color: black;
				width: 60px;
				padding: 10px 0;
				text-align: center;
				transition: all 0.07s;
			}
			div.Key.Playing{
				background-color: yellow;
				transform: scale(1.1);
			}
			div.Key > span{
				color: orange;
				text-transform: uppercase;
				font-size: 12px;
				display: block;
			}
		</style>
	</head>

	<body>

		<div class="Key" data-key="65">A <span>Clap</span></div>
		<div class="Key" data-key="83">S <span>Hihat</span></div>
		<div class="Key" data-key="68">D <span>Kick</span></div>
		<div class="Key" data-key="70">F <span>Openhat</span></div>
		<div class="Key" data-key="71">G <span>Boom</span></div>
		<div class="Key" data-key="72">H <span>Ride</span></div>
		<div class="Key" data-key="74">J <span>Snare</span></div>
		<div class="Key" data-key="75">K <span>Tom</span></div>
		<div class="Key" data-key="76">L <span>Tink</span></div>

		<audio data-key="65" src="sounds/clap.wav"></audio>
		<audio data-key="83" src="sounds/hihat.wav"></audio>
		<audio data-key="68" src="sounds/kick.wav"></audio>
		<audio data-key="70" src="sounds/openhat.wav"></audio>
		<audio data-key="71" src="sounds/boom.wav"></audio>
		<audio data-key="72" src="sounds/ride.wav"></audio>
		<audio data-key="74" src="sounds/snare.wav"></audio>
		<audio data-key="75" src="sounds/tom.wav"></audio>
		<audio data-key="76" src="sounds/tink.wav"></audio>

		<script>
			function playSound(event) {
				console.log(event.keyCode)
				const audio = document.querySelector(`audio[data-key="${event.keyCode}"]`);
				const key = document.querySelector(`div[data-key="${event.keyCode}"]`);
				if(!audio) return;
				audio.currentTime = 0;
				audio.play();
				key.classList.add("playing");
			}

			window.addEventListener("keydown", playSound)

			function transitionEnd(e) {
				if(e.propertyName !== "transform") return;
				e.target.classList.remove("playing");
			}

			document
				.querySelectorAll(".Key")
				.forEach(k=> k.addEventListener("transitionend", transitionEnd))
		</script>

	</body>
</html>
	<html>
	<head>
	<title>Drum Machine</title>
	<style>
	div.Key{
	display: inline-block;
	margin-right: 10px;
	border:1px solid #ccc;
	background-color: #efefef;
	border-radius: 3px;
	font-size: 24px;
	color: black;
	width: 60px;
	padding: 10px 0;
	text-align: center;
	transition: all 0.07s;
	}
	div.Key.Playing{
	background-color: yellow;
	transform: scale(1.1);
	}
	div.Key > span{
	color: orange;
	text-transform: uppercase;
	font-size: 12px;
	display: block;
	}
	</style>
	</head>

	<body>

	<div class="Key" data-key="65">A <span>Clap</span></div>
	<div class="Key" data-key="83">S <span>Hihat</span></div>
	<div class="Key" data-key="68">D <span>Kick</span></div>
	<div class="Key" data-key="70">F <span>Openhat</span></div>
	<div class="Key" data-key="71">G <span>Boom</span></div>
	<div class="Key" data-key="72">H <span>Ride</span></div>
	<div class="Key" data-key="74">J <span>Snare</span></div>
	<div class="Key" data-key="75">K <span>Tom</span></div>
	<div class="Key" data-key="76">L <span>Tink</span></div>

	<audio data-key="65" src="sounds/clap.wav"></audio>
	<audio data-key="83" src="sounds/hihat.wav"></audio>
	<audio data-key="68" src="sounds/kick.wav"></audio>
	<audio data-key="70" src="sounds/openhat.wav"></audio>
	<audio data-key="71" src="sounds/boom.wav"></audio>
	<audio data-key="72" src="sounds/ride.wav"></audio>
	<audio data-key="74" src="sounds/snare.wav"></audio>
	<audio data-key="75" src="sounds/tom.wav"></audio>
	<audio data-key="76" src="sounds/tink.wav"></audio>

	<script>
	function playSound(event) {
	console.log(event.keyCode)
	const audio = document.querySelector(`audio[data-key="${event.keyCode}"]`);
	const key = document.querySelector(`div[data-key="${event.keyCode}"]`);
	if(!audio) return;
	audio.currentTime = 0;
	audio.play();
	key.classList.add("playing");
	}

	window.addEventListener("keydown", playSound)

	function transitionEnd(e) {
	if(e.propertyName !== "transform") return;
	e.target.classList.remove("playing");
	}

	document
	.querySelectorAll(".Key")
	.forEach(k=> k.addEventListener("transitionend", transitionEnd))
	</script>

	</body>
	</html>