途中でJSONデコードをはさみましたが最終章
CSSを適用します
ellie-app.com

やること

[x] ListでTODOリストを保持する
[x] ListをHTMLに吐き出す
[x] inputに入力した値をbuttonを押すことでリストに追加
[x] TODO横に削除ボタンを作成、押したら消せるように
[x] TODOをダブルクリックでinput化して更新できるように
[x] localstorageに保存できるようにする
[x] 起動時にlocalstorageから読み出す
[x] 見た目オシャンティーにする

適用するCSS

デザインほんとによくわからないのでとりあえずBulma
bulma.io
とりあえずclassあてていくだけ

やったこと

BulmaをCDNで読み込む

<head>
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bulma@0.9.0/css/bulma.min.css">
</head>

cssをあてていく

view : Model -> Html Msg
view model =
    div []
        [ nav [ class "panel" ]
            [ p [ class "panel-heading" ]
                [ text "Elm TODO List"
                ]
            ]
        , div [ class "panel-block" ]
            [ div [ class "field has-addons has-addons-fullwidth" ]
                [ div [ class "control" ]
                    [ input
                        [ class "input"
                        , type_ "text"
                        , value model.inputText
                        , onInput UpdateTextField
                        ]
                        []
                    ]
                , div [ class "control" ]
                    [ button
                        [ class "button is-info"
                        , type_ "button"
                        , onClick Add
                        ]
                        [ text "TODO追加"
                        ]
                    ]
                ]
                , p [ class "help is-danger"] [ showErrorMessage model.errorMessage ]
            ]
        , ul [] (List.map showTodo model.todoList)
        ]

panel形式にしたりinput``buttonをくっつけたりした
何も楽しくない

リスト表示

showTodo : Todo -> Html Msg
showTodo todo =
    div [ class "panel-block" ]
        [ div
            [ onDoubleClick (Edit todo.id True) ]
            (switchTodoElement todo.editting todo)
        ]

panel-block返すようにした

エラーメッセージ

showErrorMessage : ErrorMessage -> Html Msg
showErrorMessage errorType =
    case errorType of
        NO_ERROR ->
            text ""

        TODO_IS_EMPTY ->
            text "空文字のTODOは作成できません"

div [] []だと不便なのでtextを返すようにした