freeCodeCamp Drum Calculator not passing

JavaScript
1

Hello, I am new to forums and coding. Not too comfortable with Javascript.
I am having some issues with my code. 5/8 test pass but my app works as intended.
The 3 steps that are failing are:

  4. Within each .drum-pad, there should be an HTML5 <audio> element which has a 
        src attribute pointing to an audio clip, a class name of "clip", and an id 
        corresponding to the inner text of its parent .drum-pad (e.g. id="Q", id="W", id="E" 
        etc.).

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

 6. When I press the trigger key associated with each .drum-pad, the audio clip 
       contained in its child <audio> 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.).

As I said all the code is there and should be passing these but I am sure I have left something out. I hope someone can help guide me with my error.

2

I think you have to append the audio elements inside the matching divs (which really should be buttons and not divs). You can’t just append them to the document.

Within each .drum-pad, there should be an HTML5 <audio> element

That would be my first guess anyway.

3

Yeah, it looks like you are creating and removing them dynamically. The test is expecting them to just be there. Sometimes you have to code to the test. It’s not enough for it to “work” the way you think it should. Sometimes acceptance tests are written by other people, based on other assumptions. IRL, sometimes you can compromise with them, sometimes you can’t.

4

For test #4 I’ve looked into the developer tools and this is what I’ve gotten

<div class="drum-pad" id="C" type="button">C</div>

The audio elements are appended into the body, but at the very bottom

I think that test is asking for the following

<div class="drum-pad" id="C" type="button">C<audio src="sound-source-link" class="clip" id="C"></audio></div>

EDIT: If you can append the audio to the drum pad instead, it should solve test 5 as well

EDIT 2: and 6 lol

5

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