Elm examples which outs a Shopping list. Every step outputs the same HTML

SimpleList-step-1.html

<div>
    <h1>Shopping List</h1>
    <ul>
        <li>Apples</li>
        <li>Tomatos</li>
        <li>Banana</li>
    </ul>
</div>

SimpleList-step-2.elm

module Main exposing (..)

import Html exposing (..)


main =
    div []
        [ h1 [] [ text "Shoppint List" ]
        , ul []
            [ li [] [ text "Apples" ]
            , li [] [ text "Tomatos" ]
            , li [] [ text "Banana" ]
            ]
        ]

SimpleList-step-3.elm

module Main exposing (..)

import Html exposing (..)


main =
    view


view =
    div []
        [ viewTitle "Shoppting List"
        , viewList
        ]


viewTitle title =
    h1 [] [ text title ]


viewList =
    ul []
        [ viewItem "Apples"
        , viewItem "Tomatos"
        , viewItem "Banana"
        ]


viewItem item =
    li [] [ text item ]

SimpleList-step-4.elm

module Main exposing (..)

import Html exposing (..)


main =
    view


view =
    div []
        [ viewTitle "Shoppting List"
        , viewList [ "Apples", "Tomatos", "Banana" ]
        ]


viewTitle title =
    h1 [] [ text title ]


viewList list =
    ul [] (List.map viewItem list)


viewItem item =
    li [] [ text item ]

SimpleList-step-5.elm

module Main exposing (..)

import Html exposing (..)


model =
    { title = "Shoppting List", items = [ "Apples", "Tomatos", "Banana" ] }


main =
    view model


view model =
    div []
        [ viewTitle model.title
        , viewList model.items
        ]


viewTitle title =
    h1 [] [ text title ]


viewList list =
    ul [] (List.map viewItem list)


viewItem item =
    li [] [ text item ]

SimpleList-step-6.elm

module Main exposing (..)

import Html exposing (..)


type alias Model =
    { title : String, items : List Item }


type alias Item =
    String


model : Model
model =
    { title = "Shoppting List", items = [ "Apples", "Tomatos", "Banana" ] }


main : Html a
main =
    view model


view : Model -> Html a
view model =
    div []
        [ viewTitle model.title
        , viewList model.items
        ]


viewTitle : String -> Html a
viewTitle title =
    h1 [] [ text title ]


viewList : List Item -> Html a
viewList list =
    ul [] (List.map viewItem list)


viewItem : Item -> Html a
viewItem item =
    li [] [ text item ]