4 files changed, 53 insertions, 1 deletions
diff --git a/index.html b/index.html
index bb5fb32..aa2c60a 100644
--- a/index.html
+++ b/index.html
@@ -113,6 +113,18 @@
           <option value='major' selected>major</option>
           <option value='minor'>minor</option>
         </select>
+
+        <hr>
+
+        <ol class='notes'>
+          <li class='first'>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>
       </fieldset>
     </form>
 
diff --git a/key-picker.mjs b/key-picker.mjs
new file mode 100644
index 0000000..bd6482a
--- /dev/null
+++ b/key-picker.mjs
@@ -0,0 +1,30 @@
+import { MajorScale, MinorScale, chromaticScale } from "./scale.mjs";
+
+function scaleFrom(tonic, diatonic) {
+    switch (diatonic) {
+    case 'major':
+        return MajorScale(tonic);
+    case 'minor':
+        return MinorScale(tonic);
+    default:
+        throw new Error('how this happen')
+    }
+}
+
+function formChanged(form) {
+    const formData = new FormData(form);
+    const scale = scaleFrom(formData.get('tonic'), formData.get('diatonic'));
+    ['first', 'second', 'third', 'fourth', 'fifth', 'sixth', 'seventh'].forEach((c, i) => {
+        Array.from(form.getElementsByClassName(c)).forEach(elt => elt.innerText = scale[i]);
+    });
+}
+
+function handleFormChanged(e) {
+    formChanged(e.target.form);
+}
+
+export default function KeyPicker(form) {
+    console.debug('KeyPicker()', form);
+    form.onchange = handleFormChanged;
+    formChanged(form);
+}
diff --git a/main.css b/main.css
index 9fdccd1..975bbef 100644
--- a/main.css
+++ b/main.css
@@ -42,3 +42,11 @@ body {
 #fretboard .muted {
     color: grey;
 }
+
+#key-picker .notes {
+    padding-left: 0;
+}
+
+#key-picker .notes li {
+    display: inline;
+}
diff --git a/main.mjs b/main.mjs
index 219c3db..16e5eaa 100644
--- a/main.mjs
+++ b/main.mjs
@@ -1,3 +1,5 @@
-import Fretboard from './fretboard.mjs'
+import Fretboard from './fretboard.mjs';
+import KeyPicker from './key-picker.mjs';
 
 Fretboard(document.getElementById('fretboard'));
+KeyPicker(document.getElementById('key-picker'));