Buttons labelled with the number of times they have been clicked I am new to functional programming and I decided to learn it thru Elm instead of haskell. I wrote a practice code where there are 2 buttons and their names correspond to the number of times they are clicked. The following is my implementation:

import Html exposing (..)
import Html.Attributes exposing (..)
import Html.Events exposing (onClick)

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

-- model
type alias Model = 
   { a : Int
   , b : Int
   , total : Int}

model : Model
model = Model 0 0 0

 -- view
type Msg = Add Foo
type Foo = A | B

view : Model -&gt; Html Msg
view model =
   div [] 
     [ button [onClick (Add A)] [text (toString model.a)]
     , button [onClick (Add B)] [text (toString model.b)]
     , div [] [ text (toString model.total)]
     ]


 -- update
update : Msg -&gt; Model -&gt; Model
update msg model =
   case msg of
     Add foo -&gt;
       case foo of
         A -&gt;
           let
             a = model.a + 1
             total = a + model.b
           in
             {model | a = a, total = total}
         B -&gt;
           let
             b = model.b + 1
             total = b + model.a
           in
             {model | b = b, total = total}


I feel like that the above code is a dumb implementation of what I wanted to accomplish. Can somebody suggest a better implementation?
Here are a few things I'd recommend changing:


There's no need to store the sum of a and b. You can always compute it in the view with a + b. This simplifies the update function a lot.
You can match Foo A and Foo B in update instead of a nested case.
Optionally, you can destructure model into {a, b} in view. I don't have any opinion on this. Either way is fine.


Here's the final elm-format'd code:

module Main exposing (..)

import Html exposing (..)
import Html.Attributes exposing (..)
import Html.Events exposing (onClick)


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


type alias Model =
    { a : Int
    , b : Int
    }


model : Model
model =
    Model 0 0


type Msg
    = Add Foo


type Foo
    = A
    | B


view : Model -&gt; Html Msg
view { a, b } =
    div []
        [ button [ onClick (Add A) ] [ text (toString a) ]
        , button [ onClick (Add B) ] [ text (toString b) ]
        , div [] [ text (toString (a + b)) ]
        ]


update : Msg -&gt; Model -&gt; Model
update msg model =
    case msg of
        Add A -&gt;
            { model | a = model.a + 1 }

        Add B -&gt;
            { model | b = model.b + 1 }


Live: https://ellie-app.com/c7GLFrXx3a1/0