Musical Calculator

HTML

<div id="bpmToHzContainer">
     <h3>BPM to Hz</h3>

    <label for="bpmInput">BPM:</label>
    <input type="text" name="bpmInput" id="bpmInput" />
    <br>
    <table id="bpmToHzResult"></table>
</div>
<div id="HzToBpmContainer">
     <h3>Hz to BPM</h3>

    <label for="hzInput">&nbsp;&nbsp;&nbsp;Hz:</label>
    <input type="text" name="HzInput" id="hzInput" />
    <br>
    <div id="hzToBpmResult"></div>
</div>
<div id="frequencyToNoteContainer">
     <h3>Hz to Note</h3>

    <label for="frequency">&nbsp;&nbsp;&nbsp;Hz:</label>
    <input type="text" id="frequency" />
    <!-- <input type="button" id="submit" value="Submit" />-->
    <p id="result"><font color="red"></font>
based on a' = 440Hz
</div>
<div id="NoteToFrequencyContainer">
     <h3>Note to Frequency</h3>
     <select id="NoteSelect" name = Note>
        <option value = 32.7>select a note</option>
        <option value = 32.7>C</option>
        <option value = 34.6>C#</option>
        <option value = 36.7>D</option>
        <option value = 38.9>D#</option>
        <option value = 41.2>E</option>
        <option value = 43.7>F</option>
        <option value = 46.2>F#</option>
        <option value = 49>G</option>
        <option value = 51.9>G#</option>
        <option value = 27.5>A</option>
        <option value = 29.1>A#</option>
        <option value = 30.9>B</option>
    </select>
    <p id="noteResult"></font>
based on a' = 440Hz
</div> 
<hr>
<div id='someInfos'>

DELTA WAVES (.5 TO 3 HZ)<br>
THETA WAVES (3 TO 8 HZ)<br>
ALPHA WAVES (8 TO 12 HZ)<br>
BETA WAVES (12 TO 38 HZ)<br>
GAMMA WAVES (38 TO 42 HZ)<br>
http://www.brainworksneurotherapy.com/what-are-brainwaves<br>

</div>

CSS

#bpmToHzResult, #hzToBpmResult,#noteResult {
    text-align: right;
}
#bpmToHzContainer, #HzToBpmContainer, #frequencyToNoteContainer,#NoteToFrequencyContainer {
    border:1px solid;
    padding:10px;
    float:left;
    width:49%;
    clear:right;
}

JavaScript

$(document).ready(function () {

    var convert = function () {
        document.getElementById("result").innerHTML =
            "<font face=\"Geneva, Arial, Helvetica, sans-serif\">" + frequencyToNote() + "</font>";
    }

    /*
     * Source from http://newt.phys.unsw.edu.au/music/note/
     */
        function frequencyToNote(f) {


            var input = Number(f); //Number(document.getElementById("frequency").value);
            console.log(input);
            if (isNaN(input) || (input == 0)) return "<font color=\"red\">Enter a numerical value for frequency</font>";
            if ((input < 27.5) || (input > 14080)) return "<font color=\"red\">Enter a frequency in the range 27.5Hz (A0) and 14080Hz (A9)</font>";

            var A4 = 440.0;
            var A4_INDEX = 57;

            var notes = [
                "C0", "C#0", "D0", "D#0", "E0", "F0", "F#0", "G0", "G#0", "A0", "A#0", "B0",
                "C1", "C#1", "D1", "D#1", "E1", "F1", "F#1", "G1", "G#1", "A1", "A#1", "B1",
                "C2", "C#2", "D2", "D#2", "E2", "F2", "F#2", "G2", "G#2", "A2", "A#2", "B2",
                "C3", "C#3", "D3", "D#3", "E3", "F3", "F#3", "G3", "G#3", "A3", "A#3", "B3",
                "C4", "C#4", "D4", "D#4", "E4", "F4", "F#4", "G4", "G#4", "A4", "A#4", "B4",
                "C5", "C#5", "D5", "D#5", "E5", "F5", "F#5", "G5", "G#5", "A5", "A#5", "B5",
                "C6", "C#6", "D6", "D#6", "E6", "F6", "F#6", "G6", "G#6", "A6", "A#6", "B6",
                "C7", "C#7", "D7", "D#7", "E7", "F7", "F#7", "G7", "G#7", "A7", "A#7", "B7",
                "C8", "C#8", "D8", "D#8", "E8", "F8", "F#8", "G8", "G#8", "A8", "A#8", "B8",
                "C9", "C#9", "D9", "D#9", "E9", "F9", "F#9", "G9", "G#9", "A9", "A#9", "B9"];

            var MINUS = 0;
            var PLUS = 1;

            var frequency;
            var r = Math.pow(2.0, 1.0 / 12.0);
            var cent = Math.pow(2.0, 1.0 / 1200.0);
            var r_index = 0;
            var cent_index = 0;
      ...