🥁 JS Drum Kit — Vanilla JavaScript Drum-Pad in the Browser

A simple, keyboard-driven drum kit built with vanilla HTML, CSS, and JavaScript.
Press letter keys (A, S, D, F, G, H, J, K, L) to trigger different drum sounds — just like a real drum pad 🎹🥁

---

🎯 Project Purpose

• A clear demonstration of core JavaScript fundamentals: DOM manipulation, event handling, audio playback, and CSS animation.
• Shows that I’m comfortable going to the browser “bare metal” — no frameworks, no abstractions.
• Serves as a baseline for sound UI/UX, timing, and interaction logic — useful even in modern React/TypeScript projects.
• Emphasizes clean, readable code and project structure, even for small-scale utilities.

---

🔧 Tech Stack

• HTML — structure of drum keys
• CSS — layout and animations for key-press feedback
• JavaScript (vanilla) — event listeners, audio playback logic, UI state updates

No build system, no dependencies — just plain JS and browser APIs.

---

🎹 How It Works (Core Logic)

• Listens for keydown events via window.addEventListener
• For each key event, checks for a mapped data-key attribute on both the visual key element and its corresponding audio element
• If a match is found:
  • Resets audio playback time to allow rapid repeated hits
  • Plays the audio
  • Triggers a visual animation on the key (e.g. a brief “pressed” effect)
• On transitionend (or after a short timeout), removes the animation class so keys return to normal

This simple pattern demonstrates handling of real-time user input, managing UI feedback, and working with native browser APIs — skills relevant in any frontend context.

---

✅ How to Run It Locally

1. Clone or download the repo
2. Open index.html in a browser (Chrome, Firefox, Safari — anything modern)
3. Press the keys: A S D F G H J K L and enjoy the drum sounds!

No build step or local server required.

---

📁 Project Structure

js-drum-kit/
├── index.html # Layout and key elements
├── style.css # Styling and key animations
├── index.js # Core JS logic: event handling & audio playback
└── sounds/ # Drum sound files mapped via data-key