https://github.com/cianhub/javascript-piano
The JavaScript Piano is a simple, responsive web application that allows users to play the chords in the C Major musical scale using either their keyboard or by click the buttons on screen.
https://github.com/cianhub/javascript-piano
audio bootstrap4 css3 html5 interactive javascript music
Last synced: 13 days ago
JSON representation
The JavaScript Piano is a simple, responsive web application that allows users to play the chords in the C Major musical scale using either their keyboard or by click the buttons on screen.
- Host: GitHub
- URL: https://github.com/cianhub/javascript-piano
- Owner: CianHub
- Created: 2018-08-25T00:46:06.000Z (over 7 years ago)
- Default Branch: master
- Last Pushed: 2018-08-25T22:35:43.000Z (over 7 years ago)
- Last Synced: 2025-01-30T22:47:56.039Z (12 months ago)
- Topics: audio, bootstrap4, css3, html5, interactive, javascript, music
- Language: HTML
- Homepage: https://cianhub.github.io/javascript-piano/
- Size: 3.88 MB
- Stars: 0
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: readme.MD
Awesome Lists containing this project
README
# JavaScript Piano
The JavaScript Piano is a simple, responsive web application that allows users to play the chords in the C Major musical scale using either their keyboard or by click the buttons on screen.
### Design
The application utilises a sparse responsive design.
The design of the app consisted of two main goals, practising CSS transitions upon a key being triggered and creating a clear and sleek interface for the user.
## Features
The application has several features:
1. Users can play the chords in the C Major musical scale using their keyboard.
2. Users can play the chords in the C Major musical scale using their mouse.
## Technologies Used
- [HTML](https://www.w3.org/)
- The project uses **HTML** to create the website.
- [CSS](https://www.w3.org/)
- The project uses **CSS** to style the website.
- [Bootstrap](https://getbootstrap.com/)
- The project uses **Bootstrap** to style the site and make it responsive.
- [JavaScript](https://developer.mozilla.org/bm/docs/Web/JavaScript)
- The project uses **JavaScript** to write the sites logic.
## Testing
As this project was created as a simple exercise in solving a problem using only vanilla JavaScript and practising CSS transitions, all of the testing involved was manual.
Test Keyboard Entry:
1. Press any of the corresponding keys on screen on your keyboard.
2. Verify thay the keyboard entry is working if the key returns visual feedback and plays the labelled chord upon entry.
Test Mouse Entry
1. Click any of the on screen keys.
2. Verify thay the mouse entry is working if the key returns visual feedback and plays the labelled chord upon being clicked.
## Deployment
This project was deployed to GitHub Pages and can be viewed at:
## Installation
1. Clone repository.
2. Open index.html in a web browser.
## Credits
### Acknowledgements
- The projects samples came from a free sample pack found at [Soundpacks.com](https://soundpacks.com/free-sound-packs/incredible-chords-vol-1/)
- The idea for the project came from the 30 day coding challenge at [Javascript30.com](https://javascript30.com/)