Sights, sounds, and event.key-downs! The goal of this project was to create an digital instrument using only HTML , CSS, and Javascript alongside the newly learned JQuery.
Upon loading the web page, you are greeted with an arrangement of seven drums marked with an image and alpha character. Pressing one of the assigned letters on you keyboard triggers the corresponding audio sample along with a brief animation of the button.
Though I might be rhythmically challenged, this project was a great use case for learning about Javascript's event.key listeners, the use of community npm packages, as well as excellent target practice for JQuery elements in the html.
Feel free to take the kit for a spin and smash some buttons with the live project here
"I got blisters on me fingers!" -Ringo Starr The Beatles
- clone the repository to your desired location.
- open the 'index.html' page in the browser of your choice.
Folder containing CSS style sheet, main html page, and the index.js logic file.
Contains all images used in the project.
Contains all audio files used in the project.
Jake Brunner - jbbrunner10@gmail.com
LinkedIn - https://www.linkedin.com/in/jake-brunner-21760522b/
This Repository - https://github.com/jandrew13/Web-Dev-Bootcamp