Simple user input and buttons example

buttonsWithInput.elm

-- Modified button example http://elm-lang.org/examples/buttons 
-- Added a reset button and a field to indicate step size to increment or decrement

import Html exposing (..)
import Html.Attributes exposing (..)
import Html.Events exposing (onClick, onInput)
import String

-- MAIN

main =
  beginnerProgram
  { model = model
  , view = view
  , update = update 
  }


-- MODEL

type alias Model = { score: Int, step: Int }

model : Model 
model = Model 0 0 

-- UPDATE

type Msg 
  = Increment
  | Decrement
  | Reset
  | SetStep String

update : Msg -> Model -> Model
update msg model =
  case msg of
  
    Increment -> 
      { model | score = model.score + model.step }

    Decrement ->
      { model | score = model.score - model.step }
      
    Reset ->
      { model | score = 0 }
      
    SetStep step ->
      case String.toInt step of
        Err msg -> 
          { model | step = 0 }
        Ok val -> 
          { model | step = val }
         
-- VIEW 

view model =
  div []
    [ button [ onClick Decrement ] [ text "-" ]
    , div [] [ text (toString model.score) ]
    , button [ onClick Increment ] [ text "+" ]
    , input [ placeholder "Preferred amount", onInput SetStep ] []
    , div [] []
    , button [ onClick Reset ] [ text "x" ]
    ]