<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Flexbox Keyboard</title>
<link rel="stylesheet" href="keyboard.css">
</head>
<body>
<textarea id="output"></textarea>
<div class="keyboard">
<div class="row" id="row-0">
<button class="key">q</button>
<button class="key">w</button>
<button class="key">e</button>
<button class="key">r</button>
<button class="key">t</button>
<button class="key">y</button>
<button class="key">u</button>
<button class="key">i</button>
<button class="key">o</button>
<button class="key">p</button>
</div>
<div class="row" id="row-1">
<button class="key">a</button>
<button class="key">s</button>
<button class="key">d</button>
<button class="key">f</button>
<button class="key">g</button>
<button class="key">h</button>
<button class="key">j</button>
<button class="key">k</button>
<button class="key">l</button>
</div>
<div class="row" id="row-2">
<button class="key">z</button>
<button class="key">x</button>
<button class="key">c</button>
<button class="key">v</button>
<button class="key">b</button>
<button class="key">n</button>
<button class="key">m</button>
</div>
<div class="row" id="row-3">
<button class="key">␡</button>
<button class="key" id="spacebar"> </button>
<button class="key">␡ all</button>
</div>
</div>
<script>
let output = document.getElementById('output');
let keys = document.getElementsByClassName('key');
for (let keyElement of keys) {
let key = keyElement.textContent;
keyElement.addEventListener('click', function() {
switch (key) {
case '␡':
output.textContent = output.textContent.slice(0, output.textContent.length-1);
break;
case '␡ all':
output.textContent = '';
break;
default:
output.textContent += key;
}
});
}
</script>
</body>
</html>