bmi.cljs

(ns test.bmi
  (:require [reagent.core :as reagent]))


(defonce bmi-data (reagent/atom { :height 180 :weight 80 }))


(defn- calc! [param value]
  (swap! bmi-data assoc param value)
  (let [{:keys [height weight bmi]} @bmi-data
        h (/ height 100)]
      (if (= param :bmi)
        (swap! bmi-data assoc :weight (* bmi h h))
        (swap! bmi-data assoc :bmi    (/ weight (* h h))))))


(defn- slider [param value min max]
  [:input { :type "range" :value value :min min :max max
            :style { :width "100%" }
            :on-change #(calc! param (-> % .-target .-value)) }])


(defn component []
  (let [{:keys [height weight bmi]} @bmi-data
        [color diagnose] (cond
                           (< bmi 18.5) ["orange" "underweight"]
                           (< bmi 25)   ["inherit" "normal"]
                           (< bmi 30)   ["orange" "overweight"]
                           :else        ["red" "obese"])]
    [:div
     [:h3 "BMI Calculator"]
     [:div
      "Height: " (int height) "cm"
      [slider :height height 100 220]]
     [:div
      "Weight: " (int weight) "kg"
      [slider :weight weight 30 150]]
     [:div
      "BMI: " bmi " "
      [:span { :style { :color color }} diagnose]
      [slider :bmi bmi 10 50]]]))