lawlawson / JS30-drum-kit

Home Page:https://heartfelt-heliotrope-c6a879.netlify.app/

Geek Repo:Geek Repo

Github PK Tool:Github PK Tool

JavaScript30 Drum Machine

This project is a part of the JavaScript30 challenge by Wes Bos, where participants build 30 different projects using only HTML, CSS, and vanilla JavaScript. In this particular project, we've created a drum machine where users can play various drum sounds by pressing corresponding keys on their keyboard.

drum kit screenshot

Table of Contents

Demo

View Demo

Features

  • Play drum sounds by pressing corresponding keys or clicking drum pads
  • Cross-browser compatibility
  • Easy to understand and extend with vanilla JavaScript

Getting Started

Prerequisites

  • Web browser (Chrome, Firefox, Safari, etc.)

Installation

  1. Clone the repository:
git clone https://github.com/your-username/JS30-drum-kit.git
  1. Navigate to the project directory:
cd JS30-drum-kit
  1. Open index.html in your preferred browser.

How to Use

  1. Press keys corresponding to the displayed drum pads or click on the pads using the mouse.
  2. Enjoy the various drum sounds!

Contributing

Contributions are what make the open-source community such an amazing place to learn, inspire, and create. Any contributions you make are greatly appreciated.

  1. Fork the project.
  2. Create your feature branch (git checkout -b feature/AmazingFeature).
  3. Commit your changes (git commit -m 'Add some AmazingFeature').
  4. Push to the branch (git push origin feature/AmazingFeature).
  5. Open a pull request.

Acknowledgements

  • Thanks to Wes Bos for the JavaScript30 challenge and inspiration.

About

https://heartfelt-heliotrope-c6a879.netlify.app/


Languages

Language:HTML 57.4%Language:CSS 25.1%Language:JavaScript 17.5%