window.addEventListener("load", () => { const sounds = document.querySelectorAll(".sound"); const pads = document.querySelectorAll(".pads div"); const visual = document.querySelector(".visual"); const colors = [ "##60d394", "#0a3798", "#e54f0f", "#d36098", "#ab18ef", "#bad360" ]; pads.forEach(pad, index) => { pad.addEventListener("click", function() { sounds[index].currentTime = 0; sounds[index].play(); createBubble(index); });};});const createBubble = index => { // create bubbles const bubble = document.createElement("div"); visual.appendChild(bubble); bubble.style.backgroundColor = colors[index]; bubble.style.animation = `jump 1s ease`; bubble.addEventListener("animationend", function() { visual.removeChild(this); });};
pads.forEach((pad, index) => { pad.addEventListener("click", function() { sounds[index].currentTime = 0; sounds[index].play(); createBubble(index); });});