JSFiddle - React, Tailwind, and code Playground

by magicalex

HTML

<form>
	<label for="note">Note<label>
	<select name="note" id="note">
		<option value="C">C</option>
		<option value="C#">C#</option>
		<option value="C#">Db</option>
		<option value="D">D</option>
		<option value="D#">D#</option>
		<option value="D#">Eb</option>
		<option value="E">E</option>
		<option value="F">F</option>
		<option value="F#">F#</option>
		<option value="F#">Gb</option>
		<option value="G">G</option>
		<option value="G#">G#</option>
		<option value="G#">Ab</option>
		<option value="A">A</option>
		<option value="A#">A#</option>
		<option value="A#">Bb</option>
		<option value="B">B</option>
	</select>	
	<label for="originalKey">Original Key<label>
	<select name="originaKey" id="originalKey">
		<option value="C">C</option>
		<option value="C#">C#</option>
		<option value="C#">Db</option>
		<option value="D">D</option>
		<option value="D#">D#</option>
		<option value="D#">Eb</option>
		<option value="E">E</option>
		<option value="F">F</option>
		<option value="F#">F#</option>
		<option value="F#">Gb</option>
		<option value="G">G</option>
		<option value="G#">G#</option>
		<option value="G#">Ab</option>
		<option value="A">A</option>
		<option value="A#">A#</option>
		<option value="A#">Bb</option>
		<option value="B">B</option>
	</select>
	<label for="newKey">Target Key<label>
	<select name="newKey" id="newKey">
		<option value="C">C</option>
		<option value="C#">C#</option>
		<option value="C#">Db</option>
		<option value="D">D</option>
		<option value="D#">D#</option>
		<option value="D#">Eb</option>
		<option value="E">E</option>
		<option value="F">F</option>
		<option value="F#">F#</option>
		<option value="F#">Gb</option>
		<option value="G">G</option>
		<option value="G#">G#</option>
		<option value="G#">Ab</option>
		<option value="A">A</option>
		<option value="A#">A#</option>
		<option value="A#">Bb</option>
		<option value="B">B</option>
	</select>
	<button value="transpose">transpose</button>
<form>

CSS

select {
    display: block;
}

JavaScript

var keys=['C', 'C#', 'D', 'D#', 'E', 'F', 'F#', 'G', 'G#','A', 'A#', 'B'];

$("form").submit(function(e){
	e.preventDefault();
});
$('button').click(function() {
	var data = $('form').serializeArray(),
        notepos = keys.indexOf(data[0].value),
        oldKeyPos = keys.indexOf(data[1].value),
        newKeyPos = keys.indexOf(data[2].value),
        newNotePos = notepos + (newKeyPos - oldKeyPos);
        if (newNotePos>11) newNotePos = newNotePos-12; 
        if (newNotePos<0) newNotePos = 12 + newNotePos;
    alert('The transposed note is '+ keys[newNotePos]);
});