Build a Drum Machine - Build a Drum Machine

JavaScript
1

hi, totally blind. using jaws for windows 2025, windows 11 pro 2025, and using google chrome. now doing the build a drum machine lab. and now it is not passing steps 7 to 9. so pasting my minimal code below. so if any one can help. me out. also reproting some issues on the fcc online system. wondering if you rely on amazon web services, wondering if you are suffering any issues, when amazon had a large outage this monday in the states, which was early tuesday in australia. when i then try the sample example in the preview the letter x and z i hear no sounds. so wondering, if an issue. so will paste my js code and the errors below. and also the link to the project.

thank you.

marvin.

ps: pasting now.

java script:

// ----- Step 1-9 Minimal JS ----- //

const pads = document.querySelectorAll(“.drum-pad”);
const audioElements = document.querySelectorAll(“audio”);

pads.forEach(pad => {
pad.addEventListener(“click”, () => {
const soundId = pad.dataset.sound; // e.g., “Kick”, “Snare”
const audio = document.getElementById(soundId);
if (audio) {
audio.currentTime = 0; // reset to start
audio.play();
} else {
console.log(`Audio element not found: ${soundId}`);
}
});
});

document.addEventListener(“keydown”, (e) => {
const key = e.key.toUpperCase(); // x, z, etc.
const pad = document.querySelector(`.drum-pad[data-key="${key}"]`);
if (pad) {
const audio = document.getElementById(pad.dataset.sound);
if (audio) {
audio.currentTime = 0;
audio.play();
} else {
console.log(`Audio element not found for key: ${key}`);
}
}
});

errors:

  • Passed:1. You should have a div element with an id of drum-machine that contains all other elements.

  • Passed:2. Inside the #drum-machine element you should have another div with an id of pad-bank.

  • Passed:3. Inside the #drum-machine element you should have a p element with an id of display.

  • Passed:4. Inside your #pad-bank element you should have nine clickable drum pad elements each with a class of drum-pad.

  • Passed:5. Each .drum-pad should have one of the following letters as innerText, in order: Q, W, E, A, S, D, Z, X, C.

  • Passed:6. Each .drum-pad should have an audio element which has a class of clip, a src attribute that points to an audio clip, and an id corresponding to the inner text of its parent .drum-pad element (e.g. id="Q", id="W", id="E" etc.).

  • Failed: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.

  • Failed: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).

  • link to the project:

  • https://www.freecodecamp.org/learn/full-stack-developer/lab-drum-machine/build-drum-machine

  • .

2

share html and css too if you have any

3

hi, heres my html and css.

html:

body {

  background-color: #121212;

  color: #fff;

  font-family: Arial, sans-serif;

  display: flex;

  justify-content: center;

  align-items: center;

  height: 100vh;

  margin: 0;

}



#drum-machine {

  background: #1e1e1e;

  padding: 20px;

  border-radius: 12px;

  text-align: center;

  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.4);

}



#pad-bank {

  display: grid;

  grid-template-columns: repeat(3, 100px);

  gap: 10px;

  margin-bottom: 20px;

}



.drum-pad {

  background: #333;

  border: 2px solid #555;

  border-radius: 8px;

  padding: 30px 0;

  font-size: 1.5rem;

  cursor: pointer;

  user-select: none;

  transition: background 0.2s, transform 0.1s;

}



.drum-pad:active,

.drum-pad.active {

  background: #ff5722;

  transform: scale(0.95);

}



#display {

  background: #000;

  padding: 10px;

  border-radius: 6px;

}
4

that’s only your css