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.
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.
Preview web application here: https://techiemokhele.github.io/drumkit-web-app/
