Build a Drum Machine - Build a Drum Machine - Step 9

Curriculum Help
1

Tell us what’s happening:

Not able to pass test number 9 even though the code works. I don’t understand what’s wrong.

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>
    <div id="drum-machine">
      <div id="pad-bank">
        <button class="drum-pad">Q
          <audio id="Q" class="clip" src="https://cdn.freecodecamp.org/curriculum/drum/Heater-1.mp3"></audio>
        </button>
        <button class="drum-pad">W
          <audio id="W" class="clip" src="https://cdn.freecodecamp.org/curriculum/drum/Heater-2.mp3"></audio>
        </button>
        <button class="drum-pad">E
          <audio id="E" class="clip" src="https://cdn.freecodecamp.org/curriculum/drum/Heater-3.mp3"></audio>
        </button>
        <button class="drum-pad">A
          <audio id="A" class="clip" src="https://cdn.freecodecamp.org/curriculum/drum/Heater-4_1.mp3"></audio>
        </button>
        <button class="drum-pad">S
          <audio id="S" class="clip" src="https://cdn.freecodecamp.org/curriculum/drum/Heater-6.mp3"></audio>
        </button>
        <button class="drum-pad">D
          <audio id="D" class="clip" src="https://cdn.freecodecamp.org/curriculum/drum/Dsc_Oh.mp3"></audio>
        </button>
        <button class="drum-pad">Z
          <audio id="Z" class="clip" src="https://cdn.freecodecamp.org/curriculum/drum/Kick_n_Hat.mp3"></audio>
        </button>
        <button class="drum-pad">X
          <audio id="X" class="clip" src="https://cdn.freecodecamp.org/curriculum/drum/RP4_KICK_1.mp3"></audio>
        </button>
        <button class="drum-pad">C
          <audio id="C" class="clip" src="https://cdn.freecodecamp.org/curriculum/drum/Cev_H2.mp3"></audio>
        </button>
      </div>
      <p id="display"></p>
    </div>
    <script src="script.js"></script>
  </body>
</html>

/* file: script.js */
const pads = document.querySelectorAll(".drum-pad");

const src = ["Heater 1", "Heater 2", "Heater 3", "Heater 4", "Clap", "Open-HH", "Kick-n'-Hat", "Kick", "Closed-HH"];

const display = document.getElementById("display");

pads.forEach((btn) => {
  btn.addEventListener("click", () => {
    const index = [...pads].indexOf(btn);
    const note = btn.textContent;
    const audio = document.querySelector(`#${note}`);
    audio.play();
    display.textContent = src[index];
  });
})

Your browser information:

User Agent is: Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/149.0.0.0 Safari/537.36

Challenge Information:

Build a Drum Machine - Build a Drum Machine

GitHub Link: freeCodeCamp/curriculum/challenges/english/blocks/lab-drum-machine/6762ec275cef87635acc4fe3.md at main · freeCodeCamp/freeCodeCamp · GitHub

2

Hi @chaotic.stardust,

I don’t see a listener for a keyboard key press in your code.

Happy coding

3

Ahh I can’t believe I missed that part. Thank you!