// Js Play HTML audio element : https://www.w3schools.com/tags/av_met_play.asp
// audio.play()

let keys = document.getElementsByClassName('key');
let audioFiles = document.getElementsByTagName('audio');

document.addEventListener('keydown', function(e) {
    console.log(e.key)
    if (e.key == 'q') {
        keys[0].style.border = "solid";
        keys[0].style.borderColor = "red";
        audioFiles[0].play()
        setTimeout(function() { keys[0].style.border = "none"; }, 200);
    }
    if (e.key == 's') {
        keys[1].style.border = "solid";
        keys[1].style.borderColor = "red";
        audioFiles[1].play()
        setTimeout(function() { keys[1].style.border = "none"; }, 200);
    }
    if (e.key == 'd') {
        keys[2].style.border = "solid";
        keys[2].style.borderColor = "red";
        audioFiles[2].play()
        setTimeout(function() { keys[2].style.border = "none"; }, 200);
    }
    if (e.key == 'f') {
        keys[3].style.border = "solid";
        keys[3].style.borderColor = "red";
        audioFiles[3].play()
        setTimeout(function() { keys[3].style.border = "none"; }, 200);
    }
    if (e.key == 'g') {
        keys[4].style.border = "solid";
        keys[4].style.borderColor = "red";
        audioFiles[4].play()
        setTimeout(function() { keys[4].style.border = "none"; }, 200);
    }
    if (e.key == 'h') {
        keys[5].style.border = "solid";
        keys[5].style.borderColor = "red";
        audioFiles[5].play()
        setTimeout(function() { keys[5].style.border = "none"; }, 200);
    }
    if (e.key == 'j') {
        keys[6].style.border = "solid";
        keys[6].style.borderColor = "red";
        audioFiles[6].play()
        setTimeout(function() { keys[6].style.border = "none"; }, 200);
    }
    if (e.key == 'k') {
        keys[7].style.border = "solid";
        keys[7].style.borderColor = "red";
        audioFiles[7].play()
        setTimeout(function() { keys[7].style.border = "none"; }, 200);
    }
    if (e.key == 'l') {
        keys[8].style.border = "solid";
        keys[8].style.borderColor = "red";
        audioFiles[8].play()
        setTimeout(function() { keys[8].style.border = "none"; }, 200);
    }

})

for (let x = 0; x < keys.length; x++) {
    keys[x].addEventListener('click', function() {
        keys[x].style.border = "solid";
        keys[x].style.borderColor = "red";
        audioFiles[x].play()
        setTimeout(function() { keys[x].style.border = "none"; }, 200);
    })
}