Drum Machine fails Test 6

I know there are several questions with this topic, but none seem to help.

The feature is there, the keys trigger the sounds, but the automatic test fails.

I think there is no lower/upper case problem, the ‘A’ key press just doesn’t trigger the event handler at all.
But the handler is registered on the document, and from the logs I can see ‘Q’ and ‘W’ keys are previously triggered by the test suite, so I’m at a loss.

Here is my codepen:

I finally solved it.

The problem was: out of laziness, I stylized the drumpads as a column-first grid and shuffled the pad id array order accordingly to respect the qwe-asd-zxc layout.
Although it respects the user stories, this somehow confuses the tests.

//!! NO !!
const drumpadIds = ["Q", "A", "Z", "W", "S", "X", "E", "D", "C"]; 

#drum-pad-container {
    display: grid;
    grid: repeat(3, 100px) / auto-flow 100px;

//!! YES !!
const drumpadIds = ["Q", "W", "E", "A", "S", "D", "Z", "X", "C"];

#drum-pad-container {
    display: grid;
    grid: auto-flow 100px / repeat(3, 100px);

To save browsing the grid css docs, I wasted a lot of time. :stuck_out_tongue:

1 Like