Homework
Flexbox keyboard
Style this HTML keyboard using flexboxes.
Ensure the following:
the keys are square
the keys shrink as the width of the browser window is changed
the spacebar is long
the rows roughly line up with a real keyboard (e.g., the Q is leftmost, the A is slightly to the right, the Z is slightly more to the right)
Optional extensions (pick and choose your favourites):
style the keyboard to look like your keyboard
add in a number row
generate the key HTML dynamically using JavaScript
show your own custom keyboard layout
add in shift keys
make them work
highlight keys (e.g., make them green) which have not appeared in the output textarea yet
<!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>Last updated
Was this helpful?