Build a Drum Machine - Step 9

JavaScript
1

Tell us what’s happening:

Step 9 is failing at the test, but it is working fine on browser as well as the FCC sandbox. I have tried both keypress as well as keydown (as MDN says that keypress has been deprecated).
The result is same, the test is failing, but the output is as expected, apparently.
What am I doing 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">
          <audio
            src="https://cdn.freecodecamp.org/curriculum/drum/Heater-1.mp3"
            class="clip"
            id="Q"
            data-drumname="Heater 1"
          ></audio
          >Q
        </button>
        <button class="drum-pad">
          <audio
            src="https://cdn.freecodecamp.org/curriculum/drum/Heater-2.mp3"
            class="clip"
            id="W"
            data-drumname="Heater 2"
          ></audio
          >W
        </button>
        <button class="drum-pad">
          <audio
            src="https://cdn.freecodecamp.org/curriculum/drum/Heater-3.mp3"
            class="clip"
            id="E"
            data-drumname="Heater 3"
          ></audio
          >E
        </button>
        <button class="drum-pad">
          <audio
            src="https://cdn.freecodecamp.org/curriculum/drum/Heater-4_1.mp3"
            class="clip"
            id="A"
            data-drumname="Heater 4"
          ></audio
          >A
        </button>
        <button class="drum-pad">
          <audio
            src="https://cdn.freecodecamp.org/curriculum/drum/Heater-6.mp3"
            class="clip"
            id="S"
            data-drumname="Clap"
          ></audio
          >S
        </button>
        <button class="drum-pad">
          <audio
            src="https://cdn.freecodecamp.org/curriculum/drum/Dsc_Oh.mp3"
            class="clip"
            id="D"
            data-drumname="Open-HH"
          ></audio
          >D
        </button>
        <button class="drum-pad">
          <audio
            src="https://cdn.freecodecamp.org/curriculum/drum/Kick_n_Hat.mp3"
            class="clip"
            id="Z"
            data-drumname="Kick-n'-Hat"
          ></audio
          >Z
        </button>
        <button class="drum-pad">
          <audio
            src="https://cdn.freecodecamp.org/curriculum/drum/RP4_KICK_1.mp3"
            class="clip"
            id="X"
            data-drumname="Kick"
          ></audio
          >X
        </button>
        <button class="drum-pad">
          <audio
            src="https://cdn.freecodecamp.org/curriculum/drum/Cev_H2.mp3"
            class="clip"
            id="C"
            data-drumname="Closed-HH"
          ></audio
          >C
        </button>
      </div>
      <p id="display">Drum Machine</p>
    </div>
    <script src="./script.js"></script>
  </body>
</html>


/* file: script.js */
const pads = Array.from(document.querySelectorAll(".drum-pad"));
const audios = Array.from(document.querySelectorAll("audio"));
const display = document.querySelector("#display");
const trapKeys = "QWEASDZXC";

pads.forEach((pad) => {
  pad.addEventListener("click", () => {
    playBeat(pad.innerText);
  });
});

audios.forEach((audio) => {
  audio.addEventListener("play", () => {
    audio.parentNode.classList.add("playing");
  });
  audio.addEventListener("ended", () => {
    audio.parentNode.classList.remove("playing");
  });
});

window.addEventListener("keypress", (event) => {
  const pressedKey = event.code.match(/Key([A-Z])/)[1];
  if (trapKeys.includes(pressedKey)) {
    playBeat(pressedKey);
  }
});

function playBeat(pressedKey) {
  const audioTrack = document.querySelector(`#${pressedKey}`);
  audioTrack.play();
  display.innerText = audioTrack.getAttribute("data-drumname");
}


/* file: styles.css */
*,
*::after,
*::before {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}
body {
  display: flex;
  align-items: center;
  justify-content: center;
  background-image: url("./background.jpg");
  background-size: cover;
  background-color: gray;
  background-blend-mode: lighten;
  height: 100vh;
  width: 100vw;
}

#drum-machine {
  width: 80%;
}
#display {
  margin-block-start: 1rem;
  background-color: rgba(78, 77, 77, 0.5);
  color: white;
  border: 2px solid yellow;
  padding: 0.25em 1em;
  max-width: fit-content;
  font-size: 1.5rem;
  font-weight: bold;
  text-align: center;
  margin-inline: auto;
  user-select: none;
}
#pad-bank {
  width: fit-content;
  display: flex;
  gap: 1rem;
  margin-inline: auto;
}
.drum-pad {
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 3rem;
  padding: 0.25em;
  width: 5rem;
  height: 5rem;
  font-weight: bold;
  border: 2px black solid;
  background-color: green;
  cursor: pointer;
  transition: all 200ms linear;
}

.drum-pad:hover {
  opacity: 0.5;
  background-color: lightgreen;
}

.drum-pad:active,
.drum-pad.playing {
  background-color: red;
  border: 2px yellow solid;
}

Your browser information:

User Agent is: Mozilla/5.0 (X11; Ubuntu; Linux x86_64; rv:148.0) Gecko/20100101 Firefox/148.0

Challenge Information:

Build a Drum Machine - Build a Drum Machine

2

Then why are you using keypress?

Also, try applying your event listener to the document object rather than the window object.

And log the event object to see what you can use to get the pressedKey.

3

As per your suggestion I have used evenlistener on the document and changed the event to key down. The work is working as earlier, i.e. it is playing the sound as per key press. However the test is still failing. I have also tried console logging to check if the correct audio track is playing or not, it is ok.

4

Please post your updated code if you need more help. Thank you.

5

script.js:

const pads = Array.from(document.querySelectorAll(“.drum-pad”));

const audios = Array.from(document.querySelectorAll(“audio”));

const display = document.querySelector(“#display”);

const trapKeys = “QWEASDZXC”;

pads.forEach((pad) => {

pad.addEventListener(“click”, () => {

playBeat(pad.innerText);

});

});

audios.forEach((audio) => {

audio.addEventListener(“play”, () => {

audio.parentNode.classList.add("playing");

});

audio.addEventListener(“ended”, () => {

audio.parentNode.classList.remove("playing");

});

});

document.addEventListener(“keydown”, (event) => {

const pressedKey = event.code.match(/Key([A-Z])/)[1];

if (trapKeys.includes(pressedKey)) {

playBeat(pressedKey);

}

});

function playBeat(pressedKey) {

const audioTrack = audios.find((audio) => audio.id === pressedKey);

audioTrack.play();

display.innerText = audioTrack.getAttribute(“data-drumname”);

}

6

Please update your post to improve the readability of the code. When you enter a code block into a forum post, please precede it with three backticks to make it easier to read.

You can also use the “preformatted text” tool in the editor (</>) to add the backticks.

Pre-formatted-text
Pre-formatted-text1356×380 401 KB

See this post to find the backtick on your keyboard.
Note: Backticks (`) are not single quotes (').

7

Did you log the keydown event object to see if code exists in it?

8

Yes, I am getting the code:

keydown { target: body, key: “w”, charCode: 0, keyCode: 87 }

​altKey: false

​bubbles: true

​cancelBubble: false

​cancelable: true

​charCode: 0

​code: “KeyW”

​composed: true

…

and

const pressedKey = event.code.match(/Key([A-Z])/)[1];

is correctly extracting the ‘pressedkey’, i.e. “W” in this case.

9

Why not just grab the event’s key?