JavaScript30 - 01 - JavaScript Drum Kit

При нажатии на клавишу на клавиатуре появляется звук, соответствующий данной клавише, и небольшая анимация, прописанная в css-правиле:

.playing {
  transform: scale(1.1);
  border-color: #ffc600;
  box-shadow: 0 0 1rem #ffc600;
}

Добавлению элементу key класса playing соответствует строка в js:

key.classList.add('playing');

Нам нужно связать нажатие клавиши клавиатуры с нашим html-кодом и проигрыванием определённого звука. Коды клавиш можно увидеть на этом сайте: http://keycod.es/ Нажмите любую клавишу, и увидите её код. Например, для буквы "А" (лат.) код клавиши 65.
Прописываем в html код:

I часть:

<div data-key="65" class="key">  A
      <span class="sound">clap</span>
 </div>

II часть:

<audio data-key="65" src="sounds/clap.wav"></audio>

В первой части кода ключ key="65" связал клавишу "А" с html кодом, во второй - привязал к ней звук, хранящийся по адресу src="sounds/clap.wav".

Подробнее об атрибуте data-* можно прочитать по ссылке: https://developer.mozilla.org/ru/docs/Web/Guide/HTML/Using_data_attributes Оттуда выясним, что на IE ниже 11 версии данный атрибут не поддерживается, а это означает, что данный сайт в этом браузере работать не будет.

Попробуем разобраться с js-кодом.

function removeTransition(e) {
    if (e.propertyName !== 'transform') return;
    e.target.classList.remove('playing');
  }

Функция принимает аргумент е - вероятно это и есть  один из div в html-коде, проверяет есть ли у него css-свойство transform и, если свойства нет, прекращает работу, а если свойство есть, убирает класс playing, в котором это свойство прописано.

Доступ к свойству элемента позволяет получить через propertyName

Непонятно, почему проверяется именно наличие свойства, а не класса при помощи

classList.contains.

Такой код тоже работает:

function removeTransition(e) {
      if (e.target.classList.contains('playing')) { 
          e.target.classList.remove('playing');
      }
          return;    
  }

Конструкция e.target нужна, чтобы произошло отследить элемент, на котором произошло событие подробнее

Здесь объяснение что это и зачем. Мы пытаемся вместо того, чтобы назначать обработчик событий для каждой кнопки отдельно, сделать единый обработчик для всех. При этом event.target используется для того, чтобы получить и подсветить элемент, на котором произошло событие.

Правда, разобраться с этим вовсе не так просто. Похоже, вариант "одно задание за один день"  не для меня.