ELM based ABV calculator

abv-calculator.elm

import Html exposing (..)
import Html.App as Html
import Html.Attributes exposing (..)
import Html.Events exposing (..)
import String

-- MAIN
main =
    Html.beginnerProgram { model = model, view = view, update = update }


-- MODEL
type alias Model =
    {og : Float
    , fg : Float
    , abv : Float
    }

model : Model
model =
    { og = 1.055
    , fg = 1.015
    , abv = 0.00
    }


-- UPDATE

type Msg = Calculate
         | ChangeOg String
         | ChangeFg String

update : Msg -> Model -> Model
update msg model =
    case msg of
        Calculate ->
            { model | abv = (model.og - model.fg) * 131.25 }

        ChangeOg val ->
            { model | og = Result.withDefault 0.000 (String.toFloat val) }

        ChangeFg val ->
            { model | fg = Result.withDefault 0.000 (String.toFloat val) }



-- VIEW

view : Model -> Html Msg
view model =
    div [] [
            div [] [ text (String.append (String.left 4 (toString model.abv)) "% ABV") ]
            , input [ placeholder "Enter Original Gravety", onInput ChangeOg ] []
            , input [ placeholder "Enter Final Gravety", onInput ChangeFg ] []
            , button [ onClick Calculate ][ text "Calculate" ]
            , viewValidation model
        ]

viewValidation : Model -> Html msg
viewValidation model =
    let
        (color, message) =
            if model.fg <= 0.000 then
                ("red", "FG is wrong")
            else if model.og <= 0.000 then
                ("red", "OG is wrong")
            else
                ("", "")
    in
       div [ style [("color", color)] ] [ text message ]