https://github.com/captaincluster/drum-machine

The third project for the "Front End Development Libraries" course provided by FreeCodeCamp.
https://github.com/captaincluster/drum-machine

freecodecamp freecodecamp-project front-end html javascript music react

Last synced: 5 days ago
JSON representation

The third project for the "Front End Development Libraries" course provided by FreeCodeCamp.

• Host: GitHub
• URL: https://github.com/captaincluster/drum-machine
• Owner: CaptainCluster
• License: gpl-3.0
• Created: 2024-03-14T18:06:03.000Z (8 months ago)
• Default Branch: main
• Last Pushed: 2024-03-15T22:41:54.000Z (8 months ago)
• Last Synced: 2024-03-16T10:53:05.610Z (8 months ago)
• Topics: freecodecamp, freecodecamp-project, front-end, html, javascript, music, react
• Language: JavaScript
• Homepage:
• Size: 176 KB
• Stars: 0
• Watchers: 1
• Forks: 0
• Open Issues: 0
• Metadata Files:
  • Readme: README.md
  • License: LICENSE

Awesome Lists containing this project

README

        
# Drum Machine

Drum Machine is the third project for the *Front End Development Libraries* course that is hosted by **FreeCodeCamp**.

It utilizes the **React** JavaScript library to build the UI. The user can either click the drum pads or press specific

keys to trigger various audio samples.

[![License: GPL v3](https://img.shields.io/badge/License-GPLv3-blue.svg)](https://www.gnu.org/licenses/gpl-3.0)

📚 Dependencies

---

![React](https://img.shields.io/badge/react-%2320232a.svg?style=for-the-badge&logo=react&logoColor=%2361DAFB)

![NodeJS](https://img.shields.io/badge/node.js-6DA55F?style=for-the-badge&logo=node.js&logoColor=white)

> [Learn more about React here!](https://react.dev/)

In order to use the project, you need to download **NodeJS** for the necessary commands.

> [Install NodeJS here](https://nodejs.org/en/)

After this, you have to install additional project dependencies, while being in the directory of the project.

This can be done by running the following command:

> `npm install`

🚀 Running the program

---

In order to start the program, all you need to do is run this command:

> `npm start`

After this, you are good to go!

👀 Example

---



  



> The user presses the *Z* key and triggers the *Kick n' Hat* audio sample. The pressed drum pad changes its color temporarily.

🙏 Credits

---

![FreeCodeCamp](https://img.shields.io/badge/Freecodecamp-%23123.svg?&style=for-the-badge&logo=freecodecamp&logoColor=green)

This project is a part of **FreeCodeCamp** *Front End Development Libraries Course*. FreeCodeCamp is the provider of the

audio samples for the project. While some ideas have been received from their example project and the instructions have been 

followed, all the components and the style have been made by me, and follow my vision, with both the inspiration and constraints

in mind.