Build a Drum Machine - Build a Drum Machine

JavaScript
1

Tell us what’s happening:

my code seem’s to be woeking as expected but for some reasons i’m unable to pass test 9..

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>
    <script src='script.js'></script>
  </body>
</html>

/* file: styles.css */
body{
  background-color: rgb(161, 130, 130);
  height: 100vh;
  width: 100%;
  display: flex;

}
#drum-machine{
  display: block;
  height: 60%;
  width: 60%;
  margin: auto;
  background: rgb(100, 100, 36);
  padding: 20px;
  border-radius: 14px;
}
#pad-bank{
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 12px;
}
.drum-pad{
  height: 45px;
  background-color: gainsboro;
  border: none;
  color: gray;
  font-weight: bold;
  font-size: 16px;
  border-radius: 5px;
}
#display{
  display: block;
  width: 100%;
  margin: 40px auto;
  background-color: gray;
  min-height: 20px;
  border-radius: 13px;
  text-align: center;
  align-items: center;
  padding: 5px 0;
  font-size: 15px;
}

/* file: script.js */
const drumMachine = document.getElementById('drum-machine');
const padBank = document.getElementById('pad-bank');

const display = document.getElementById('display');
const drumPad = document.querySelectorAll('.drum-pad');

drumPad.forEach((pad) => {
  pad.addEventListener('click', () => {
    const audio = pad.querySelector('.clip');

    audio.currentTime = 0
    audio.play()

    display.textContent = pad.id
    })
  })
window.addEventListener("keydown", (event) =>{
  const keyPressed = event.key.toUpperCase()

  const audio = document.getElementById(keyPressed)
    
  if (audio){
    audio.currentTime = 0;
    audio.play()

    display.textContent = audio.parentElement.id
  }
})

Your browser information:

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

Challenge Information:

Build a Drum Machine - Build a Drum Machine

2

Good job overall. But try applying the addEventListener() method to the document object rather than the window object.

3

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