index.js

var numberOfDrumButtons = document.querySelectorAll(".drum").length;

for (var i=0; i<numberOfDrumButtons; i++){
    document.querySelectorAll(".drum")[i].addEventListener("click", handleClick);
}
document.addEventListener("keydown", handleKey)


function handleClick(){
    var buttonInnerHTML = this.innerHTML;
    switch(buttonInnerHTML){
        case "w":
            var audio = new Audio('sounds/tom-1.mp3');
            audio.play();
            break;

        case "a":
            var audio = new Audio('sounds/tom-2.mp3');
            audio.play();
            break;

        case "s":
            var audio = new Audio('sounds/crash.mp3');
            audio.play();
            break;

        case "d":
            var audio = new Audio('sounds/snare.mp3');
            audio.play();
            break;

        case "j":
            var audio = new Audio('sounds/tom-3.mp3');
            audio.play();
            break;
    
        case "k":
            var audio = new Audio('sounds/tom-4.mp3');
            audio.play();
            break;

        case "l":
            var audio = new Audio('sounds/kick-bass.mp3');
            audio.play();
            break;

    }
    buttonAnimation(buttonInnerHTML)
}



function handleKey(event){
    switch(event.key){
        case "w":
            var audio = new Audio('sounds/tom-1.mp3');
            audio.play();
            break;

        case "a":
            var audio = new Audio('sounds/tom-2.mp3');
            audio.play();
            break;

        case "s":
            var audio = new Audio('sounds/crash.mp3');
            audio.play();
            break;

        case "d":
            var audio = new Audio('sounds/snare.mp3');
            audio.play();
            break;

        case "j":
            var audio = new Audio('sounds/tom-3.mp3');
            audio.play();
            break;
    
        case "k":
            var audio = new Audio('sounds/tom-4.mp3');
            audio.play();
            break;

        case "l":
            var audio = new Audio('sounds/kick-bass.mp3');
            audio.play();
            break;

    }

    buttonAnimation(event.key)


}


function buttonAnimation(currentKey){
    var activeButton = document.querySelector("." + currentKey);
    activeButton.classList.add("pressed");
    setTimeout(function(){activeButton.classList.remove("pressed")},100)
}