Build a Drum Machine - Build a Drum Machine

Curriculum Help
1

Tell us what’s happening:

I am having issues with the last test, it is saying that pressing the stated keys in the use case should play the corresponding audio, which I confirmed it does but it still ends up failing. Did I make a mistake somewhere?

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">
        <p id="display"></p>
        <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>
      </div>
    <script src="script.js"></script>
  </body>
</html>

/* file: script.js */
const qButton = document.getElementById("Heater-1");
const wButton = document.getElementById("Heater-2");
const eButton = document.getElementById("Heater-3");
const aButton = document.getElementById("Heater-4");
const sButton = document.getElementById("Clap");
const dButton = document.getElementById("Open-HH");
const zButton = document.getElementById("Kick-n'-Hat");
const xButton = document.getElementById("Kick");
const cButton = document.getElementById("Closed-HH");
const audioClip = document.querySelectorAll(".clip");





const playAudio = (key) => {
  audioClip.forEach((e) => {
    if(e.id === key){
      e.play();
    }
  })

  if(key === 'Q'){
    display.innerText = "Heater 1";
  }
  if(key === 'W'){
    display.innerText = "Heater 2";
  }
  if(key === 'E'){
    display.innerText = "Heater 3";
  }
  if(key === 'A'){
    display.innerText = "Heater 4";
  }
  if(key === 'S'){
    display.innerText = "Clap";
  }
  if(key === 'D'){
    display.innerText = "Open-HH";
  }
  if(key === 'Z'){
    display.innerText = "Kick-n'-H";
  }
  if(key === 'X'){
    display.innerText = "Kick";
  }
  if(key === 'C'){
    display.innerText = "Closed-HH";
  }
}


window.addEventListener("keydown", (e) => {
  let key = e.code.charAt(e.code.length-1);
  playAudio(key);
  
})

qButton.addEventListener("click", () => {playAudio('Q')});
wButton.addEventListener("click", () => {playAudio('W')});
eButton.addEventListener("click", () => {playAudio('E')});
aButton.addEventListener("click", () => {playAudio('A')});
sButton.addEventListener("click", () => {playAudio('S')});
dButton.addEventListener("click", () => {playAudio('D')});
zButton.addEventListener("click", () => {playAudio('Z')});
xButton.addEventListener("click", () => {playAudio('X')});
cButton.addEventListener("click", () => {playAudio('C')});

/* file: styles.css */
:root {
  --light-blue: #73a7fa;
};

.drum-pad{
  width: 100px;
  margin: 10px auto;
  background-color: var(--light-blue);
};

Your browser information:

User Agent is: Mozilla/5.0 (Windows NT 10.0; Win64; x64; rv:152.0) Gecko/20100101 Firefox/152.0

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

Your code works @amanimashaun - looks like there’s some potential holes in the tests or the instructions. Since this isn’t an issue with your code, I’m just gonna share the change I made to get it to pass - change the listened to this:

document.addEventListener("keydown", (e) => {
  let key = e.key.toUpperCase();
  playAudio(key);
})

I think that should work.

3

The code property of the keyboard event is less supported and it ignores keyboard layout. See more at KeyboardEvent - Web APIs | MDN

4

Thanks I managed to pass the test with this code! :+1: