Tell us what’s happening:
Hello,
The program fails tests 8 and 9, although it seems to do what is being asked.
Your code so far
<!-- file: index.html -->
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8" />
<title>Drum Machine</title>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<h1>Caja de Ritmos</h1>
<hr>
<div id="drum-machine">
<div id='pad-bank'>
<button class='drum-pad' id="padQ">Q
<audio src='https://cdn.freecodecamp.org/curriculum/drum/Heater-1.mp3' id='Q' name='Heater 1' class='clip'></audio>
</button>
<button class='drum-pad' id="padW">W<audio src='https://cdn.freecodecamp.org/curriculum/drum/Heater-2.mp3' id='W' class='clip'></audio></button>
<button class='drum-pad' id="padE">E
<audio src='https://cdn.freecodecamp.org/curriculum/drum/Heater-3.mp3' id='E' class='clip'></audio></button>
<button class='drum-pad' id="padA">A<audio src='https://cdn.freecodecamp.org/curriculum/drum/Heater-4_1.mp3' id='A' class='clip'></audio></button>
<button class='drum-pad' id="padS">S<audio src='https://cdn.freecodecamp.org/curriculum/drum/Heater-6.mp3' id='S' class='clip'></audio></button>
<button class='drum-pad' id="padD">D
<audio src='https://cdn.freecodecamp.org/curriculum/drum/Dsc-Oh.mp3' id='D' class='clip'></audio></button>
<button class='drum-pad' id="padZ">Z<audio src='https://cdn.freecodecamp.org/curriculum/drum/Kick_n_Hat.mp3' id='Z' class='clip'></audio></button>
<button class='drum-pad' id="padX">X<audio src='https://cdn.freecodecamp.org/curriculum/drum/RP4_KICK_1.mp3' id='X' class='clip'></audio></button>
<button class='drum-pad' id="padC">C<audio src='https://cdn.freecodecamp.org/curriculum/drum/Cev_H2.mp3' id='C' class='clip'></audio></button>
</div>
<p id='display'></p>
</div>
<hr>
<script src="script.js"></script>
</body>
</html>
/* file: script.js */
const botones = document.querySelectorAll(".drum-pad");
const pantalla=document.getElementById('display')
botones.forEach((boton) => {
boton.addEventListener("click", (evento) => {
let newId = evento.currentTarget.id.at(-1);
const audio = document.getElementById(newId);
//let audio= evento.target.querySelector('audio')
let name=audio.getAttribute('src').split('/').at(-1);
display.innerText=name;
audio.play();
});
});
document.addEventListener('keydown', (e) =>{
let letra=e.key.toUpperCase();console.log(e.key)
const letras=['Q','W','E','A','S','D','Z','X','C'];
if (letras.includes(letra)){const audio = document.getElementById(letra);
let name=audio.getAttribute('src').split('/').at(-1);
display.innerText=name;
audio.play();}}
)
/* file: styles.css */
#pad-bank {
display: grid;
grid-template-columns: repeat(3, 1fr);
grid-template-rows: repeat(3, 1fr);
gap:15px;
padding: 0 300px;
background-color:#7897a5
}
.drum-pad {
background-color: #f0f4f8;
border: 2px solid #cbd5e1;
display:flex;
justify-content: center;
align-items: center;
font-family: Arial, sans-serif;
color: #334155;
aspect-ratio: 1 / 1;
font-size:30px;
font-weight: bold;
background-color:#F54927}
h1{
text-Align: center;
background-color:#F54927}
Your browser information:
User Agent is: Mozilla/5.0 (X11; Linux x86_64; rv:151.0) Gecko/20100101 Firefox/151.0
Challenge Information:
Build a Drum Machine - Build a Drum Machine