Build a Drum Machine - Build a Drum Machine

JavaScript
1

Tell us what’s happening:

The only test I’m failing is test 8:

“When you press one of the keys Q, W, E, A, S, D, Z, X, C on your keyboard, the corresponding audio element should play the corresponding sound.”

Every time I click one of my Q, W, E, A, S, D, Z, X, C divs, the sound plays. I’m not sure why this test is failing.

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

/* file: styles.css */
body {
  margin: 0;
  padding: 0;
  background-color: black;
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100vh;
  width: 100vw;
}

#drum-machine {
  background-color: navy;
  color: gold;
  width: 50vw;
  height: 80vh;
}

#pad-bank {
  display: flex;
  flex-wrap: wrap;
  margin: 15px;
  height: 20vh;
  justify-content: center;
}

.drum-pad {
  display: flex;
  cursor: pointer;
  margin: 5px;
  height: 40px;
  width: 40px;
  background-color: grey;
  justify-content: center;
  align-items: center;
}

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

drumBtns.forEach(button => {
  button.addEventListener("click", () => {
    const audio = button.querySelector('.clip');
    audio.play();
    display.innerHTML = audio.id;
  })
})

Your browser information:

User Agent is: Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_7) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/141.0.0.0 Safari/537.36

Challenge Information:

Build a Drum Machine - Build a Drum Machine

2

Ok, I’m dumb. I realized I missed that I needed to also have a keydown eventListener

3

You are learning computer programming on your own and you found the solution to the problem yourself, that sounds pretty smart actually.