Add BMI-calculator

test/demo.cljs

@@ -36,6 +36,13 @@
 (defn src-for [{:keys [defs]}]
   [:pre (src-for-names defs)])
 
+(defn demo-component [props]
+  [:div.example
+   [:h3 "Example"]
+   [(:comp props)]
+   [:h3 "Source"]
+   [src-for props]])
+
 (defn simple-component []
   [:div
    [:h3 "I am a component!"]
@@ -47,12 +54,56 @@
 (defn demo-simple []
   [:div
    [:h2 "This is a simple component"]
-   [simple-component]
-   [:p "Source:"
-    [src-for {:defs [:ns :simple-component]}]]])
+   [demo-component {:comp simple-component
+                    :defs [:ns :simple-component]}]])
+
+(defn calc-bmi [{:keys [height weight bmi] :as params}]
+  (let [h (/ height 100)]
+    (if (nil? bmi)
+      (assoc params :bmi (/ weight (* h h)))
+      (assoc params :weight (* bmi h h)))))
+
+(def bmi-data (atom (calc-bmi {:height 180 :weight 80})))
+
+(defn set-bmi [key val clear]
+  (swap! bmi-data #(calc-bmi (merge % {key val, clear nil}))))
+
+(defn slider [{:keys [value key clear min max]}]
+  [:div
+   [:input {:type "range" :min min :max max :value value
+            :style {:width "100%"}
+            :on-change #(set-bmi key (-> % .-target .-value)
+                                 (or clear :bmi))}]])
+
+(defn bmi-component []
+  (let [{:keys [weight height bmi]} @bmi-data
+        [color diagnose] (cond
+                          (< bmi 18.5) ["orange" "underweight"]
+                          (< bmi 25) ["inherit" "normal"]
+                          (< bmi 30) ["orange" "overweight"]
+                          :else ["red" "obese"])]
+    [:div
+     [:div
+      "Height: " (int height) "cm"
+      [slider {:value height :min 100 :max 220 :key :height}]]
+     [:div
+      "Weight: " (int weight) "kg"
+      [slider {:value weight :min 50 :max 200 :key :weight}]]
+     [:div
+      "BMI: " (int bmi) " "
+      [:span {:style {:color color}} diagnose]
+      [slider {:value bmi :min 10 :max 50 :key :bmi :clear :weight}]]]))
+
+(defn bmi-demo []
+  [:div
+   [:h2 "Simple BMI calculator"]
+   [demo-component {:comp bmi-component
+                    :defs [:ns :calc-bmi :bmi-data :set-bmi :slider
+                           :bmi-component]}]])
 
 (defn demo []
   [:div
    [:h1 "This will become a demo"]
    [demo-simple]
+   [bmi-demo]
    [:p "WIP"]])