JavaScript30 Episode1: Drum Kit

A few designer friends over at Automattic gathered up to take the JavaScript30 class by Wes Bos (check it out, it’s free!). Thought I should join them. I’ve been itching to take on some modern JS class but never gathered the will/patience/time to do it. This one seems like a sweet deal so, I signed up!

To make the commitment a little more, well, official, I decided to document my findings throughout the courses so, here I am!

First course was about wiring up a Drum Kit in JS. Starter files had the HTML+CSS ready and I just needed to add the JS6 code. Every time a key is hit, the drum kit will play the corresponding sound (say clap, hihat, kick, etc) while doing a small animation of the key on-screen to show which one got hit. Neat!

keys-anim

So, here’s what I learned from the first course called Drum Kit:

  • data- attributes
  • attribute selectors
  • classList add/remove/toggle!
  • arrow function (=>)
  • listening for the transitionend event

It’s been some time since I tinkered with JavaScript and it’s clear that the language has really evolved with JS6. Makes it taking the next courses even more interesting. I’ll let you know!

One thought on “JavaScript30 Episode1: Drum Kit

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s