Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/tomasesquivelgc/drum-machine
π₯πΆ"Drum Machine" is a music box that you can play by clicking or pressing the according key like a pianoπΉ
https://github.com/tomasesquivelgc/drum-machine
drum-machine freecodecamp-project interactive javascript javascript-library reactjs
Last synced: 7 days ago
JSON representation
π₯πΆ"Drum Machine" is a music box that you can play by clicking or pressing the according key like a pianoπΉ
- Host: GitHub
- URL: https://github.com/tomasesquivelgc/drum-machine
- Owner: tomasesquivelgc
- License: mit
- Created: 2023-07-07T21:04:43.000Z (over 1 year ago)
- Default Branch: development
- Last Pushed: 2023-09-11T20:58:20.000Z (about 1 year ago)
- Last Synced: 2024-10-16T07:01:31.782Z (22 days ago)
- Topics: drum-machine, freecodecamp-project, interactive, javascript, javascript-library, reactjs
- Language: JavaScript
- Homepage: https://development--joyful-fudge-583c6a.netlify.app
- Size: 60.5 KB
- Stars: 2
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
Drum Machine
# π Table of Contents
- [π About the Project](#about-project)
- [π Built With](#built-with)
- [Tech Stack](#tech-stack)
- [Key Features](#key-features)
- [π» Getting Started](#getting-started)
- [Setup](#setup)
- [Prerequisites](#prerequisites)
- [Install](#install)
- [Usage](#usage)
- [Run tests](#run-tests)
- [Deployment](#deployment)
- [π₯ Authors](#authors)
- [π Future Features](#future-features)
- [π€ Contributing](#contributing)
- [βοΈ Show your support](#support)
- [π Acknowledgements](#acknowledgements)
- [π License](#license)**Drum Machine** is a simple project that aims to clone [FreeCodeCamp's version](https://drum-machine.freecodecamp.rocks). To do this, I have built a page using React (Vite) and copied the CSS to get the same look. Some of the functionalities are still missing (volume control and power/bank switches) but the basic requirements are met.
libraries
Languages
- **DrumPads that play audio elements when clicked or their key is pressed**
- **Display element showing the name of the audio played**
visit [this link](https://development--joyful-fudge-583c6a.netlify.app) for a live demo!
To get a local copy up and running, follow these steps.
### Prerequisites
In order to run this project you need a browser.
### Setup
Clone this repository to your desired folder:
Example commands:
```sh
cd my-folder
git clone [email protected]:myaccount/my-project.git
```
### Install
Install this project with:
Example command:
```sh
npm install
```
### Usage
To run the project, execute the following command:
```sh
npm run dev
```
### Run tests
To run tests, click on the hamburger button and select "Markdown previewer" (note: these are the tests that FreeCodeCamp include.).
π€ **TomΓ‘s Esquivel**
- GitHub: [@tomasesquivelgc](https://github.com/tomasesquivelgc)
- [] **Volume control and switch functionalities**
Contributions, issues, and feature requests are welcome!
Feel free to check the [issues page](../../issues/).
If you like this project give it a star.
I would like to thank Microverse and my friends and family for their support.
This project is [MIT](./LICENSE) licensed.