30 days Javascript challenges, 1st-day drum-kit

Linuk
Linuk
Aug 27, 2017 · 4 min read
Javascript 30 1st Day: drum kit

As you may know, Wes Bos built a really cool challenges website called Javascript 30 which provided 30 days of vanilla javascript projects without any other libraries needed. The tutorials level from beginning to intermediate, also come with the starter packs which you will need for HTML, CSS and other files which let you focus on Javascript only. The tutorial videos range from 10 to 20 mins, the first one is clear, organised and easy to follow, I believe the following 29 projects will be the same, highly recommended!

The author also provides another free course like What The Flexbox?! and paid courses like React For Beginners, Learn Redux and more, you can access them HERE.

This post contains my learning notes of the 1st day of the tutorial, if you are a beginner you might find something never seen, it’s a good chance to pick it up then :) You can read this short article first then start the tutorial, which might be easier for complete Javascript beginners.


The first project is making drum kit which you will use Javascript to :
1. Control the audio elements.
2. Control the DOM elements’ classes.
The final project production is HERE.

And here are few things we implement in this project:
1. querySelector with certain data set value.
2. <audio> method and properties
3. Use Array.from() to iterate DOM elements
4. transitionend events.


QuerySelector with certain data set value.

We can use querySelector() and querySelectorAll() to select the DOM element which match the css selector, the syntax is similar to jQuery and friendly.

// select <div id="container">
const container = document.querySelector('div#container')
// select all <li class="item">
const items = document.querySelectorAll('li.item')
// select <h1 class="white"> and <h2 class="blue">
const titles = document.querySelectorAll('.white', 'blue')

Moreover, we can also use it to select the element with desired data value.

// select <button data-val="8">
const button = document.querySelector('button[data-val="8"]')
// select <input name="email">
const emailInput = document.querySelector('input[name="email"]')

In this project, you will use this method to control the element according to the key users press.


<audio> method and properties

<audio> and <video> are both belong to HTMLMediaElements which have some shared methods and properties. Here are some basic methods and properties:

// select the audio element.
const audio = document.querySelector('audio')
// play the audio.
audio.play()
// pause the audio.
audio.pause()
// set the audio to autoplay once loaded.
audio.autoplay = ture
// set current playing time to zero, which can make reset the whole playing process.
audio.currentTime = 0
// get a boolean of whether the audio is finished.
const audioFinshed = audio.ended
// set the audio to auto replay.
audio.loop = true

You will only use audio.play and setting audio.currentTime in the project, you can read more in MDN.


Use Array.from() to iterate DOM elements

Array.from() is the syntax from ES6 which create a new Array from an array-like or iterable object. For example, when we use querySelectorAll() or getElementByTagName() to select a bunch of items, the return result is an array-like of the DOM elements, and you can’t implement forEach() which is quite annoying :”(

// Says we want to add event listener to all separated buttons
const buttons = document.querySelectorAll('button.btn')
// The buttons are objects so we need to iterate it.
for (const i = 0, len = buttons.length; i<len; i++){
buttons[i].addEventListener('click', handler)
}

It’s not that bad but it will be more elegant to use Array.from() B )

// Now the buttons are real array!
const buttons = Array.from(document.querySelectorAll('button.btn'));
buttons.forEach(btn => btn.addEventListener('click', handler));

Compared to for loop, forEach() always make me feel better :P

BTW, it can also create array from string like python

const arr = Array.from("linuk");console.log(arr) 
// ["l", "i", "n", "u", "k"]

You can read more about Array.from() in MDN


Transitionend events.

The transitionend event is fired when a CSS transition has completed. So we can use add an event about transitionend to handle something like removing the element after the transition is completed.

In this project, whenever the user presses the keyboard, Javascript adds the playing class the the corresponding key element to display the transition animation and flash the key. After the animation, we use transitionend to remove a class once the transition animation has ended.

const keys = Array.from(document.querySelectorAll('div.key'))keys.forEach(key => key.addEventListener('transitionend', removeTransition)

And we can use event.propertyName to access the transition’s name, and set the handler only react to the certain transition.

const removeTransition = (e) => {
if(e.propertyName === 'transform'){
// ...
}
}

You can read more about transitionend in MDN.


Above are what I have learned or what I want to take a note of it in this drum-kit tutorials. Hope you somehow find something interests you. If there is anything you would like to say or share welcome to leave some comments below. Any response is welcome and clap is highly appreciated which will make my day, thank you :)

)

Linuk

Written by

Linuk

Full-time Computer Science Student | Web Developer | React Enthusiast | www.linuk.co.uk

Welcome to a place where words matter. On Medium, smart voices and original ideas take center stage - with no ads in sight. Watch
Follow all the topics you care about, and we’ll deliver the best stories for you to your homepage and inbox. Explore
Get unlimited access to the best stories on Medium — and support writers while you’re at it. Just $5/month. Upgrade