Build a Drum Machine - Build a Drum Machine

JavaScript
1

Tell us what’s happening:

hello! hope you all are doing well
I am still stuck at the step 9 even after it all works well
step 9 says the keys should play corresponding audio and it does play. so i dont know whats wrong. any comments is appreciated

Your code so far

<!-- file: index.html -->
<!doctype html>
<html lang="en">
  <head>
    <meta charset="utf-8" />
    <link href="styles.css" rel="stylesheet">
    <title>Drum Machine</title>
  </head>
  <body>
    <div id="drum-machine">
      <h1>Drum Machine</h1>
      <div id="pad-bank">
        <button class="drum-pad" id="heater-1"><audio class="clip" src="https://cdn.freecodecamp.org/curriculum/drum/Heater-1.mp3" id="Q"></audio>Q</button>
        <button class="drum-pad" id="heater-2"><audio class="clip" src="https://cdn.freecodecamp.org/curriculum/drum/Heater-2.mp3" id="W"></audio>W</button>
        <button class="drum-pad" id="heater-3"><audio class="clip" src="https://cdn.freecodecamp.org/curriculum/drum/Heater-3.mp3" id="E"></audio>E</button>
        <button class="drum-pad" id="heater-4"><audio class="clip" src="https://cdn.freecodecamp.org/curriculum/drum/Heater-4_1.mp3" id="A"></audio>A</button>
        <button class="drum-pad" id="clap"><audio class="clip" src="https://cdn.freecodecamp.org/curriculum/drum/Heater-6.mp3" id="S"></audio>S</button>
        <button class="drum-pad" id="open-hh"><audio class="clip" src="https://cdn.freecodecamp.org/curriculum/drum/Dsc_Oh.mp3" id="D"></audio>D</button>
        <button class="drum-pad" id="kick-n-hat"><audio class="clip" src="https://cdn.freecodecamp.org/curriculum/drum/Kick_n_Hat.mp3" id="Z"></audio>Z</button>
        <button class="drum-pad" id="kick"><audio class="clip" src="https://cdn.freecodecamp.org/curriculum/drum/RP4_KICK_1.mp3" id="X"></audio>X</button>
        <button class="drum-pad" id="closed-hh"><audio class="clip" src="https://cdn.freecodecamp.org/curriculum/drum/Cev_H2.mp3" id="C"></audio>C</button>
      </div>
      <p id="display"></p>
    </div>
    <script src="script.js"></script>
  </body>
</html>

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

body {
  padding: 0px;
  margin: 0px;
  color: white;
}

#drum-machine {
  display: flex;
  flex-direction: column;
background-color: #1a1a2e;
height: 100vh;
width: 100vw;
align-items: center;
justify-content: center;
}

#pad-bank {
  width: 95%;
  height: 60%;
  display: grid;
  grid-template-rows: repeat(3, 1fr);
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;

  padding: 20px;
}
.drum-pad {
  width: 100%;
  height: 100%;
  cursor: pointer;
  border-radius: 20px;
  font-size: 20px;
  font-weight: bold;
  background-color: #16213e;
  color: #e94560;
}

#display {
  background-color: #0f3460;
  color: #e94560;
  height: 40px;
  width: 250px;
  display: flex;
  justify-content: center;
  align-items: center;
  border-radius: 9px;
  font-weight: bold;
}
.drum-pad:active, .drum-pad.active {
  background-color: #e94560;
  color: #1a1a2e;
  transform: scale(0.95);
  box-shadow: 0 0 20px #e94560;
}

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

function playAudio(pad, audio){

    audio.currentTime = 0;
    audio.play();
    display.textContent = pad.id.toUpperCase();
  }
drumPads.forEach((drumPad)=> {
  const audio = drumPad.querySelector(".clip");
  drumPad.addEventListener("click", ()=> playAudio(drumPad, audio));
  
})
window.addEventListener("keydown", (e)=> {
  const key = e.key.toUpperCase();
  const audio = document.getElementById(key)
  
  if(audio){
    const pad = audio.parentElement
playAudio(pad, audio)
pad.classList.add("active");
setTimeout(() => pad.classList.remove("active"), 100);
  } else return
  });

Your browser information:

User Agent is: Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/144.0.0.0 Safari/537.36

Challenge Information:

Build a Drum Machine - Build a Drum Machine

2

You have a built-in delay that could cause the tests to fail. Please try removing it.

3

still not passing even after removing

4

have you tried using this event listener to the document instead of window?

2 Likes
5

that worked. thanks a lot. this had me stuck for hours

1 Like