diff options
| -rw-r--r-- | index.html | 96 | ||||
| -rw-r--r-- | key-picker.mjs | 18 | ||||
| -rw-r--r-- | main.css | 4 |
3 files changed, 70 insertions, 48 deletions
@@ -26,69 +26,69 @@ <tbody> <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><input type='radio' name='string1' value='fret6'></td> - <td><input type='radio' name='string1' value='fret7'></td> + <td class='open' x-data-note='E'>E</td> + <td x-data-note='F'><input type='radio' name='string1' value='fret1'></td> + <td x-data-note='F♯'><input type='radio' name='string1' value='fret2'></td> + <td x-data-note='G'><input type='radio' name='string1' value='fret3'></td> + <td x-data-note='G♯'><input type='radio' name='string1' value='fret4'></td> + <td x-data-note='A'><input type='radio' name='string1' value='fret5'></td> + <td x-data-note='A♯'><input type='radio' name='string1' value='fret6'></td> + <td x-data-note='B'><input type='radio' name='string1' value='fret7'></td> <td class='selected'></td> </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><input type='radio' name='string2' value='fret6'></td> - <td><input type='radio' name='string2' value='fret7'></td> + <td class='open' x-data-note='A'>A</td> + <td x-data-note='A♯'><input type='radio' name='string2' value='fret1'></td> + <td x-data-note='B'><input type='radio' name='string2' value='fret2'></td> + <td x-data-note='C'><input type='radio' name='string2' value='fret3'></td> + <td x-data-note='C♯'><input type='radio' name='string2' value='fret4'></td> + <td x-data-note='D'><input type='radio' name='string2' value='fret5'></td> + <td x-data-note='D♯'><input type='radio' name='string2' value='fret6'></td> + <td x-data-note='E'><input type='radio' name='string2' value='fret7'></td> <td class='selected'></td> </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><input type='radio' name='string3' value='fret6'></td> - <td><input type='radio' name='string3' value='fret7'></td> + <td class='open' x-data-note='D'>D</td> + <td x-data-note='D♯'><input type='radio' name='string3' value='fret1'></td> + <td x-data-note='E'><input type='radio' name='string3' value='fret2'></td> + <td x-data-note='F'><input type='radio' name='string3' value='fret3'></td> + <td x-data-note='F♯'><input type='radio' name='string3' value='fret4'></td> + <td x-data-note='G'><input type='radio' name='string3' value='fret5'></td> + <td x-data-note='G♯'><input type='radio' name='string3' value='fret6'></td> + <td x-data-note='A'><input type='radio' name='string3' value='fret7'></td> <td class='selected'></td> </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><input type='radio' name='string4' value='fret6'></td> - <td><input type='radio' name='string4' value='fret7'></td> + <td class='open' x-data-note='G'>G</td> + <td x-data-note='G♯'><input type='radio' name='string4' value='fret1'></td> + <td x-data-note='A'><input type='radio' name='string4' value='fret2'></td> + <td x-data-note='A♯'><input type='radio' name='string4' value='fret3'></td> + <td x-data-note='B'><input type='radio' name='string4' value='fret4'></td> + <td x-data-note='C'><input type='radio' name='string4' value='fret5'></td> + <td x-data-note='C♯'><input type='radio' name='string4' value='fret6'></td> + <td x-data-note='D'><input type='radio' name='string4' value='fret7'></td> <td class='selected'></td> </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><input type='radio' name='string5' value='fret6'></td> - <td><input type='radio' name='string5' value='fret7'></td> + <td class='open' x-data-note='B'>B</td> + <td x-data-note='C'><input type='radio' name='string5' value='fret1'></td> + <td x-data-note='C♯'><input type='radio' name='string5' value='fret2'></td> + <td x-data-note='D'><input type='radio' name='string5' value='fret3'></td> + <td x-data-note='D♯'><input type='radio' name='string5' value='fret4'></td> + <td x-data-note='E'><input type='radio' name='string5' value='fret5'></td> + <td x-data-note='F'><input type='radio' name='string5' value='fret6'></td> + <td x-data-note='F♯'><input type='radio' name='string5' value='fret7'></td> <td class='selected'></td> </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><input type='radio' name='string6' value='fret6'></td> - <td><input type='radio' name='string6' value='fret7'></td> + <td class='open' x-data-note='E'>E</td> + <td x-data-note='F'><input type='radio' name='string6' value='fret1'></td> + <td x-data-note='F♯'><input type='radio' name='string6' value='fret2'></td> + <td x-data-note='G'><input type='radio' name='string6' value='fret3'></td> + <td x-data-note='G♯'><input type='radio' name='string6' value='fret4'></td> + <td x-data-note='A'><input type='radio' name='string6' value='fret5'></td> + <td x-data-note='A♯'><input type='radio' name='string6' value='fret6'></td> + <td x-data-note='B'><input type='radio' name='string6' value='fret7'></td> <td class='selected'></td> </tr> </tbody> diff --git a/key-picker.mjs b/key-picker.mjs index 431fdcd..3b4a378 100644 --- a/key-picker.mjs +++ b/key-picker.mjs @@ -11,6 +11,24 @@ function scaleFrom(tonic, scale) { } } +function handleNoteEnter(e) { + const n = e.target.innerText; + // todo: this should be delegated. the key selector shouldn't know + // about the fretboard at all. + document.querySelectorAll(`#fretboard [x-data-note="${n}"]`).forEach(elt => { + console.debug('wow! found elt', elt); + elt.classList.add('hover'); + }) +} +function handleNoteLeave(e) { + const n = e.target.innerText; + // ibid. + document.querySelectorAll(`#fretboard [x-data-note="${n}"]`).forEach(elt => { + console.debug('wow! found elt', elt); + elt.classList.remove('hover'); + }) +} + function formChanged(form) { const formData = new FormData(form); const scale = scaleFrom(formData.get('tonic'), formData.get('scale')); @@ -3,6 +3,10 @@ body { background-color: white; } +.hover { + background-color: yellow; +} + #fretboard { float: left; padding-right: 1em; |