Skip to content

Instantly share code, notes, and snippets.

@mather mather/BMI.elm
Created Nov 29, 2016

Embed
What would you like to do?
BMI計算機 by Elm 0.18
import Html exposing (..)
import Html.Attributes as A exposing (type_, value, min, max, step, disabled)
import Html.Events exposing (onInput)
import Json.Decode exposing (decodeString, float)
main =
Html.beginnerProgram
{ model = initialModel
, view = view
, update = update
}
type alias Model =
{ height : Float
, weight : Float
}
initialModel : Model
initialModel =
{ height = 171.5
, weight = 65.5
}
type Msg =
NoOp
| UpdateHeight Float
| UpdateWeight Float
update : Msg -> Model -> Model
update msg model =
case msg of
NoOp ->
model
UpdateHeight newHeight ->
{ model | height = newHeight }
UpdateWeight newWeight ->
{ model | weight = newWeight }
view : Model -> Html Msg
view model =
let
h = model.height / 100 -- メートルに変換
bmi = model.weight / ( h * h )
in
div [] [
form [] [
heightInput model.height,
weightInput model.weight
],
p [] [ text ("BMI: " ++ (toString bmi)) ]
]
heightInput h =
let
heightAttributes t =
[type_ t
, value <| toString h
, A.min "100.0"
, A.max "250.0"
, step "0.1"
, onInput (updateFloat UpdateHeight)
]
in
p [] [
label [] [text "身長"],
input (heightAttributes "range") [],
input (heightAttributes "number") [], text "cm"
]
weightInput w =
let
weightAttributes t =
[ type_ t
, value <| toString w
, A.min "30.0"
, A.max "200.0"
, step "0.1"
, onInput (updateFloat UpdateWeight)
]
in
p [] [
label [] [text "体重"],
input (weightAttributes "range") [],
input (weightAttributes "number") [], text "kg"
]
updateFloat : (Float -> Msg) -> String -> Msg
updateFloat updater str =
case decodeString float str of
Ok f ->
updater f
Err _ ->
NoOp
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
You can’t perform that action at this time.