Can't pass drum machine test

JavaScript
1

I was doing the frontend frameworks project “drum machine”.

Completed all the user stories, but can’t pass the test.

What could be wrong? Can you have a look, please?

Here is the codepen:

Your browser information:

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

Challenge: Build a Drum Machine

Link to the challenge:

2

Read the error messages carefully, they tell you what’s wrong.

  1. 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.
  • your .drum-pad elements have no id
  1. 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.).
  • each <audio> should be a child of a .drum-pad element, not a sibling

The rest of the tests fail because they can’t find your audio elements, as they’re not where they’re supposed to be.

3

Ohh, Gosh. :grinning_face_with_smiling_eyes: I had no idea that I can see the error message. I was just guessing what could be wrong :grinning_face_with_smiling_eyes:

Thanks for the help!

I passed 7/8 now, the last one’s error message is this:

“No audio plays when the C key is pressed: expected true to be false”

However, it does play a sound when I press or click C key and button.

Am I missing smth again?

4

Just a little typo in this part:

    else if (e.key === "C" || e.key === "c"){
      E.current.play();
      setText("Closed-HH")
    }
5

Ohh, thank you very much!!

6

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