Mithril BMI Calculator

by ramnathv

HTML

<div id="root"></div>

CoffeeScript

# Helper Functions
calcWeight = (height, bmi) ->
  meterz = height/100
  meterz * meterz * bmi

calcBmi = (height, weight) ->
  meterz = height/100
  Math.round(weight/(meterz * meterz))

# Model
sliders = [
  {name: "Weight", units: "Kg", min: "30", max: "150", value: m.prop("80")}
  {name: "Height", units: "cm", min: "100", max: "220", value: m.prop("180")}
  {name: "BMI", units: "", min: "10", max: "50", value: m.prop(calcBmi(180, 80))}
]

sliders[0].oninput = (e) =>
  m.withAttr('value', sliders[0].value)
  sliders[2].value(
    calcBmi(sliders[1].value, sliders[0].value)
  )

# App
Slider = 
   view: (ctrl, props) ->
    m 'div', {class: props.name.toLowerCase()},
      "#{props.name} #{props.value()}#{props.units}"
      m 'input[type="range"]', {
        min: props.min
        max: props.max
        value: props.value()
        oninput: m.withAttr("value", props.value)  
      } 

App = 
  view: (ctrl, props) ->
    m 'div', props.sliders.map (prop) ->
      m.component Slider, prop

m.mount(
  document.getElementById("root"),
  m.component App, {sliders: sliders}
)