index.js

// Detecting button press

for (var i = 0; i < document.querySelectorAll(".drum").length; i ++ ){

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


// Detecting Keyboard press

document.addEventListener("keypress", function(event) {
    playSound(event.key);
    buutonAnimation(event.key);
});


// Sound player

function playSound(currentKey) {
    switch (currentKey) {
        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/tom-3.mp3");
            audio.play();
            break;
        case "d":
            var audio = new Audio("./sounds/tom-4.mp3");
            audio.play();
            break;
        case "j":
            var audio = new Audio("./sounds/snare.mp3");
            audio.play();
            break;
        case "k":
            var audio = new Audio("./sounds/crash.mp3");
            audio.play();
            break;
        case "l":
            var audio = new Audio("./sounds/kick-bass.mp3");
            audio.play();
            break;
        default:
            alert("You might have pressed the wrong btton!");
            console.log(buttonInnerHTML);
    }
}


// Button animation
function buutonAnimation (currentKey) {
    var activeButton = document.querySelector("." + currentKey);
    activeButton.classList.add("pressed");

    setTimeout(function() {
        activeButton.classList.remove("pressed");
    }, 100);
}