Build a Drum Machine - Build a Drum Machine

JavaScript
1

Tell us what’s happening:

I am passing all the tests except the 8th one. Whatever it is saying is working for me but it is not declaring my code as correct. I don’t know what to do. The 8th test is: When you press one of the keys on your keyboard, the corresponding audio element should play the corresponding sound.

Your code so far

<!-- file: index.html -->
<!DOCTYPE html>
<html lang="en">
  <head>
    <title>Drum Machine</title>
    <meta charset="utf-8">
    <link rel="stylesheet" href="styles.css">
  </head>
  <body>
    <div id="drum-machine">
      <div id="pad-bank">
          <div class="drum-pad" id="Heater 1">Q
          <audio class="clip" src="https://cdn.freecodecamp.org/curriculum/drum/Heater-1.mp3" id="Q"></audio></div>
          <div class="drum-pad" id="Heater 2">W
          <audio class="clip" src="https://cdn.freecodecamp.org/curriculum/drum/Heater-2.mp3" id="W"></audio></div>
          <div class="drum-pad" id="Heater 3">E
          <audio class="clip" src="https://cdn.freecodecamp.org/curriculum/drum/Heater-3.mp3" id="E"></audio></div>
          <div class="drum-pad" id="Heater 4">A
          <audio class="clip" src="https://cdn.freecodecamp.org/curriculum/drum/Heater-4_1.mp3" id="A"></audio></div>
          <div class="drum-pad" id="Clap">S
          <audio class="clip" src="https://cdn.freecodecamp.org/curriculum/drum/Heater-6.mp3" id="S"></audio></div>
          <div class="drum-pad" id="Open-HH">D
          <audio class="clip" src="https://cdn.freecodecamp.org/curriculum/drum/Dsc_Oh.mp3" id="D"></audio></div>
          <div 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></div>
          <div class="drum-pad" id="Kick">X
          <audio class="clip" src="https://cdn.freecodecamp.org/curriculum/drum/RP4_KICK_1.mp3" id="X"></audio></div>
          <div class="drum-pad" id="Closed-HH">C
          <audio class="clip" src="https://cdn.freecodecamp.org/curriculum/drum/Cev_H2.mp3" id="C"></audio></div>   
      </div>
      <p id="display">123</p>
    </div>
  <script src="script.js"></script>
  </body>
</html>


/* file: script.js */
const buttons = [...document.querySelectorAll(".drum-pad")]
const display = document.querySelector("#display")

buttons.forEach(button => button.addEventListener("click", (e) => {
  const audio = document.querySelector(`#${e.target.textContent}`)
  audio.currentTime = 0;
  audio.play();
  display.textContent = `${e.target.id}`
}))


window.addEventListener("keydown", (e) => {
  const pressedKey = e.key.toUpperCase();
  const button = buttons.find(btn => btn.textContent.trim() === pressedKey)
  button.classList.add("drum-pad-active")
if(!button) return;
  const audio = button.querySelector('.clip')
  
  audio.currentTime = 0;
  audio.play()
  audio.addEventListener("ended", () => {
    button.classList.remove("drum-pad-active")
  }, {once: true})
  display.textContent = button.id
})



/* file: styles.css */
body {
  background-color: rgb(227, 218, 218);
  display: flex;
  align-items: center;
  text-align: center;
  justify-content: center;
}

#drum-machine {
  display: flex;
  align-items: center;
  text-align: center;
  justify-content: space-evenly;
  flex-direction: column;
}

#pad-bank {
  display: flex;
  align-items: center;
  text-align: center;
  justify-content: space-evenly;
  background-color: rgb(243, 240, 240);
  width: 500px;
  height: 200px;
  box-shadow: 0 0 15px 3px; 
  margin-top: 200px;
}

.drum-pad {
  display: flex;
  align-items: center;
  text-align: center;
  justify-content: center;
  width: 30px;
  height: 30px;
  box-shadow: 0 0 5px;
  transition: 0.01s all;
  cursor: pointer;
}

.drum-pad:hover {
  transform: scale(2);
  background-color: yellow;
  border: 2px solid black;
}

.drum-pad-active {
  transform: scale(2);
  background-color: yellow;
  border: 2px solid black;
}

#display {
  color: rgb(61, 2, 255);
  font-size: 25px;
  text-shadow: 1px 1px 1px rgb(2, 27, 255);
}

Your browser information:

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

Challenge Information:

Build a Drum Machine - Build a Drum Machine

2

maybe it does not work with the tests if the event listener is on window, what else could you try?

1 Like
3

document.addEventListener?

4

Did you try this?

Does it work?

5

It worked, document works instead of window. Thanks.

1 Like