JS Drumkit My Solution

JSdrumkit

   const keys = document.querySelectorAll('.key');
   const audioNodes = document.querySelectorAll('audio');
   
   
   function getDataKey(key) {
      let itemToAddClass;
      keys.forEach(dataKeyItem => {
          if (Number(dataKeyItem.dataset.key) === key) {
            itemToAddClass = dataKeyItem;
          }
      });
      return itemToAddClass;
    }

    function togglePlayingClass(itemToToggleOn) {
        itemToToggleOn.classList.toggle('playing');
        setTimeout(function() {
            itemToToggleOn.classList.toggle('playing');
        }, 100);
    }

    function getAudioNode(key) {
      let audioItemToReturn;
       audioNodes.forEach(audioItem => {
          if(Number(audioItem.dataset.key) === key) {
            audioItemToReturn = audioItem;
          }
       });
       return audioItemToReturn;
    }

    function playNote(key) {
        let keyToAddClass = getDataKey(key);
        togglePlayingClass(keyToAddClass);
        let audioToPlay = getAudioNode(key);
        audioToPlay.play();
    }

    document.addEventListener('keydown', function(e) {
      if (e.keyCode === 65) {
         playNote(e.keyCode);
      } else if (e.keyCode === 83) {
        playNote(e.keyCode);
      } else if (e.keyCode === 68) {
        playNote(e.keyCode);
      } else if (e.keyCode === 70) {
        playNote(e.keyCode);
      } else if (e.keyCode === 71) {
        playNote(e.keyCode);
      } else if (e.keyCode === 72) {
        playNote(e.keyCode);
      } else if (e.keyCode === 74) {
        playNote(e.keyCode);
      } else if (e.keyCode === 75) {
        playNote(e.keyCode);
      } else if (e.keyCode === 76) {
        playNote(e.keyCode);
      }
    });