    [:h1 "Octave"]
    [:select {:style {:font-size "1.2em"}
              :value (:octave @state)
-             :onChange #(swap! state assoc :octave (js/parseInt (.. % -target -value)))}
+             :onChange (create-event-handler state :octave js/parseInt)}
     (doall
      (map-indexed (partial octave-select-option state)
                   (range 0 9)))]])

   :Abmaj [:Ab :Bb :C :Db :Eb :F :G :Ab]})

;; -- components --
(defn key-name-select-option
  "A dropdown box option for a particular musical key"
  [state idx k]

(defn note-cell
  [state idx note]
  ^{:key (str "note-" idx)}
  [:th {:onClick #(sound/play (sound/octave note (:octave @state)))
        :style {:text-align "center"
                :font-weight "bold"
                :padding "4px"
