It’s the first day doing this Javascript Challenge I learned the other day.  I’m excited to be able to sharpen my skills and improve as a programmer.  Hopefully these challenges can help other people with their programming journey as well.  I will try to be as clear as possible, but this is new to me so bear with me!  So let’s begin.

 

The first challenge is creating interactive functionality for a Drum Kit.  Basically I need to play a sound whenever a corresponding key is pressed and add a yellow highlight around the box.  In order to do this, I’m going to have to understand the addEventListener() and querySelectorAll() function, data attributes and audio tags for HTML5, and how to loop through the list the querySelectorAll function returns.  Reading this post will give you an idea on what those things are.

 

What is addEventListener() function?

The addEventListener() function attaches an event handler to a specified element.

Syntax: element.addEventListener(‘event’, function(), useCapture(optional))

Basically you add this function to an element whenever you want to listen for some kind of event.  An event could be keypress, click, or mouseover.  Click here to see the rest of events.  A situation you would use this is when you have to add multiple events to an element.  With onclick it is not possible to add multiple events so it is best to use addEventListener whenever you need more than one event on a element.  Be careful though, addEventListener isn’t compatiable with IE browsers.  Instead use the attachEvent method for IE browser using versions below 9.

 

 

What are Data Attributes and Audio Tag?

Next we have Data Attributes for HTML5.  These are pretty cool.  Data attributes store additional/custom information about an element.  They can be useful whenever using CSS and even Javascript.  The way to use Data Attributes is the same way you use different attributes in HTML.  It is just like the href attribute for anchor tags, src attribute for image tags, and the class attribute for any kind of HTML element.  An example of what a Data Attribute looks like is basically “data-” then whatever data you want to hold next to that.  For instance data-key=”65″ (key : 65).  And if you think about it, it is basically just a normal key/value pair that is stored on that particular element.

 

In this project, you’ll see there are different sounds that relate to a particular instrument.  The sounds are using an audio (<audio></audio>) tag.  An audio tag specifies a standard way to embed audio in a web page.  Just like the image tag, the audio tag accepts a file path from the sound file using its src attribute (just like image tag).  It accepts three different formats which is mp3, ogg, and wav.  The different properties this tag has allows you to play/pause audio and also set volume and duration.

 

Using querySelectorAll() and Looping Thru NodeList

In Javascript, there are many different ways to select any given element within the DOM.  One way is to use a function called querySelector.  This returns the first element within the document that matches the specified selector.  An example of this would look like this:

var jac = document.querySelector(“.jac”);

What is in quotes would be considered a CSS class jac.  Now we have the querySelectorAll function which returns a list of the elements within the document that match the specified group of selectors.  The object returned is a NodeList.  Something to keep in mind when using querySelectorAll is, since it returns a NodeList, you can’t loop through with a forEach it like you would any other array.  In order to loop through this NodeList using pure Javascript you have to use the .call() function.  So your loop would look like this:

keys.forEach.call(keys, function(el) {

     el.addEventListener(‘transitionend’, removeTransition);

})

keys is the array, el (being passed into function) is each individual key, and on each key, a event listener is being added to it.  This is how you would you to loop a NodeList.

 

Conclusion

That pretty much sums up the Day 1 project.  I definitely learned a lot and enjoyed trying to explain it so that it would really stick in my mind.  Hopefully this helps somebody out there.  Day 2 project seems to be about making a clock so that should be interesting.  I’ll see you in the Day 2 blog post.

 

Oh yea, here is the link if you wanted to checkout the Drum Kit project.

Day 1: Drum Kit