From a8909dc99523240ce238d0e124d02b22333bb61b Mon Sep 17 00:00:00 2001
From: Brian Cully <bjc@spork.org>
Date: Sun, 9 Mar 2025 13:34:10 -0400
Subject: html: add classes to fret tds and trs, rejigger

---
 fretboard.mjs | 10 +++++-----
 index.html    | 52 +++++++++++++++++++++++++++++++++-------------------
 main.css      | 30 +++++++++++++++++++++++++-----
 3 files changed, 63 insertions(+), 29 deletions(-)

diff --git a/fretboard.mjs b/fretboard.mjs
index 7db359e..23f8cc8 100644
--- a/fretboard.mjs
+++ b/fretboard.mjs
@@ -46,13 +46,13 @@ function fretToNote(stringName, fretName) {
 
 function formChanged(form) {
     const formData = new FormData(form);
-    form.querySelectorAll('p').forEach(p => {
-        const val = formData.get(p.className)
-        const note = fretToNote(p.className, val);
+    form.querySelectorAll('tbody .selected').forEach(elt => {
+        const val = formData.get(elt.parentNode.className)
+        const note = fretToNote(elt.parentNode.className, val) || '';
         if (isAccidental(note)) {
-            p.innerText = `${note} / ${alternateAccidental(note)}`;
+            elt.innerText = `${note} / ${alternateAccidental(note)}`;
         } else {
-            p.innerText = note;
+            elt.innerText = note;
         }
     });
 }
diff --git a/index.html b/index.html
index a73af92..99258e2 100644
--- a/index.html
+++ b/index.html
@@ -12,70 +12,84 @@
       <table>
         <thead>
           <tr>
-            <td>open</td>
-            <td>fret 1</td>
-            <td>fret 2</td>
-            <td>fret 3</td>
-            <td>fret 4</td>
-            <td>fret 5</td>
-            <td>selected</td>
+            <td class='open'>open</td>
+            <td class='fret1'></td>
+            <td class='fret2'></td>
+            <td class='fret3'>°</td>
+            <td class='fret4'></td>
+            <td class='fret5'>°°</td>
+            <td class='fret6'></td>
+            <td class='fret7'>°</td>
+            <td class='selected'>selected</td>
           </tr>
         </thead>
 
         <tbody>
-          <tr>
+          <tr class='string1'>
             <td class='open'>E</td>
             <td><input type='radio' name='string1' value='fret1'></td>
             <td><input type='radio' name='string1' value='fret2'></td>
             <td><input type='radio' name='string1' value='fret3'></td>
             <td><input type='radio' name='string1' value='fret4'></td>
             <td><input type='radio' name='string1' value='fret5'></td>
-            <td><p class='string1'></p></td>
+            <td><input type='radio' name='string1' value='fret6'></td>
+            <td><input type='radio' name='string1' value='fret7'></td>
+            <td class='selected'></td>
           </tr>
-          <tr>
+          <tr class='string2'>
             <td class='open'>A</td>
             <td><input type='radio' name='string2' value='fret1'></td>
             <td><input type='radio' name='string2' value='fret2'></td>
             <td><input type='radio' name='string2' value='fret3'></td>
             <td><input type='radio' name='string2' value='fret4'></td>
             <td><input type='radio' name='string2' value='fret5'></td>
-            <td><p class='string2'></p></td>
+            <td><input type='radio' name='string2' value='fret6'></td>
+            <td><input type='radio' name='string2' value='fret7'></td>
+            <td class='selected'></td>
           </tr>
-          <tr>
+          <tr class='string3'>
             <td class='open'>D</td>
             <td><input type='radio' name='string3' value='fret1'></td>
             <td><input type='radio' name='string3' value='fret2'></td>
             <td><input type='radio' name='string3' value='fret3'></td>
             <td><input type='radio' name='string3' value='fret4'></td>
             <td><input type='radio' name='string3' value='fret5'></td>
-            <td><p class='string3'></p></td>
+            <td><input type='radio' name='string3' value='fret6'></td>
+            <td><input type='radio' name='string3' value='fret7'></td>
+            <td class='selected'></td>
           </tr>
-          <tr>
+          <tr class='string4'>
             <td class='open'>G</td>
             <td><input type='radio' name='string4' value='fret1'></td>
             <td><input type='radio' name='string4' value='fret2'></td>
             <td><input type='radio' name='string4' value='fret3'></td>
             <td><input type='radio' name='string4' value='fret4'></td>
             <td><input type='radio' name='string4' value='fret5'></td>
-            <td><p class='string4'></p></td>
+            <td><input type='radio' name='string4' value='fret6'></td>
+            <td><input type='radio' name='string4' value='fret7'></td>
+            <td class='selected'></td>
           </tr>
-          <tr>
+          <tr class='string5'>
             <td class='open'>B</td>
             <td><input type='radio' name='string5' value='fret1'></td>
             <td><input type='radio' name='string5' value='fret2'></td>
             <td><input type='radio' name='string5' value='fret3'></td>
             <td><input type='radio' name='string5' value='fret4'></td>
             <td><input type='radio' name='string5' value='fret5'></td>
-            <td><p class='string5'></p></td>
+            <td><input type='radio' name='string5' value='fret6'></td>
+            <td><input type='radio' name='string5' value='fret7'></td>
+            <td class='selected'></td>
           </tr>
-          <tr>
+          <tr class='string6'>
             <td class='open'>E</td>
             <td><input type='radio' name='string6' value='fret1'></td>
             <td><input type='radio' name='string6' value='fret2'></td>
             <td><input type='radio' name='string6' value='fret3'></td>
             <td><input type='radio' name='string6' value='fret4'></td>
             <td><input type='radio' name='string6' value='fret5'></td>
-            <td><p class='string6'></p></td>
+            <td><input type='radio' name='string6' value='fret6'></td>
+            <td><input type='radio' name='string6' value='fret7'></td>
+            <td class='selected'></td>
           </tr>
         </tbody>
       </table>
diff --git a/main.css b/main.css
index 8706203..f716cf5 100644
--- a/main.css
+++ b/main.css
@@ -3,18 +3,38 @@ body {
     background-color: white;
 }
 
-thead {
-    display: none;
 }
 
-#fretboard .open {
+#fretboard table {
+    border-collapse: collapse;
+}
+
+#fretboard thead {
+    text-align: center;
+}
+#fretboard thead .fret3,
+#fretboard thead .fret5,
+#fretboard thead .fret7 {
+    font-weight: bold;
+}
+
+#fretboard tbody .open {
     font-weight: bold;
 }
 
-#fretboard p {
+#fretboard td:not(:last-child) {
+    border-right: 1px solid black;
+}
+
+#fretboard tbody tr {
+    border-top: 1px solid black;
+}
+
+#fretboard tbody .selected {
     font-style: italic;
+    text-align: center;
 }
 
-tr.muted {
+#fretboard .muted {
     color: grey;
 }
-- 
cgit v1.3