JavaScript 30–Day 1 Study Notes
November 1, 2020 — I signed up for Wes Bos’ free course JavaScript 30, the 30-day vanilla JavaScript coding challenge. The course involves 30 small projects which are intended to be done over 30 days, one each day. Of course, you can do them at any pace, but the projects are intended to take 20 minutes to a few hours to complete. The idea is to give the advanced beginner to intermediate JavaScript student a chance to practice coding regularly.
After taking a few months away from JavaScript, I was anxious to get back to learning. I’m not sure whether I will be able to complete one project each day. But I will try to write a summary of my experience with each project.
I started the first project, the Drum Kit. The HTML and CSS are already done in the starter files available on GitHub. A quick copy and paste, and I was ready to go. Bos added the JS code using a script tag at the end of the HTML file.
Essentially, the program played various drum sounds, each corresponding to different keyboard keys. The JS not only played the sound but added a CSS transition effect to the button.
The first thing I noticed is I forgot all about template literals. I made a note to review this. I had recently purchased, Eloquent JavaScript, and took the opportunity to open the book for the first time. There was a simple explanation of a template literal in a section describing strings. “Backtick-quote strings, usually called template literals, do a few more tricks…When you write something inside ${ } … its result will be computed, converted to a string, and included at that position.
`${90/3}`
//Will be displayed as 30I had never heard of template literals described in such a simple, easy-to-understand way.
Using a Key Event
window.addEventListener('keydown', playSound);When a key is pressed, the playsound function will run.
Then I learned something new: Transitionend event
To reset the CSS transition, Bos added the following function.
function removeTransition(e) {if(e.propertyName !== 'transform') return;this.classList.remove('playing');
Then used the foreach method to add an event listener to each key, and applied the function.
const keys = document.querySelectorAll('.key');keys.forEach(key => key.addEventListener('transitionend', removeTransition));
Similar to the keydown event, the transitionend event will start the function called removeTransition.
CSS also has similar events related to animations.
animationstart
animationend
animationinteration — when the animation is repeated.
The only big problem I encountered was getting the audio files to play on Windows10. The audio files contained each drum sound as a url. For some reason, Windows10 kept trying to open the file using Windows Media player. Not being able to play the sounds made this program a bit unsatisfying. However, I knew my code worked from using console.log and seeing the CSS transitions. Still, a good start for the first day of JavaScript 30.
