Drum Kit

A simple web-based drum kit application that allows users to play drum sounds by clicking on virtual drum buttons or by pressing corresponding keyboard keys.

Features

• Interactive Buttons: Click on the drum buttons displayed on the screen to play different drum sounds.
• Keyboard Support: Play drum sounds by pressing the 'w', 'a', 's', 'd', 'j', 'k', 'l' keys on your keyboard.
• Visual Feedback: Buttons provide a visual "pressed" effect when activated, either by click or key press.

Technologies Used

• HTML5: For the basic structure and content of the web page.
• CSS3: For styling the drum kit, including button layouts, colors, and animations.
• JavaScript: For handling user interactions (clicks and key presses) and playing the audio files.

Repository

https://github.com/Shikhar1504/Drum-Kit

How to Use

1. Clone the repository (if applicable) or download the project files.
2. Open index.html in your web browser.
3. Click on the drum buttons or press the corresponding keys ('w', 'a', 's', 'd', 'j', 'k', 'l') to play drum sounds.

File Structure

• index.html: The main HTML file that structures the drum kit interface.
• styles.css: Contains all the CSS rules for styling the application.
• index.js: The JavaScript file that handles the logic for playing sounds and animations.
• images/: Contains image assets for the drum buttons.
• sounds/: Contains audio files for the drum sounds.

Credits

Made with ❤️ in Bangalore.