JAndrew13 / DrumKit

Another early JavaScript project, focused on mixing JavaScript and Bootstrap in a webpage, as well as an introduction to JQuery.

Drum Kit

About The Project

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

Table of contents

• Prerequisites
• Installation
• Directory
• Contact
• Acknowledgments

Prerequisites

• any HTML code editor of your choice, such as VS Code, Atom, etc.

Installation

1. clone the repository to your desired location.
2. open the 'index.html' page in the browser of your choice.

(back to top)

Directory

/Root

Folder containing CSS style sheet, main html page, and the index.js logic file.

/images

Contains all images used in the project.

/sounds

Contains all audio files used in the project.

(back to top)

Contact

Jake Brunner - [e-mail]

LinkedIn - https://www.linkedin.com/in/jake-brunner-21760522b/

This Repository - https://github.com/jandrew13/Web-Dev-Bootcamp

(back to top)

Acknowledgments

• The 2022 Web Development Course
• The London App Brewery

(back to top)