Drum machine failing test #3

Drum machine failing test #3
0

#1

Tell us what’s happening:

Hi all,

I’m having some trouble passing test #3 for the drum machine project and I’m not sure why. I’m hoping I don’t have to change my html around as I finally got it to the point where I like it but please comment and let me know if you think this is something I could fix on my end or if it may be a FCC test suite issue.

The error I’m seeing is:
3. Within #drum-machine I can see 9 clickable “drum pad” elements, each with a class name of “drum-pad”, a unique id that describes the audio clip the drum pad will be set up to trigger, and an inner text that corresponds to one of the following keys on the keyboard: Q, W, E, A, S, D, Z, X, C. The drum pads MUST be in this order. AssertionError: Each .drum-pad’s inner text should be one of the following letters (all letters must be represented): “Q”, “W”, “E”, “A”, “S”, “D”, “Z”, “X”, “C” : expected [ Array(9) ] to be a superset of [ Array(9) ]

thanks in advance.

Your code so far


Your browser information:

User Agent is: Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/68.0.3440.106 Safari/537.36.

Link to the challenge:
https://learn.freecodecamp.org/front-end-libraries/front-end-libraries-projects/build-a-drum-machine


#2

I think the tests are only expecting to see an applicable letter for each div with class=“drum-pad”. The inner text of your divs with class=“drum-pad” have other divs in them.


#3

Thanks for the response Randell. Do you think if I ignore the test case, it will be ok to submit the project anyway as my solution to the FCC drum machine challenge?


#4

The whole point of the new curriculum is to pass all the test cases of the projects, so probably not. That does not prevent you from showcasing your own implementation on a portfolio site.

Maybe there is still away to achieve the effect you are after while still passing the project tests. I bet if you think about it for a while, you will come up with a solution.

Maybe some CSS magic to display the content in such a way where you still only have the letters in the inner text of the divs.


#5

transforms? (maybe with a dash of z-index?) that’s the only thing I could think of …


#6

I am going to sleep. I will think about it in the morning and reply if I think of anything useful.