Build a Drum Machine - Build a Drum Machine

JavaScript
1

Tell us what’s happening:

Hey I have a problem with 8-9 tasks in this code, everything works, but it still gives this error, I’ve been staring at the monitor for 5 hours and just don’t understand what they want from me

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">
  <div id="pad-bank">

    <button class="drum-pad" id="Heater-1">Q
      <audio class="clip" id="Q" src="https://cdn.freecodecamp.org/curriculum/drum/Heater-1.mp3"></audio>
    </button>

    <button class="drum-pad" id="Heater-2">W
      <audio class="clip" id="W" src="https://cdn.freecodecamp.org/curriculum/drum/Heater-2.mp3"></audio>
    </button>

    <button class="drum-pad" id="Heater-3">E
      <audio class="clip" id="E" src="https://cdn.freecodecamp.org/curriculum/drum/Heater-3.mp3"></audio>
    </button>

    <button class="drum-pad" id="Heater-4">A
      <audio class="clip" id="A" src="https://cdn.freecodecamp.org/curriculum/drum/Heater-4_1.mp3"></audio>
    </button>

    <button class="drum-pad" id="Clap">S
      <audio class="clip" id="S" src="https://cdn.freecodecamp.org/curriculum/drum/Heater-6.mp3"></audio>
    </button>

    <button class="drum-pad" id="Open-HH">D
      <audio class="clip" id="D" src="https://cdn.freecodecamp.org/curriculum/drum/Dsc_Oh.mp3"></audio>
    </button>

    <button 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>
    </button>

    <button class="drum-pad" id="Kick">X
      <audio class="clip" id="X" src="https://cdn.freecodecamp.org/curriculum/drum/RP4_KICK_1.mp3"></audio>
    </button>

    <button class="drum-pad" id="Closed-HH">C
      <audio class="clip" id="C" src="https://cdn.freecodecamp.org/curriculum/drum/Cev_H2.mp3"></audio>
    </button>

  </div>
  
  <p id="display"></p>
</div>

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

/* file: styles.css */


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

// Клик по кнопке
pads.forEach(pad => {
  pad.addEventListener("click", () => {
    const audio = pad.querySelector("audio.clip");
    audio.currentTime = 0;
    audio.play(); // play на DOM-элементе 
    display.innerText = pad.id;
  });
});

// Нажатие клавиши
document.addEventListener("keydown", (e) => {
  const key = e.key.toUpperCase();
  const audio = document.getElementById(key);
  if (audio && audio.classList.contains("clip")) {
    audio.currentTime = 0;
    audio.play(); // play на DOM-элементе
    display.innerText = audio.parentElement.id;
  }
});

Your browser information:

User Agent is: Mozilla/5.0 (iPhone; CPU iPhone OS 18_7 like Mac OS X) AppleWebKit/605.1.15 (KHTML, like Gecko) Version/26.2 Mobile/15E148 Safari/604.1

Challenge Information:

Build a Drum Machine - Build a Drum Machine

2

Is this working for you?

3

No:( I’ll try ur code but don’t work

4

Isn’t the clip you need a child of .drum-pad? And isn’t the inner text of .drum-pad the id of the clip you need?

5

There is an issue with your stylesheet link, but I just tested your code and it’s working for me.

Please try one of the following steps to move forward.

Click on the “Restart Step” button and force a refresh of your page with CTRL + F5 then try to paste the code in again.

or - Try the step in incognito or private mode.

or - Disable any/all extensions that interface with the freeCodeCamp website (such as Dark Mode, Ad Blockers, or Spellcheckers), and set your browser zoom level to 100%. Both of these factors can cause tests to fail erroneously.

or - Ensure your browser is up-to-date or try a different browser.

I hope one of these will work for you.

6

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