script.js

let crashRide = document.querySelector('#crash-ride');
let hiHatTop = document.querySelector('#hihat-top');

const animationCrashOrRide = () => {
    crashRide.style.transform = 'rotate(0deg) scale(1.5)'
};

const animateHiHatClosed = () => {
    hiHatTop.style.top = '171px'
}

window.addEventListener('keydown', (event) => {
    let code = event.keyCode;
    let keyELement = document.querySelector(`div[data-key="${code}"]`);
    
    if(!keyELement) return;

    let audio = document.querySelector(`audio[data-key="${code}"]`);
    audio.currentTime = 0;
    audio.play();

    switch(code){
        case 69:
        case 82:
            animationCrashOrRide();
            break;

        case 75:
        case 73:
            animateHiHatClosed();
            break;
    }
    keyELement.classList.add('playing');

});

const removeCrashOrRide = e => {
    if(e.propertyName !== 'transform') return;

    e.target.style.transform = 'rotate(-7.2deg) scale(1.5)';

}

const removeHiHatClosed = e => {
    if(e.propertyName !== 'top') return;

    e.target.style.top = '166px';
}

const removeKeyTransition = e => {
    if(e.propertyName !== 'transform') return;
    e.target.classList.remove('playing')
}

let drumKeys = document.querySelectorAll('.key');
drumKeys.forEach((key) => {
    key.addEventListener('transitioned', removeKeyTransition)
});

crashRide.addEventListener('transitionend', removeCrashOrRide);
hiHatTop.addEventListener('transitionend', removeHiHatClosed);