🥁 Drum Machine

A beautiful, responsive drum machine built with React and TypeScript for the FreeCodeCamp Front End Development Libraries certification.

Desktop	Mobile

✨ Features

• 9 Interactive Drum Pads - Click or use keyboard keys (Q, W, E, A, S, D, Z, X, C)
• Real-time Audio Playback - High-quality drum samples from FreeCodeCamp
• Visual Feedback - Animated button states and display updates
• Responsive Design - Works perfectly on desktop and mobile devices
• Modern UI - Sleek gradient design with glassmorphism effects
• Keyboard Support - Full keyboard interaction for seamless playing

🎵 Drum Sounds

• Q - Heater 1
• W - Heater 2
• E - Heater 3
• A - Heater 4
• S - Clap
• D - Open Hi-Hat
• Z - Kick n' Hat
• X - Kick
• C - Closed Hi-Hat

🚀 Technologies Used

• React 18 - Modern React with hooks
• TypeScript - Type-safe development
• Tailwind CSS - Utility-first styling
• Vite - Fast build tool and dev server
• Lucide React - Beautiful icons

🎯 FreeCodeCamp Requirements

This project fulfills all FreeCodeCamp user stories:

✅ Outer container with id="drum-machine"
✅ Display element with id="display"
✅ 9 clickable drum pads with class drum-pad
✅ Audio elements with class clip and proper IDs
✅ Click functionality triggers audio
✅ Keyboard functionality (Q, W, E, A, S, D, Z, X, C)
✅ Display updates with sound descriptions

🛠️ Installation & Setup

# Clone the repository
git clone https://github.com/Ayokanmi-Adejola/Drum-Machine

# Navigate to project directory
cd drum-machine

# Install dependencies
npm install

# Start development server
npm run dev

# Build for production
npm run build

🎮 How to Use

1. Click any drum pad to play the corresponding sound
2. Press keyboard keys Q, W, E, A, S, D, Z, X, C to trigger sounds
3. Watch the display update with the name of each sound
4. Enjoy creating beats and rhythms!

🎨 Design Features

• Gradient Background - Beautiful purple-to-blue gradient
• Glassmorphism - Modern frosted glass effect
• Hover Effects - Smooth transitions and scaling
• Active States - Visual feedback when pads are pressed
• Responsive Grid - Perfect layout on all screen sizes
• Typography - Clean, modern font choices

📱 Responsive Design

The drum machine is fully responsive and works great on:

• Desktop computers
• Tablets
• Mobile phones
• All modern browsers