A simple browser-based front-end application for students of music theory, this tool allows users to add notes to a grand staff, select and move notes around, examine the relationships between notes, and listen to the chords they've created.
When the user clicks on a line or space, a note is appended to a corresponding div.
When notes are selected, they can be moved around using the arrow keys.
When multiple notes are selected, you can see the intervals between the notes, and where applicable, the quality and inversion of the chord corresponding to those notes.
I challenged myself to style this app with raw CSS. The result is imperfect, but I learned a ton about CSS in the process. There are many kinks left to be worked out. Furthermore, since this application relies heavily on keyboard events, it can't currently be used on mobile devices.
npm install
npm run react-dev
npm run server-dev
See a live demo at https://music-theory-tutor.firebaseapp.com/