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
- Download the source code from the github repository above.
- Delete the
<script>
contents of theindex.html
file. - Implement the JavaScript code in the
<script>
section of theindex.html
file - If you think you need to see a video solution first, be sure to sign up for Wes Bos's JavaScript30 course.
- Add a link to your finished project below!
What You Should See
- 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.
Leave a Reply