Drum Kit JavaScript Project

Hosted Project

https://js-beginners.github.io/javascript30-drumkit/

Github Source Files

https://github.com/JS-Beginners/javascript30-drumkit

JavaScript Used

• DOM Manipulation
• Control Structures
• HTML Audio API
• JavaScript CSS Manipulation
• addEventListener

Project Description/Summary

The point of this project is to have each key, when pressed, make a corresponding drum noise. It also uses CSS transitions and animations to make the project more interactive to the user. I completed this project earlier in my JavaScript learning phase. I found it quite confusing because I had never used the HTML audio API or the selection of DOM elements using the date-key attribute.

New Things Learned or Refreshed

This project involved the use a “data-key” attribute that I'd never seen before. The “data-key” attribute was then selected using the CSS selector[attribute] method. I found this interesting as this was the first time I had saw this done. I also learned how to associate an audio file with the audio API.

Time to Code

This took about 30 minutes to code.

Lines of Code

This took about 103 lines of code in total, about 40 of which is JavaScript.

Biggest Take Away(s)

Retrieving elements from the DOM is not limited to just “id”, “class”, and elements. You can also select DOM elements using the elements attributes.

Your Turn!

What to Accomplish

1. Download the source code from the github repository above.
2. Delete the <script> contents of the index.html file.
3. Implement the JavaScript code in the <script> section of the index.html file
4. If you think you need to see a video solution first, be sure to sign up for Wes Bos's JavaScript30 course.
5. Add a link to your finished project below!

What You Should See

1. When you type the key displayed in the browser, you should hear the corresponding audio file.

Need to see the video solution for this project?

Get Wes's JavaScript30 Course.