JSFiddle - React, Tailwind, and code Playground

by marioluevanos

HTML

<img id='dog' src="https://cdn.pixabay.com/photo/2017/09/25/13/12/cocker-spaniel-2785074_1280.jpg"/>

<img id='cat' src="https://i.guim.co.uk/img/media/26392d05302e02f7bf4eb143bb84c8097d09144b/446_167_3683_2210/master/3683.jpg?width=700&quality=45&auto=format&fit=max&dpr=2&s=dda1a524f12b7fd34672fa2626f45ae5"/>

<pre id="key"></pre>

CSS

img {
  width: 100px;
  display: none;
}

pre {
  position: absolute;
  bottom: 0;
  left: 0;
  background: black;
  color: yellow;
}

pre:before {
  content: 'Key Pressed: '
}

JavaScript

const imageIds = [{
    id: 'dog',
    key: 'A'
}, {
    id: 'cat',
    key: 'B'
}];

document.addEventListener('keydown', onKeyDown);

function onKeyDown(event) {
   const {key} = event;
   imageIds.forEach(img => toggleImage(key, img));

	// Log to the document
  document.getElementById('key').innerHTML = key;
} 

function toggleImage(key,  img) {
    const imageEl = document.getElementById(img.id);
   if (key === img.key) imageEl.style.display = imageEl.style.display === 'block' ? 'none' : 'block';
}