sazdg/chord-finder

🎹🎵 Client web application to find chords through keyboard UI

Chord Finder 🎹

This is a js web application that tells you what chord you are playing on the piano in any inversion. Click or keypress the notes to build your chord! If you select two notes it will tell you what the interval is between those two notes.

I started by rewriting my previous C++ chord finder console application in javascript and added the web interface as I went.

[View Web Application]

Event Handlers

Code is triggered by clicking or keypressing on the keyboard UI. Also using Automatic Semicolon Insertion.

// mouse click event
$(".key").click(function () {
	//toggle key color key when pressed
	//pass note id to add to chord
	$(this).toggleClass("pressed")
	processDOMChord($(this).attr('id'), userChordIds)
})

// keyboard event
$("html").keypress(function (element) {
	let noteCode = keyMapping[element.which]
	$("#" + noteCode).toggleClass("pressed")
	processDOMChord(noteCode, userChordIds)
	console.log(noteCode)
})

Unit Testing & Coverage

Using Facebook's Jest for unit testing. Configured Travis-CI for continuos integration on every commit and pull request as well as coverage reporting from Coveralls

Test Configuration in package.json

{
	"build": "node env",
	"test": "jest --coverage --coverageReporters=text-lcov | coveralls",
	"jest-watch": "jest --watchAll --coverage",
	"jest": "jest --coverage --coverageReporters=text-lcov | coveralls"
}

For local testing, remove the coveralls flag, else err response 422

{
	"build": "node env",
	"test": "jest --coverage --coverageReporters=text-lcov",
	"jest-watch": "jest --watchAll --coverage",
	"jest": "jest --coverage --coverageReporters=text-lcov"
}

Development

// download the repo locally from github and cd into the folder
gh repo clone ManuelVargas1251/Chord-Finder
cd Chord-Finder

// install browserify globally
npm install -g browserify

// download node modules locally
npm install

// run js tests
npm test

// build new bundle
browserify src/js/index.js > bundle.js

Environments

By using https://raw.githack.com/ I created a working lower environments to test code in any committed branch. I was also able to provide test statuses for every branch through Travis CI and Coveralls.

Production

Development

Reference

Musical Chord Wiki

Musical Interval Wiki