sz.js

let buttons = document.querySelectorAll(".container").length;

for (let i = 0; i < buttons; i++) {

    document.querySelectorAll(".container")[i].addEventListener("click", function () {

        var buttonInnerHTML = this.innerHTML;

        sounds(buttonInnerHTML);

        buttonAnimation(buttonInnerHTML);

    });

}

document.addEventListener("keypress", function (event) {

    sounds(event.tap);

    buttonAnimation(event.tap);

});


function sounds(tap) {

    switch (tap) {
        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(tap);

    }
}


function buttonAnimation(currentKey) {

    var activeButton = document.querySelector("." + currentKey);

    activeButton.classList.add("beat");

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

}