Change circle background
Press a key (r, g, b, y, p or o) to change the color of this circle.
lightgray
const circle = document.getElementById('circle');
const keys = [
{ code: 'KeyR', color: 'indianred' },
{ code: 'KeyG', color: 'palegreen' },
{ code: 'KeyB', color: 'lightblue' },
{ code: 'KeyY', color: 'lightyellow' },
{ code: 'KeyP', color: 'mediumpurple' },
{ code: 'KeyO', color: 'orange' },
];
// add event listener on keydown
window.addEventListener('keydown', (e) => {
// e.code returns the code of the key pressed
const keyHitCode = e.code;
console.log('keyHitCode', keyHitCode);
const keyHit = keys.find((key) => key.code === keyHitCode);
// if the keycode is in keys[], change the background color
if (keyHit) {
circle.style.backgroundColor = keyHit.color;
circle.innerText = keyHit.color;
}
});