Как сделать отзывчивую виртуальную клавиатуру?

Question

[D1ma5ta]

Сверстал виртуальную клавиатуру. Подскажите, как сделать что б по нажатию клавиши на клавиатуре, данная клавиша меняла цвет на виртуально клавиатуре. Желательно с минимальным количеством кода

<div class="keyboard">

      <div class="line">
        <div class="key">§</div>
        <div class="key">1</div>
        <div class="key">2</div>
        <div class="key">3</div>
        <div class="key">4</div>
        <div class="key">5</div>
        <div class="key">6</div>
        <div class="key">7</div>
        <div class="key">8</div>
        <div class="key">9</div>
        <div class="key">0</div>
        <div class="key">-</div>
        <div class="key">=</div>
        <div class="key backspace letter-key">Backspace</div>
      </div>

      <div class="line">
        <div class="key tab letter-key">Tab</div>
        <div class="key">q</div>
        <div class="key">w</div>
        <div class="key">e</div>
        <div class="key">r</div>
        <div class="key">t</div>
        <div class="key">y</div>
        <div class="key">u</div>
        <div class="key">i</div>
        <div class="key">o</div>
        <div class="key">p</div>
        <div class="key">[</div>
        <div class="key">]</div>
      </div>

      <div class="line">
        <div class="key capslock letter-key">Caps Lock</div>
        <div class="key">a</div>
        <div class="key">s</div>
        <div class="key">d</div>
        <div class="key">f</div>
        <div class="key">g</div>
        <div class="key">h</div>
        <div class="key">j</div>
        <div class="key">k</div>
        <div class="key">l</div>
        <div class="key">;</div>
        <div class="key">'</div>
        <div class="key">\</div>
      </div>

      <div class="line">
        <div class="key lshift letter-key">Shift</div>
        <div class="key">`</div>
        <div class="key">z</div>
        <div class="key">x</div>
        <div class="key">c</div>
        <div class="key">v</div>
        <div class="key">b</div>
        <div class="key">n</div>
        <div class="key">m</div>
        <div class="key">,</div>
        <div class="key">.</div>
        <div class="key">/</div>
        <div class="key rshift letter-key">Shift</div>
      </div>

      <div class="line">
        <div class="key letter-key">fn</div>
        <div class="key letter-key">control</div>
        <div class="key letter-key">option</div>
        <div class="key command letter-key">command</div>
        <div class="key space letter-key">Space</div>
        <div class="key command letter-key">command</div>
        <div class="key letter-key">option</div>
      </div>

      <div class="key enter letter-key">Enter</div>


      <div class="arrow">
        <div class="key arrow-left letter-key">&larr;</div>
        <div class="key arrow-top letter-key">&#8593;</div>
        <div class="key arrow-bottom letter-key">&#8595;</div>
        <div class="key arrow-right letter-key">&#8594;</div>
      </div>
    </div>

.keyboard {
  border: 1px solid slategray;
  padding: 5px;
  border-radius: 5px;
  position: relative;
  width: 835px;
  margin: 0 auto;
}

.line::after {
  content: "";
  display: block;
  clear: both;
}

.key {
  float: left;
  width: 40px;
  height: 40px;
  border: 1px solid slategray;
  border-radius: 4px;
  margin: 3px;
  padding: 4px;
  text-align: center;
  display: flex;
  justify-content: center;
  align-items: center;
  text-transform: uppercase;
}

.letter-key {
  text-transform: lowercase;
}

.backspace {
  width: 77px;
}

.tab {
  width: 60px;
}

.capslock {
  width: 60px;
}

.lshift {
  width: 100px;
}

.rshift {
  width: 72px;
}

.command {
  width: 55px;
}

.space {
width: 283px;
}

.enter {
  position: absolute;
  right: 20px;
  top: 61px;
  width: 56px;
  height: 96px;
}

.arrow {
  position: absolute;
  top: 229px;
  right: 4px;
}

.arrow-left {
  position: absolute;
  top: 0px;
  right: 115px;
}

.arrow-right {
  position: absolute;
  top: 1px;
  right: 0px;
}

.arrow-top {
  height: 10px;
  position: absolute;
  top: 1px;
  right: 58px;
}

.arrow-bottom {
  height: 10px;
  position: absolute;
  top: 28px;
  right: 58px;
}

.key:hover {
  color: #fff;
  background-color: slategray;
  cursor: pointer;
}

Comments

[Вадим]

> отзывчивую виртуальную клавиатуру
> div div div div div div div div div div

:`(

Answer 1

[historydev]

.active {
  color: red;
}

<div>a</div>
<div>b</div>
<div>c</div>
<div>d</div>
<div>e</div>

document.onkeydown = (e) => {
	document.querySelectorAll('div').forEach(el => {
  	if(el.textContent === e.key.toLowerCase()) {
    	el.classList.add('active');
    } else {
    	el.classList.remove('active');
    }
  })
}