Skip to content

A React-based application that mimics the functionality of a 3x3 beatpad.

Notifications You must be signed in to change notification settings

Hintful/ReactPad

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

12 Commits
 
 
 
 
 
 
 
 
 
 
 
 

Repository files navigation

ReactPad

This project was bootstrapped with Create React App.

Live Demo

Feel free to try the live demo of this project on my website at: https://kurtchoi.dev/ReactPad.

Implementation Description

A React-based application that mimics the functionality of a 3x3 beatpad.

An audio file has been loaded to each DrumPad component via HTMLAudioElement API and then played appropriately by adding various Event Handlers: document.addEventListener() on keydown, keyup, and mouseup. Simultaneously, these Event Handlers also allowed each DrumPad's state, whether the key is being pressed or not by keeping a local state value of keydown, further allowing CSS effects to be carried out on activation.

Please check out /src/App.js for additional implementation detail.

How To Run

Simply run: npm start from the root working directory - website will be deployed locally at: https://localhost:3000.

About

A React-based application that mimics the functionality of a 3x3 beatpad.

Topics

Resources

Stars

Watchers

Forks