Build a Drum Machine - Build a Drum Machine

Curriculum Help
1

Tell us what’s happening:

  1. 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.
    I cant pass this one.
    The code works fine for me. It plays corresponding audio.
    I can’t figure this out

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

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

drumPadBtns.forEach(btn => {
  btn.addEventListener("click", (e) => {
    let audio = e.target.querySelector(`audio`);
    audio.play();
    display.innerText = audio.getAttribute("name");
  })
  
  btn.addEventListener("keydown", (e) => {
    let keY = document.querySelector(`button[id="${e.key.toUpperCase()}-key"]`);

    if (keY && e.key.toLowerCase() === keY.id[0].toLowerCase()) {
      let audio = keY.querySelector(`audio`);
      audio.play();
      display.innerText = audio.getAttribute("name");
    }
  })
})

/* file: styles.css */
* {
  box-sizing: border-box;
}

body {
  background-color: gray;
  margin: 0;
  padding: 0;
  font-family: arial, sans-serif;
}

#drum-machine {
  width: 400px;
  margin: 50px auto 0;
  text-align: center;
  background-color: rgb(51, 47, 76);
  border-radius: 10px;
  padding: 20px;
}

#pad-bank {
  background-color: #202020f0;
  width: 80%;
  height: 270px;
  margin: 30px auto 0;
  padding: 20px;
  border-radius: 10px;
  display: grid;
  grid-template-rows: 1fr 1fr 1fr;
  grid-template-columns: 1fr 1fr 1fr;
  gap : 20px;
}

.drum-pad {
  width: 100%;
  height: 100%;
  border-radius: 5px;
  background-color: lightgray;
}

.drum-pad:active {
  background-color: hsl(0, 100%, 60%);
}

#display {
  width: 80%;
  margin: 30px auto;
  font-size: 20px;
  padding: 10px;
  color: hsl(20, 60%, 50%);
  font-weight: bold;
  background-color: hsl(0, 0%, 40%);
}

Your browser information:

User Agent is: Mozilla/5.0 (X11; Linux x86_64) 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

Hey @BHAT_AAQIB ,

btn.addEventListener("keydown", (e) => {

So according to above code, keydown event only fires on the focused button. So unless we focus on drum pad, nothing is going to happen. The key listener should be on document instead.

3

It worked.
Thankyou.