Build a Drum Machine - Build a Drum Machine

JavaScript
1

Tell us what’s happening:

Anyone know why 7 and 9 won’t work with my code? It works in codepen! 7. When you click on a .drum-pad element, the audio clip contained in its child audio element should be triggered.
9. When a .drum-pad is triggered, you should display a string describing the associated audio clip as the inner text of the #display element (each string must be unique).

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="style.css"> 
  </head>
  <body>
    <div id="drum-machine">
      <p id="display">Hit a drum</p>
      <div id="pad-bank">
         <div class="drum-pad" id="Heater-1">Q
          <audio class="clip" id="Q" src="https://cdn.freecodecamp.org/curriculum/drum/Heater-1.mp3"></audio>
          </div>
        <div class="drum-pad" id="Heater-2">W
          <audio class="clip" id="W" src="https://cdn.freecodecamp.org/curriculum/drum/Heater-2.mp3"></audio>
          </div>
        <div class="drum-pad" id="Heater-3">E
          <audio class="clip" id="E" src="https://cdn.freecodecamp.org/curriculum/drum/Heater-3.mp3"></audio>
          </div>
        <div class="drum-pad" id="Heater-4">A
          <audio class="clip" id="A" src="https://cdn.freecodecamp.org/curriculum/drum/Heater-4_1.mp3"></audio>
          </div>
        <div class="drum-pad" id="Clap">S
          <audio class="clip" id="S" src="https://cdn.freecodecamp.org/curriculum/drum/Heater-6.mp3"></audio>
          </div>
        <div class="drum-pad" id="Open-HH">D
          <audio class="clip" id="D" src="https://cdn.freecodecamp.org/curriculum/drum/Dsc_Oh.mp3"></audio>
          </div>
        <div class="drum-pad" id="Kick-n-Hat">Z
          <audio class="clip" id="Z" src="https://cdn.freecodecamp.org/curriculum/drum/Kick_n_Hat.mp3"></audio>
          </div>
        <div class="drum-pad" id="Kick">X
          <audio class="clip" id="X" src="https://cdn.freecodecamp.org/curriculum/drum/RP4_Kick_1.mp3"></audio>
          </div>
        <div class="drum-pad" id="Closed-HH">C
          <audio class="clip" id="C" src="https://cdn.freecodecamp.org/curriculum/drum/Cev_H2.mp3"></audio> 
          </div>

     </div>
    </div>     

<script src="script.js"></script>
</body> 
 </html>

/* file: styles.css */
#drum-machine {
  max-width: 500px;
  margin: 2rem auto;
  text-align: center;
  background: #222;
  color: white;
  border-radius: 12px;
  box-shadow: 0 0 20px #f39c12;
  padding: 1rem;
}

#pad-bank {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1rem;
}

.drum-pad {
background: #333;
padding: 2rem;
border-radius: 8px;
cursor: pointer;
user-select: none;
font-size: 1.5rem;
box-shadow: 0 4px #999;
transition: transform 0.1s;
}

.drum-pad:active {
  transform: scale(0.95);
  box-shadow: none;    
}

#display {
  margin-top: 1.5rem;
  font-size: 1.2rem;
  font-style: italic;
  color: #f39c12;
}

/* file: script.js */
document.addEventListener("DOMContentLoaded", ()=>{
  const display = document.getElementById("display");
  const pads = document.querySelectorAll(".drum-pad");

  const playClip = (key) => {
    const audio = document.getElementById(key);
    if (audio) {
      audio.currentTime = 0;
      audio.play();
      const soundName = audio.parentElement.id;
      display.textcontent = $`{soundName}`;

    }
  };

pads.forEach(pad => {
  pad.addEventListener("click", () =>{
    playClip(key);
  });
});

document.addEventListener("keydown", (e) =>{
  const key = e.key.toUpperCase();
  if("QWEASDZXC".includes(key)){
    playClip(key);
  }
});
});

Your browser information:

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

Challenge Information:

Build a Drum Machine - Build a Drum Machine

2

Is this all of the code? I get these errors.

Can link to your codepen?

Also the css file is called styles.css

Screenshot 2025-07-03 231644
Screenshot 2025-07-03 231644461×637 51.8 KB

3

Build a Drum Machine

4

Try copying the code from your codepen to the fcc editor again?

It’s not the same.

You should be able to see that from this error:

ReferenceError: key is not defined

Do you get the same error as well?

5

I get this error when I transferred my code over to FreeCodeCamp! Ugh! Uncaught TypeError: Cannot read properties of null (reading ‘id’)

6

Is that the full error?

I don’t get this error when I copy your code over from the codepen. Can you share the code you have here?

7

I built a new one in Code I.O. Build a Drum Machine2 It works in Freecodecamp; however, I still don’t pass! Ugh * 7. When you click on a .drum-pad element, the audio clip contained in its child audio element should be triggered.

  • Failed:8. When you press one of the keys Q, W, E, A, S, D, Z, X, C on your keyboard, the corresponding audio element should play the corresponding sound.
8

So, instead of fixing that error you wrote a totally new drum machine project with different CSS styling?

Why did you redo all of the CSS since it has no impact on these errors or tests?

1 Like
9

I like to play with colors and shapes I guess. I do that with all my projects.

10

Looks pretty good to me. Even if I try to replicate the fCC test for 7.

const padstest = document.querySelectorAll('.drum-pad');
console.log(pads); //should be not empty
padstest.forEach(el => {
  const audio = el.querySelector('audio');
  el.click();
  console.log(audio.paused); //should be false
  audio.pause();
});

{ '0': {},
  '1': {},
  '2': {},
  '3': {},
  '4': {},
  '5': {},
  '6': {},
  '7': {},
  '8': {} }
false
false
false
false
false
false
false
false
false
1 Like