Ecosyste.ms: Awesome

An open API service indexing awesome lists of open source software.

Awesome Lists | Featured Topics | Projects

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🎹

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

**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.

## πŸ›  Built With

### Tech Stack

libraries


Languages

### Key Features

- **DrumPads that play audio elements when clicked or their key is pressed**
- **Display element showing the name of the audio played**

(back to top)

## πŸš€ Live Demo

visit [this link](https://development--joyful-fudge-583c6a.netlify.app) for a live demo!

(back to top)

## πŸ’» Getting Started

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.).

## πŸ‘₯ Authors

πŸ‘€ **TomΓ‘s Esquivel**

- GitHub: [@tomasesquivelgc](https://github.com/tomasesquivelgc)

(back to top)

## πŸ”­ Future Features

- [] **Volume control and switch functionalities**

(back to top)

## 🀝 Contributing

Contributions, issues, and feature requests are welcome!

Feel free to check the [issues page](../../issues/).

(back to top)

## ⭐️ Show your support

If you like this project give it a star.

(back to top)

## πŸ™ Acknowledgments

I would like to thank Microverse and my friends and family for their support.

(back to top)

## πŸ“ License

This project is [MIT](./LICENSE) licensed.

(back to top)