i183x / DrumKit

Play your drum here:

Drum Kit

This is a fun little web application that simulates a drum kit. Users can click on the respective buttons or press the corresponding keys on their keyboard to produce different drum sounds. The project is built using HTML, CSS, and JavaScript.

Features

• Interactive drum kit with 7 different drum sounds
• Responsive design that works well on various screen sizes
• Animations and sound effects for an engaging user experience
• Keyboard and mouse support for triggering drum sounds

Technologies Used

• HTML5
• CSS3
• JavaScript

Usage

1. Clone or download the repository to your local machine.
2. Open the index.html file in a modern web browser.
3. Click on the drum buttons or press the corresponding keys (w, a, s, d, j, k, l) on your keyboard to play the drum sounds.
4. Enjoy the interactive drum kit experience!

Project Structure

• index.html: The main HTML file that defines the structure of the web page.
• styles.css: The CSS file that styles the elements on the page.
• index.js: The JavaScript file that handles the drum sound functionality and animations.
• sounds/: Directory containing the audio files for the different drum sounds.
• images/: Directory containing the image files for the drum buttons.

Credits

This project was created as part of the Web Development Bootcamp by Angela Yu on Udemy. The audio files and drum images were provided by the course resources.