Elm-The-Gateway-Drug-To-Functional-Programming.elm

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

-- MODEL
type alias Model =
  { xCoord: Int
  , yCoord: Int
  }

init : Model
init = 
  { xCoord = 0
  , yCoord = 0
  }

-- VIEW
view : Model -> Html Msg
view model =
    div[]
      [
        div [] [ text ("X Coordinate: " ++ (toString model.xCoord)) ]
      , div [] [ text ("Y Coordinate: " ++ (toString model.yCoord)) ]
      , button [ onClick Up ] [ text "Up" ]
      , button [ onClick Down ] [ text "Down" ]
      , button [ onClick Left ] [ text "Left" ]
      , button [ onClick Right ] [ text "Right" ]
      ]

-- UPDATE
type Msg
  = Up
  | Down
  | Left
  | Right
update : Msg -> Model -> Model
update msg model =
  case msg of
    Up ->
      { model | yCoord = model.yCoord + 1 }
  
    Down ->
      { model | yCoord = model.yCoord - 1 }
  
    Left ->
      { model | xCoord = model.xCoord - 1 }
    
    Right ->
      { model | xCoord = model.xCoord + 1 }

main : Program Never
main =
  App.beginnerProgram
    { model = init
    , view = view
    , update = update
    }