Elm Study Sessions - Part 3

OriginalTodo.elm

-- Todo.elm
import Html exposing (Html, Attribute, button, div, ul, li, h1, text, input)
import Html.Attributes exposing (..)
import Html.Events exposing (onClick, onInput)

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


-- MODEL

type alias Model = { items : List String, currentItem : String}
model : Model
model =
  { items = [], currentItem = "" }


-- UPDATE
type Msg
  = Change String | AddItem | DeleteItem Int


update : Msg -> Model -> Model
update msg model =
  case msg of
    Change item ->
      { model | currentItem = item }

    AddItem ->
      { model | items = model.currentItem :: model.items, currentItem = "" }

    DeleteItem index ->
      { model | items = (List.take index model.items) ++ (List.drop (index+1) model.items)  }

-- VIEW

renderListItem : Int -> String -> Html Msg
renderListItem index item =
  li [] [ text item, button [ onClick (DeleteItem index) ] [ text "DELETE" ] ]

view : Model -> Html Msg
view model =
  div [] [
    div [] [
      input [ placeholder "Please enter something", onInput Change, value model.currentItem ] []
      , button [ onClick AddItem ] [ text "Add Item" ]
    ],

    div [] [
      h1 [] [ text "TO DO" ]
      , ul [] (
        List.indexedMap renderListItem model.items
      )
    ]
  ]

Todo.elm

-- Todo.elm
import Html exposing (Html, Attribute, button, div, ul, li, h1, text, input)
import Html.Attributes exposing (..)
import Html.Events exposing (onClick, onInput)
import Json.Decode exposing (..)

main =
  Html.program { init = init, view = view, update = update, subscriptions = subscriptions }

type alias Model = { items : List String, currentItem : String}

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

-- SUBSCRIPTIONS
subscriptions : Model -> Sub Msg
subscriptions model =
  Sub.none

-- UPDATE
type Msg
  = Change String | AddItem | DeleteItem Int

update : Msg -> Model -> (Model, Cmd Msg)
update msg model =
  case msg of
    Change item ->
      ({ model | currentItem = item }, Cmd.none)

    AddItem ->
      ({ model | items = model.currentItem :: model.items, currentItem = "" }, Cmd.none)

    DeleteItem index ->
      ({ model | items = (List.take index model.items) ++ (List.drop (index+1) model.items)  }, Cmd.none)

-- VIEW

renderListItem : Int -> String -> Html Msg
renderListItem index item =
  li [] [ text item, button [ onClick (DeleteItem index) ] [ text "DELETE" ] ]

view : Model -> Html Msg
view model =
  div [] [
    div [] [
      input [ placeholder "Please enter something", onInput Change, Html.Attributes.value model.currentItem ] []
      , button [ onClick AddItem ] [ text "Add Item" ]
    ],

    div [] [
      h1 [] [ text "TO DO" ]
      , ul [] (
        List.indexedMap renderListItem model.items
      )
    ]
  ]