Drum Machime is a responsive and interactive web application built as part of the FreeCodeCamp Front End Development Libraries certification. It features nine drum pads, each mapped to a unique keyboard key (Q, W, E, A, S, D, Z, X, C), allowing users to play different drum sounds by clicking the pads or pressing the corresponding keys. The app displays the name of the sound currently being played and includes a volume control slider for adjusting playback volume dynamically. Developed with React and CSS modules, this project demonstrates handling of keyboard events, audio playback control, and state management to create an engaging user experience that meets all FreeCodeCamp user stories for the drum machine project.
- Interactive Drum Pads: Play drum sounds by clicking on on-screen buttons or pressing corresponding keyboard keys.
- Visual Feedback: Active drum pad highlights visually when triggered via mouse or keyboard.
- Dynamic Display: Shows the name of the currently played sound or the current volume level.
- Volume Control: Adjustable volume slider allows smooth control of playback volume from 0% to 100%.
- Keyboard Support: Listens for keydown and keyup events to trigger sounds and update UI accordingly.
- Responsive Audio Playback: Audio clips reset and play from the start on each interaction to ensure immediate sound response.
- Clean UI with Modular CSS: Uses CSS modules for scoped styling and consistent design.
- Efficient State Management: React hooks manage display text, active pad, and volume state seamlessly.
- HTML5, CSS3 Modules
- JavaScript
- React
- Prettier
- Clone the repository
- Install dependencies
pnpm install- Start the app
pnpm run dev
I appreciate your stars ⭐ and feedback!