30 things I learned from Javascript 30

Wes Bos has made an awesome course called Javascript 30 that he gives away for free. If you have the time or the inclination to complete the course, do it! This post serves as some notes for myself and I hope that anyone else reading can gain some insights about Javascript and CSS programming. Here’s the tl;dr:

All code for the course and referenced in this post is  available fo’ free. It’s on  GitHub.

Day 1

To start the course off we built a drumkit so that when you press a button the browser makes a sound. It’s a very neat use of the <audio> HTML5 element. My biggest takeaway for the first day was learning the CSS transform property (transform — CSS | MDN). In the code we added a listener for every keydown event and passed in a function that plays the appropriate noise associated with that key. We first went through all of the elements that have a “key” class on them and attached an event listener for the “transitionend” event (transitionend — Event reference | MDN). The transitionend fires when a CSS transition ends, go figure! When the user clicks a button we add a “playing” class that begins the transform. Once the “transitionend” fires for an element we remove the “playing” class. The result is that there’s a real nice yellow glow around the button when we press the corresponding key!

Result: https://01-js30-drumkit--connor11528.repl.co/

Relevant code:

/* transform CSS styling */
.playing {
  transform: scale(1.1);
  border-color: #ffc600;
  box-shadow: 0 0 1rem #ffc600;
}

window.addEventListener('keydown', playSound);

/* take in the event and play the appropriate sound file */
function playSound(e){
  // ...
}

// add listener to every key for when css transitions end
keys.forEach(key => {
  key.addEventListener('transitionend', removeTransform);
});

function removeTransform(e){
  if(e.propertyName !== 'transform') return; // only listen for transform changes
  this.classList.remove('playing');
}

Day 2

In day two we built a clock with a moving second hand. The neat bits were about the transform and transition (transition — CSS | MDN) CSS properties. Specifically, we used the transition-timing-function (transition-timing-function CSS | MDN) so that the second hand will bounce over and back like a real mechanical second hand. In the wise words of the Mozilla Developer Network:

This [transition-timing-function], in essence, lets you establish an acceleration curve so that the speed of the transition can vary over its duration.

We made a Javascript function that gets the datetime for right now, performs degree calculations and adjusts the CSS transform properties accordingly. Wes uses ES6 in the Javascript, which isn’t too hard to pick up if you’re familiar with regular ES5 code.

Result: https://repl.it/@connor11528/02-JS30-Clock

Relevant code:

/* CSS for the hand effects and having rotation occur from center of the clock */
.hand {      
  width:50%;      
  height:6px;      
  background:black;      
  position: absolute;      
  top:50%;      
  transform-origin: 100%;      
  transform:rotate(90deg);      
  transition: all 0.05s;      
  transition-timing-function: cubic-bezier(0.1, 2.7, 0.58, 1)    
}

/* Javascript */
const setDate = () => {      
  const now = new Date();      
  const seconds = now.getSeconds();      
  const minutes = now.getMinutes();      
  const hours = now.getHours();      
  
  /* degree calculations go here... */
  secondHand.style.transform = `rotate(${secondsDegrees}deg)`;       
  minuteHand.style.transform = `rotate(${minutesDegrees}deg)`;      
  hourHand.style.transform = `rotate(${hoursDegrees}deg)`;    
}
setInterval(setDate, 1000);

The rest of this post is available on Medium