Drum Machine help - not passing tests

Hi,

Could somebody help me understand why my Drum Machine isn’t passing all of the tests? https://codepen.io/mikebish13/pen/eYmmgNp?editors=1010

It’s just basic styling at the moment whilst I nail down the functionality.

Cheers,
Mike

You are missing the class="clip" on the “W” audio element.

I’d suggest removing the autoplay attribute as it is doing the opposite of what you want. The autoplay attribute is a Boolean attribute.

2.4.2 Boolean attributes

The values “true” and “false” are not allowed on boolean attributes. To represent a false value, the attribute has to be omitted altogether.

1 Like

Brilliant - thanks, very much! Always helpful to have an extra pair of eyes, and I’m glad it was a simple fix.

Any thoughts on my general approach to tackling the problem? My solution seems a lot simpler compared to the FCC example, albeit that has much more functionality.

Mike

It’s never bad idea to start simple and then work your way to something more complex if/as needed. It also depends on your approach.

For example for the buttons you can take a more data driven approach and use a map to dynamically build out the buttons. It can have a few advantages, you’d be less likely to miss an attribute on one of the buttons using this approach. It is also more extensible.

Another common approach with React is constructing the app using components, like a display component, a button component etc., and then put them together inside a main parent component.

You don’t have to do any of this, but for learning it might be worth trying out more than one approach to building this app.