index.js

for(var i=0; i<7; i++){

    document.querySelectorAll(".drum")[i].addEventListener("click", function(){
        var buttonInnerHTML = this.innerHTML;
        makeSound(buttonInnerHTML);
        buttonAnimation(buttonInnerHTML);
    });

}

document.addEventListener("keypress", function(event){     // this function activate the keyboard keys
    makeSound(event.key);
    buttonAnimation(event.key);
})


// document.querySelector("button").addEventListener("click", handleClick)

// document.getElementsByClassName("set").addEventListener("click", handleClick)

// function handleClick(){
//     var audio = new Audio("sounds/tom-1.mp3");
//     audio.play();

// }

function makeSound(key) {                                            // function to make sound

    switch (key) {
      case "w":
        var tom1 = new Audio("sounds/tom-1.mp3");
        tom1.play();
        break;
  
      case "a":
        var tom2 = new Audio("sounds/tom-2.mp3");
        tom2.play();
        break;
  
      case "s":
        var tom3 = new Audio('sounds/tom-3.mp3');
        tom3.play();
        break;
  
      case "d":
        var tom4 = new Audio('sounds/tom-4.mp3');
        tom4.play();
        break;
  
      case "j":
        var snare = new Audio('sounds/snare.mp3');
        snare.play();
        break;
  
      case "k":
        var crash = new Audio('sounds/crash.mp3');
        crash.play();
        break;
  
      case "l":
        var kick = new Audio('sounds/kick-bass.mp3');
        kick.play();
        break;
  
  
      default: console.log(key);
  
    }
  }

  function buttonAnimation(currentKey){              // function to make animation on clicked button
      var activeButton = document.querySelector("."+ currentKey);
      activeButton.classList.add("pressed");

      setTimeout(function(){                        // function to bring back to normal after animation 
          activeButton.classList.remove("pressed");
      }, 120);
  }