diff options
| -rw-r--r-- | fretboard.mjs | 10 | ||||
| -rw-r--r-- | index.html | 52 | ||||
| -rw-r--r-- | 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; } }); } @@ -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> @@ -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; } |