Calc UI with sample event handling

Main.elm

module Main exposing (main)

import Html exposing (Html, button, div, text)
import Html.Events exposing (onClick)


main : Program Never Model Msg
main =
    Html.beginnerProgram
        { model = 0
        , view = view
        , update = update
        }


type alias Model =
    Int


type Msg
    = NoMsg
    | PushDigit Int
    | PushClear


update : Msg -> Model -> Model
update msg model =
    case msg of
        NoMsg ->
            model

        PushDigit value ->
            model * 10 + value

        PushClear ->
            0


view : Model -> Html Msg
view model =
    div []
        [ div [] [ div [] [ text (toString model)] ]
        , div []
            [ button [ onClick PushClear ] [ text "C" ]
            , button [ onClick NoMsg ] [ text "+" ]
            , button [ onClick NoMsg ] [ text "-" ]
            , button [ onClick NoMsg ] [ text "*" ]
            , button [ onClick NoMsg ] [ text "/" ]
            , button [ onClick NoMsg ] [ text "=" ]
            ]
        , div []
            [ button [ onClick (PushDigit 1) ] [ text "1" ]
            , button [ onClick (PushDigit 2) ] [ text "2" ]
            , button [ onClick (PushDigit 3) ] [ text "3" ]
            , button [ onClick (PushDigit 4) ] [ text "4" ]
            , button [ onClick (PushDigit 5) ] [ text "5" ]
            , button [ onClick (PushDigit 6) ] [ text "6" ]
            , button [ onClick (PushDigit 7) ] [ text "7" ]
            , button [ onClick (PushDigit 8) ] [ text "8" ]
            , button [ onClick (PushDigit 9) ] [ text "9" ]
            , button [ onClick (PushDigit 0) ] [ text "0" ]
            ]
        ]