Build a Drum Machine - Test 9

JavaScript
1

Tell us what’s happening:

I am having troubles passing text 9. When I press down on the keys, they play the corresponding audio. I have tried to just play the audio directly and use the event to click the corresponding button. Both options have failed the test.

Any tips would be appreciated. Thanks in advance.

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

/* file: styles.css */
body {
  background-color: #14213d;
  display: flex;
  height: 90vh;
  justify-content: center;
  align-items: center;
  font-family: sans-serif;
  font-weight:bold;
  text-align: center;
}

#drum-machine {
  background-color: #457b9d;
  width: 300px;
  margin: auto;
  border-radius: 15px;
  padding: 20px;
}

#pad-bank {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  column-gap: 6px;
  row-gap: 6px;
}

.drum-pad {
  background-color: #1d3557;
  color: f1faee;
  font-size: 18px;
  height: 70px;
  border-radius: 6px;
  display: flex;
  justify-content: center;
  align-items: center;
  cursor: pointer;
}

#display {
  margin: 0.5em 0 0;
  padding-top: 3px;
  height: 2em;
  border-radius: 6px;
  line-height: 1em;
  background-color: #14213d;
  color: #457b9d;
  font-weight: normal;
  letter-spacing: 0.1em;
  display: flex;
  justify-content: center;
  align-items: center;
}


/* file: script.js */
const drumPad = document.querySelectorAll(".drum-pad");;
const display = document.getElementById("display");
const keys = ['Q', 'W', 'E', 'A', 'S', 'D', 'Z', 'X', 'C'];

const audio = new Audio();

function displayName(name) {
  let firstName = name.replaceAll("-", " ");
  display.innerText = firstName[0].toUpperCase() + firstName.substring(1);
}

function playAudio(btn) {
  btn.play();
}

drumPad.forEach((button) => {
  button.addEventListener("click", () => {
    displayName(button.id);
    playAudio(button.querySelector("audio"));
  });
});

window.addEventListener('keydown', (event) => {
  for (let btn of drumPad) {
    if (event.key.toUpperCase() === btn.innerText) {
      btn.click()
    }
  }
})

Your browser information:

User Agent is: Mozilla/5.0 (Macintosh; Intel Mac OS X 10.15; rv:149.0) Gecko/20100101 Firefox/149.0

Challenge Information:

Build a Drum Machine - Build a Drum Machine

2

Hi @forealexander4 ,

Try calling your listener on the document object rather than the window object.

Happy coding!

3

That did it. Thank you

1 Like
4

This topic was automatically closed 28 days after the last reply. New replies are no longer allowed.