Fronend Development Libraries - Drum Machine, Drum pads not appearing and not working

JavaScript
1 
class App extends React.Component{
  constructor(props) {
    super(props);
    this.playAudio = this.playAudio.bind(this);
  }
  
  playAudio(event) {
    const audio = event.currentTarget.querySelector('audio');
    if (!audio) return; // safety check
    audio.currentTime = 0;
    try {
      audio.play();
    } catch(e) {
    console.log("Audio play blocked:", e);
  }
  }
  
  render() {
    return (
      <>
        <div id="drum-machine">
          <div id="display"></div>
          <div id="drum-pads">
            <button onClick={this.playAudio} className="drum-pad" id="heater-1">
              Q
              <audio className="clip" id="Q" src='https://cdn.freecodecamp.org/testable-projects-fcc/audio/Heater-1.mp3' preload="auto"></audio>
            </button>
            <button onClick={this.playAudio} className="drum-pad" id="heater-2">
              W
              <audio className="clip" id="W" src='https://cdn.freecodecamp.org/testable-projects-fcc/audio/Heater-2.mp3' preload="auto"></audio>
            </button>
            <button onClick={this.playAudio} className="drum-pad" id="heater-3">
              E
              <audio className="clip" id="E" src='https://cdn.freecodecamp.org/testable-projects-fcc/audio/Heater-3.mp3' preload="auto"></audio>
            </button>
            <button onClick={this.playAudio} className="drum-pad" id="heater-4">
              A
              <audio className="clip" id="A" src='https://cdn.freecodecamp.org/testable-projects-fcc/audio/Heater-4.mp3' preload="auto"></audio>
            </button>
            <button onClick={this.playAudio} className="drum-pad" id="clap">
              S
              <audio className="clip" id="S" src='https://cdn.freecodecamp.org/testable-projects-fcc/audio/Heater-6.mp3' preload="auto"></audio>
            </button>
            <button onClick={this.playAudio} className="drum-pad" id="open-hh">
              D
              <audio className="clip" id="D" src='https://cdn.freecodecamp.org/testable-projects-fcc/audio/Dsc_Oh.mp3' preload="auto"></audio>
            </button>
            <button onClick={this.playAudio} className="drum-pad" id="knh">
              Z
              <audio className="clip" id="Z" src='https://cdn.freecodecamp.org/testable-projects-fcc/audio/Kick_n_Hat.mp3' preload="auto"></audio>
            </button>
            <button onClick={this.playAudio} className="drum-pad" id="kick">
              X
              <audio className="clip" id="X" src='https://cdn.freecodecamp.org/testable-projects-fcc/audio/RP4_KICK_1.mp3' preload="auto"></audio>
            </button>
            <button onClick={this.playAudio} className="drum-pad" id="closed-hh">
              C
              <audio className="clip" id="C" src='https://cdn.freecodecamp.org/testable-projects-fcc/audio/Cev_H2.mp3' preload="auto"></audio>
            </button>
          </div>
        </div>
      </>
    );
  }
}

ReactDOM.render(<App />, document.getElementById('root'));

I thought it was const audio getting null or undefined, but that’s not. the App render nothing, but the moment I run test, the drum sound out for a moment and the test executing 7/8 and then only pass 5/8.

I try what I could but I dont understand and found the problem.

2

https://codepen.io/Min-Myat-the-reactor/pen/RNWBGgq?editors=0010

this is my project link

3

Welcome to the forum @minmyatz617

The buttons are hidden behind the test suite.

In the css file, try adding a button selector, and give it height and width properties.

Happy coding

5

but it doesn’t all test, current what I want is to pass the test, Ive tried what I can but none of them working, and only 5/8

6

Hi @minmyatz617

Passing the tests is fine.

Also take the time to gain insight. You’ll learn problem solving and debugging skills. If you rush through the project, you may miss an opportunity to process and retain these valuable skills.

Here the the failing tests:

  1. When I click on a .drum-pad element, the audio clip contained in its child element should be triggered.
    The element with id=“A” does not play when the A .drum-pad is clicked : expected true to be false
    AssertionError: The element with id=“A” does not play when the A .drum-pad is clicked : expected true to be false
  2. When I press the trigger key associated with each .drum-pad, the audio clip contained in its child element should be triggered (e.g. pressing the Q key should trigger the drum pad which contains the string “Q”, pressing the W key should trigger the drum pad which contains the string “W”, etc.).
    No audio plays when the Q key is pressed : expected true to be false
    AssertionError: No audio plays when the Q key is pressed : expected true to be false
  3. When a .drum-pad is triggered, a string describing the associated audio clip is displayed as the inner text of the #display element (each string must be unique).
    Each time a drum pad is triggered, a unique string should be displayed in the element with the id “display”: expected false to be true
    AssertionError: Each time a drum pad is triggered, a unique string should be displayed in the element with the id “display”: expected false to be true

Focus on one at a time. Take a good rest when you solve one problem. Your mind will keep processing the problem in the background.

I’ll focus on test 6.

How does your code handle keyboard input from the user?

Since this is for a certification project I cannot give specific advice.

Happy coding

1 Like
7

Thanks for the reply, I found out that it didn’t pass 5th and 6th cuz of the button “A” isn’t working properly.

1 Like