Add wavelength

pages/index.tsx

@@ -32,7 +32,8 @@ const calculateNote = (root: number, frequency: number) => {
   const semis = Math.round(distanceFromA);
   const cents = Math.round((distanceFromA - semis) * 100);
   let octave = 4 + Math.floor(semis / 12);
-  if (semis % 12 >= 3) octave += 1;
+  const octaveBoundSemis = ((semis % 12) + 12) % 12;
+  if (octaveBoundSemis >= 3) octave += 1;
   const notes = [
     "A",
     "A#",
@@ -47,7 +48,7 @@ const calculateNote = (root: number, frequency: number) => {
     "G",
     "G#",
   ];
-  const note = notes[semis % 12];
+  const note = notes[octaveBoundSemis];
 
   let centsStr = "";
   if (cents <= -1) {
@@ -65,7 +66,7 @@ export default function Main() {
   const [frequency, setFrequency] = useState("523.251");
 
   const setRootValue: ChangeEventHandler<HTMLInputElement> = (e) => {
-    const newRoot = parseInt(e.target.value);
+    const newRoot = parseFloat(e.target.value);
     if (!isNaN(newRoot)) setRoot(newRoot);
     const frequency = calculateFrequency(newRoot, note);
     if (frequency != null) setFrequency(frequency.toFixed(3));
@@ -102,7 +103,7 @@ export default function Main() {
           {"if A4 is "}
           <input
             type="text"
-            pattern="\d+"
+            pattern="\d+(\.\d+)"
             value={root}
             placeholder="440"
             onChange={setRootValue}
@@ -112,7 +113,6 @@ export default function Main() {
         <section>
           <input
             type="text"
-            pattern=""
             value={note}
             placeholder="C5"
             onChange={setNoteValue}
@@ -120,12 +120,15 @@ export default function Main() {
           {" is "}
           <input
             type="text"
-            pattern="\d+"
+            pattern="\d+(\.\d+)"
             value={frequency}
             placeholder="523.251"
             onChange={setFrequencyValue}
           />
           {" Hz "}
+          <aside>
+            (wavelength: {(1000 / parseFloat(frequency)).toFixed(4)} ms)
+          </aside>
         </section>
       </main>
     </>

styles/globals.css

@@ -48,3 +48,8 @@ input[type="text"] {
 input[type="text"]:focus {
   border-color: rgb(141, 255, 208);
 }
+
+aside {
+  display: inline-block;
+  font-size: 0.8em;
+}