Failing Test 5 Drum Pad App

JavaScript
1

Hey, My 5th Test is failing When I click on a .drum-pad element, the audio clip contained in its child <audio> element should be triggered.

My

Here is my code:

    <div id={"drum-pad-container"}>
      <button
        onClick={(e) => handleKey(e)}
        value={"Heater1"}
        className={"drum-pad btn-floating btn-large green"}
        id={"heater1"}
      >
        <audio
          className={"clip"}
          id={"Q"}
          src="https://s3.amazonaws.com/freecodecamp/drums/Heater-1.mp3"
        ></audio>
        Q
      </button>
      <button
        onClick={(e) => handleKey(e)}
        value={"Heater2"}
        className={"drum-pad btn-floating btn-large green"}
        id={"heater2"}
      >
        <audio
          className={"clip"}
          id={"W"}
          src="https://s3.amazonaws.com/freecodecamp/drums/Heater-2.mp3"
        ></audio>
        W
      </button>

I have other tests that arent passing, but Im starting with this one. Thank you

2

Hi @Kittles04.
It would be easier to help if you provided a link to a live project on codepen, codesandbox, stackblitz or any other online code editor. Right now I can only guess the following:

  1. Audio is not triggered
  2. You are missing audio attributes
  3. Multiple classes on the parent element of audio are making the tests fail
  4. Problem with onClick event handler e.t.c

I would recommend you create a pen and provide a link to it here so that people are able to play with your code and diagnose the problem.

1 Like
3

Thank you so much @nibble. I ended up getting it with some help. From your comments, I looked at W3 Schools audio element documentation. I made my app in a create-react-app so it was on a text editor. I could try to transcode that to a codepen sandbox for the next challenge. Thank you for looking at my code and making suggestions. I am now passing all the tests for the drumpad

1 Like
4

Happy coding. I am glad the post pointed you in the right direction.