Off to a fun, illuminating start on Wes Bos’ Javascript30 course. The first project is a drumkit, the broad strokes of which are:
- for each sound sample, markup an audio element and a div indicating the trigger key and its corresponding sound, each such pair sharing a data-key value,
- write a function in which keydown events’ keyCodes are used to set constants, reset (using currentTime property) and then play the sound, add a class to the trigger div to enable a css transition,
- a second function which uses the ‘transitionend’ event to remove the transition class
This project prompted me to read up on some aspects of ES6, e.g.:
- const (and let) vs. var
- arrow functions
- string interpolation
- properties of the keydown object
- properties of the TransitionEvent
- audio methods
Also, I created my own version of a keyCodes identifier