3 files changed, 25 insertions, 5 deletions
diff --git a/src/view/form.ts b/src/view/form.ts
index a74a7de..67df0d4 100644
--- a/src/view/form.ts
+++ b/src/view/form.ts
@@ -16,8 +16,11 @@ export function view(): Element[] {
         className: 'g-Form', 
         onsubmit 
       },
-      labelInput({ type: 'checkbox', name: 'major', label: 'Major', checked: opts.major }),
-      labelInput({ type: 'checkbox', name: 'minor', label: 'Minor', checked: opts.minor }),
+      chordCheckbox({ name: 'major', label: '', checked: opts.major }),
+      chordCheckbox({ name: 'minor', label: '-', checked: opts.minor }),
+      chordCheckbox({ name: 'seventh', label: '7', checked: opts.seventh }),
+      chordCheckbox({ name: 'minorSeventh', label: '-7', checked: opts.minorSeventh }),
+      chordCheckbox({ name: 'majorSeventh', label: '7', checked: opts.majorSeventh }),
       labelInput({ type: 'number', name: 'bpm', label: 'BPM', value: opts.bpm.toString() }),
       labelInput({ type: 'number', name: 'beatsPerChord', label: 'Beats per Chord', value: opts.beatsPerChord.toString() }),
       h('input', { type: 'submit', value: 'Play' })
@@ -25,12 +28,19 @@ export function view(): Element[] {
   )
 }
 
+function chordCheckbox({ name, label, checked }: any): Element {
+  return labelInput({ className: 'g-ChordLabel', type: 'checkbox', name, label, checked })
+}
+
 function onsubmit(event: Event): void {
   event.preventDefault()
   let input = (name: String) => document.querySelector(`input[name="${name}"]`) as HTMLInputElement
   let opts = {
     major: input('major').checked,
     minor: input('minor').checked,
+    seventh: input('seventh').checked,
+    minorSeventh: input('minorSeventh').checked,
+    majorSeventh: input('majorSeventh').checked,
     bpm: parseInt(input('bpm').value),
     beatsPerChord: parseInt(input('beatsPerChord').value)
   }
@@ -39,6 +49,7 @@ function onsubmit(event: Event): void {
 }
 
 type LabelInputParams = {
+  className?: string,
   type: string,
   name: string,
   label: string,
@@ -46,9 +57,9 @@ type LabelInputParams = {
   value?: string
 }
 
-function labelInput({ type, name, label, checked, value }: LabelInputParams) {
+function labelInput({ className, type, name, label, checked, value }: LabelInputParams) {
   return h('label',
-    {},
+    { className },
     h('input', { type, name, checked, value }),
     label
   )
diff --git a/src/view/options.ts b/src/view/options.ts
index 4c71be2..4a57f97 100644
--- a/src/view/options.ts
+++ b/src/view/options.ts
@@ -1,6 +1,9 @@
 export type Options = {
   major: boolean,
   minor: boolean,
+  seventh: boolean,
+  minorSeventh: boolean,
+  majorSeventh: boolean,
   bpm: number,
   beatsPerChord: number
 }
@@ -8,6 +11,9 @@ export type Options = {
 let defaultOptions: Options = {
   major: true,
   minor: false,
+  seventh: false,
+  minorSeventh: false,
+  majorSeventh: false,
   bpm: 90,
   beatsPerChord: 4
 }
diff --git a/src/view/play.ts b/src/view/play.ts
index 20da6c7..f0340f7 100644
--- a/src/view/play.ts
+++ b/src/view/play.ts
@@ -39,8 +39,11 @@ function shiftChords(chords: Element, options: Options) {
 }
 
 function chordNode(options?: Options): Element {
+  let [base, alteration] = options ? chord.generate(options) : ['', '']
+
   return h('div', 
     { className: 'g-Chord' }, 
-    options ? chord.generate(options) : ''
+    base,
+    h('sup', {}, alteration)
   )
 }