diff --git a/01 - JavaScript Drum Kit/README.md b/01 - JavaScript Drum Kit/README.md new file mode 100644 index 0000000000..ead06be1d1 --- /dev/null +++ b/01 - JavaScript Drum Kit/README.md @@ -0,0 +1,66 @@ +# 🥁 JavaScript Drum Kit + +A fun interactive drum kit built with vanilla JavaScript. Press keys on your keyboard or click the buttons to play drum sounds! + +## Features + +- 🎹 **9 Drum Sounds** - Clap, Hi-hat, Kick, Openhat, Boom, Ride, Snare, Tom, and Tink +- ⌨️ **Keyboard Support** - Press A, S, D, F, G, H, J, K, L to play sounds +- 📱 **Mobile Friendly** - Click/tap buttons to play on touch devices +- ✨ **Visual Feedback** - Keys animate when played +- 🔄 **Rapid Fire** - Play multiple sounds simultaneously + +## How to Use + +1. Open `index-FINISHED.html` in your web browser +2. **Press keyboard keys A through L** to play different drum sounds: + - **A** - Clap + - **S** - Hi-hat + - **D** - Kick + - **F** - Open Hat + - **G** - Boom + - **H** - Ride + - **J** - Snare + - **K** - Tom + - **L** - Tink + +3. Or **click/tap the drum pads** directly on the screen + +## Project Structure + +``` +├── index-FINISHED.html # Main HTML file +├── style.css # Styling and animations +├── sounds/ # Audio files folder +│ ├── clap.wav +│ ├── hihat.wav +│ ├── kick.wav +│ ├── openhat.wav +│ ├── boom.wav +│ ├── ride.wav +│ ├── snare.wav +│ ├── tom.wav +│ └── tink.wav +└── README.md # This file +``` + +## Technologies Used + +- **HTML5** - Audio elements and structure +- **CSS3** - Styling and key animations +- **Vanilla JavaScript** - Event handling and audio playback + +## Browser Support + +Works on all modern browsers that support: +- HTML5 Audio API +- ES6 JavaScript +- CSS3 Transforms + +## Notes + +- Sounds play with visual feedback (key scale animation) +- Multiple keys can be pressed simultaneously +- Audio resets on each keystroke for rapid playback + +Enjoy making beats! 🎵 \ No newline at end of file diff --git a/01 - JavaScript Drum Kit/index-FINISHED.html b/01 - JavaScript Drum Kit/index-FINISHED.html index ae9aacaf07..5de71ee628 100644 --- a/01 - JavaScript Drum Kit/index-FINISHED.html +++ b/01 - JavaScript Drum Kit/index-FINISHED.html @@ -59,14 +59,20 @@