original code from https://github.com/bryanjenningz/25-elm-examples/blob/master/15-todos.elm

15-todos.elm

module Main exposing (Model, Msg(..), init, main, update, view)

import Browser exposing (sandbox)
import Html exposing (Html, br, button, div, h1, i, img, input, section, span, text)
import Html.Attributes exposing (autofocus, class, src, value)
import Html.Events exposing (onClick, onInput, onSubmit)



---- MODEL ----


type alias Model =
    { text : String
    , todos : List String
    }


init : ( Model, Cmd Msg )
init =
    ( { text = "", todos = [] }, Cmd.none )



---- UPDATE ----


type Msg
    = UpdateText String
    | AddTodo
    | RemoveTodo Int


update : Msg -> Model -> ( Model, Cmd Msg )
update msg model =
    case msg of
        UpdateText newText ->
            ( { model | text = newText }, Cmd.none )

        AddTodo ->
            ( { model | text = "", todos = model.todos ++ [ model.text ] }, Cmd.none )

        RemoveTodo index ->
            let
                beforeTodos =
                    List.take index model.todos

                afterTodos =
                    List.drop (index + 1) model.todos

                newTodos =
                    beforeTodos ++ afterTodos
            in
            ( { model | todos = newTodos }, Cmd.none )



---- VIEW ----


view : Model -> Html Msg
view model =
    section [ class "section" ]
        [ div [ class "container" ]
            [ h1 [] [ text "Elm Memo" ]
            , img [ src "/logo.svg" ] []
            , br [] []
            , div [ class "columns is-mobile is-centered" ]
                [ div [ class "column is-three-quarters-mobile is-half-tablet " ]
                    [ div [ class "field" ]
                        [ div [ class "control" ]
                            [ Html.form [ onSubmit AddTodo ]
                                [ input [ class "input is-primary", value model.text, autofocus True, onInput UpdateText ] [] ]
                            ]
                        ]
                    ]
                ]
            , div [ class "card" ]
                [ div [ class "card-content" ]
                    [ div []
                        (List.indexedMap
                            (\index todo ->
                                div []
                                    [ text todo

                                    -- We add a little "X" that we can click to remove
                                    -- the todo at the specified index.
                                    , span [ onClick (RemoveTodo index) ]
                                        [ i [ class "fas fa-trash-alt fa-fw fa-border" ] []
                                        ]
                                    ]
                            )
                            model.todos
                        )
                    ]
                ]
            ]
        ]



---- PROGRAM ----


main : Program () Model Msg
main =
    Browser.element
        { view = view
        , init = \_ -> init
        , update = update
        , subscriptions = always Sub.none
        }