diff options
| author | Brian Cully <bjc@spork.org> | 2025-05-12 09:52:18 -0400 |
|---|---|---|
| committer | Brian Cully <bjc@spork.org> | 2025-05-12 09:52:18 -0400 |
| commit | 9353c94aedf64384afdcef3bc9cffbcc6e348d73 (patch) | |
| tree | 44bd1d274859dfea8df5a95aba45b630d80d9e12 /index.html | |
| parent | 6ca6c457227b2cb46ae45b4990b60d06ca33589e (diff) | |
| download | chords-9353c94aedf64384afdcef3bc9cffbcc6e348d73.tar.gz chords-9353c94aedf64384afdcef3bc9cffbcc6e348d73.zip | |
convert to web components
one less thing to hard-code: element ids, which were brittle already.
Diffstat (limited to 'index.html')
| -rw-r--r-- | index.html | 275 |
1 files changed, 140 insertions, 135 deletions
@@ -8,149 +8,154 @@ </head> <body> - <form id='fretboard'> - <table> - <thead> - <tr> - <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> + <x-fretboard> + <form id='fretboard'> + <table> + <thead> + <tr> + <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 class='string1'> - <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' 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' 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' 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' 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' 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> - </table> + <tbody> + <tr class='string1'> + <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' 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' 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' 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' 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' 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> + </table> - <button class='save-chord'>+</button> - </form> + <button class='save'>+</button> + </form> + </x-fretboard> - <form id='key-picker'> - <fieldset> - <legend>key</legend> - <label for='tonic'>tonic:</label> - <select id='tonic' name='tonic'> - <option value='C' selected>C</option> - <option value='C♯'>C♯</option> - <option value='D'>D</option> - <option value='D♯'>D♯</option> - <option value='E'>E</option> - <option value='F'>F</option> - <option value='F♯'>F♯</option> - <option value='G'>G</option> - <option value='G♯'>G♯</option> - <option value='A'>A</option> - <option value='A♯'>A♯</option> - <option value='B'>B</option> - </select> - <label for='scale'>scale:</label> - <select id='scale' name='scale'> - <option value='major' selected>major</option> - <option value='minor'>minor</option> - <option value='aug'>augmented</option> - <option value='dim'>diminished</option> - </select> + <x-key-picker> + <form id='key-picker'> + <fieldset> + <legend>key</legend> + <label for='tonic'>tonic:</label> + <select id='tonic' name='tonic'> + <option value='C' selected>C</option> + <option value='C♯'>C♯</option> + <option value='D'>D</option> + <option value='D♯'>D♯</option> + <option value='E'>E</option> + <option value='F'>F</option> + <option value='F♯'>F♯</option> + <option value='G'>G</option> + <option value='G♯'>G♯</option> + <option value='A'>A</option> + <option value='A♯'>A♯</option> + <option value='B'>B</option> + </select> + <label for='scale'>scale:</label> + <select id='scale' name='scale'> + <option value='major' selected>major</option> + <option value='minor'>minor</option> + <option value='aug'>augmented</option> + <option value='dim'>diminished</option> + </select> - <hr> + <hr> - <ol class='notes'> - <li class='tonic'>C</li> - <li class='second'>D</li> - <li class='third'>E</li> - <li class='fourth'>F</li> - <li class='fifth'>G</li> - <li class='sixth'>A</li> - <li class='seventh'>B</li> - </ol> - <hr> + <ol class='notes'> + <li class='tonic'>C</li> + <li class='second'>D</li> + <li class='third'>E</li> + <li class='fourth'>F</li> + <li class='fifth'>G</li> + <li class='sixth'>A</li> + <li class='seventh'>B</li> + </ol> + <hr> - <p>Available triads:</p> - <ul class='chords'> - <li>Amin</li> - <li>C</li> - <li>Dmin</li> - <li>Emin</li> - <li>F</li> - <li>G</li> - </ul> - </fieldset> - </form> + <p>Available triads:</p> + <ul class='chords'> + <li>Amin</li> + <li>C</li> + <li>Dmin</li> + <li>Emin</li> + <li>F</li> + <li>G</li> + </ul> + </fieldset> + </form> + </x-key-picker> - <form id='saved-chords'> + <x-chords-history></x-chords-history> + <form id='history'> <fieldset> - <legend>saved</legend> + <legend>history</legend> <ol> <li>GCEGCE</li> <li>EBEGBE</li> |