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.).
I just don’t see a mistake:
Elements are rendered as:
<div class="drum-pad" data-key="Z" id="Kick-n'-Hat">Z <audio controls="" style="display: none;" class="clip" id="Z"><source src="https://s3.amazonaws.com/freecodecamp/drums/Kick_n_Hat.mp3" type="audio/mpeg"></audio></div>
I really hope is not cose of the
style="display: none;" …
Can someone please advise…
Your browser information:
User Agent is:
Mozilla/5.0 (Macintosh; Intel Mac OS X 10.15; rv:89.0) Gecko/20100101 Firefox/89.0.
Challenge: Build a Drum Machine
Link to the challenge:
First, you’re missing
src attribute in
<audio>. You have added
<source>, but test expect explicitly
Second, tests are expecting for the
<audio> element to be clicked, not the JS Audio object to be constructed and played.
The tests unfortunately are not testing the functionality, but implementation, which actually is considered a bad practice.
I can not add
src to audio itself.
Uncaught DOMException: String contains an invalid character from Vue and it fails to build DOM.
Seems to me it needs audio to have < source > in it. Witch is a valid HTML markup anyway.
Works for me: https://codepen.io/jenovs/pen/OJWdzoj?editors=0010
It doesn’t matter. As I mentioned, tests are testing for specific attributes, not the functionality.
Thanks for your help, I got it working.
But I have to say, even for example last requirement is :
## 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).
So I changed Vue apps data object to reflect that element, it was printing out values but it didnt pass the test, only when i fetched DOM element itself and set innerText it passed.
This just seems wrong to me. I mean whole point of using this framers is to manipulate data. Not DOM elements.
Anyways, thanks for the help. I appreciate it.
This topic was automatically closed 182 days after the last reply. New replies are no longer allowed.