add display for available chords in the key

1 files changed, 17 insertions, 1 deletions

diff --git a/index.html b/index.html
index aa2c60a..055fdcb 100644
--- a/index.html
+++ b/index.html
@@ -101,12 +101,17 @@
         <label for='tonic'>tonic:</label>
         <select id='tonic' name='tonic'>
           <option value='A'>A</option>
+          <option value='A#'>A#</option>
           <option value='B'>B</option>
           <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>
         </select>
         <label for='diatonic'>diatonic:</label>
         <select id='diatonic' name='diatonic'>
@@ -117,7 +122,7 @@
         <hr>
 
         <ol class='notes'>
-          <li class='first'>C</li>
+          <li class='tonic'>C</li>
           <li class='second'>D</li>
           <li class='third'>E</li>
           <li class='fourth'>F</li>
@@ -125,6 +130,17 @@
           <li class='sixth'>A</li>
           <li class='seventh'>B</li>
         </ol>
+        <hr>
+
+        <p>Available chords:</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>