ElmList.elm

import Html exposing (Html, Attribute, text, toElement, input, div, button, text, li, text, ul)
import Html.Events exposing (onClick, on, targetValue)
import Html.Attributes exposing (..)
import StartApp.Simple as StartApp
import List exposing (..)
import Html.Attributes exposing (class)

{-| Read more about StartApp and how this works at:

    https://github.com/evancz/start-app

The rough idea is that we just specify a model, a way to view it,
and a way to update it. That's all there is to it!
-}
main =
  StartApp.start { model = startModel, view = view, update = update }

startModel : Model
startModel = {inputString = "", strings = []}

type alias Model = {inputString : String,
                    strings : List String}

type Action = AddName | UpdateName String

update : Action -> Model -> Model 
update act m = 
  case act of
    AddName -> {m | inputString = "", strings = m.inputString::m.strings}
    UpdateName str -> {m | inputString = str}

view : Signal.Address Action -> Model -> Html
view address model =
  div []
    [ input
        [ placeholder "Enter name"
        , value model.inputString
        , on "input" targetValue (Signal.message address << UpdateName)
        ]                        
--(f . g) (x)
--f(g(x))
--Signal.message(address, UpdateName(targetValue))
        -- \x -> Signal.message address (UpdateName x)
        
        -- .on("input", (e) =>  Signal.message(address, UpdateName(e.target.value)))
        
        []
    , button [ onClick address AddName ] [ text "Add" ]
    , makeList model.strings]
    
makeItem : String -> Html
makeItem str = li [] [text str, button [] [text "Add related"]]

makeList : List String -> Html
makeList list =
  ul [class "names"] <| map makeItem list