const drumPad = document.querySelectorAll(".drum-pad");
const display = document.getElementById("display");

function playDrum(eachDrum) {
  const audioForPlay = eachDrum.querySelector("audio");
  audioForPlay.play();
}


drumPad.forEach((eachDrum) => {
  eachDrum.addEventListener("click", () => {
    playDrum(eachDrum);
    display.textContent = eachDrum.dataset.name;
  })
})


document.addEventListener("keydown", (event) => {
    event.preventDefault();
    drumPad.forEach((eachDrum)=>{
    const audioForPlay = eachDrum.querySelector("audio");
    if (event.key === audioForPlay.id || event.key === audioForPlay.id.toLowerCase()) {
      audioForPlay.play();
      display.textContent = eachDrum.dataset.name;
    }
    })
})