Drumkit in SCSS and JavaScript

Screengrab of coded drumkit.

This drumkit, hand-coded in (lots of) CSS, became a great opportunity to teach myself SCSS.

Hitting a key animates the drum and plays the corresponding audio — based on a JavaScript challenge from Wes Bos’ JavaScript30 course.

In case you’re thinking it would have been easier to create the drumkit as an SVG in Illustrator — yes, it would! But I had previously made projects with SVG and JS, so I did it the Sassy way for a new challenge.

Demoed at CodePen Brighton Show & Tell October 2018.

Best viewed in Chrome on desktop.