ChatRoom.elm

module ChatRoom where

import Html exposing (..)
import Html.Attributes exposing (..)
import Html.Events exposing (..)


-- MODEL

type alias Model =
  { messages: List String
  , message: String      
  }

init: List String -> Model
init msgs 
    = { messages = msgs
      , message = ""
      }

-- UPDATE

type Action
  = Add
  | UpdateMessage String

update : Action -> Model -> Model
update action model =
  case action of
    Add -> { model |
             messages <- model.message :: model.messages ,
             message <- ""
           }


-- VIEW

view : Signal.Address Action -> Model -> Html
view address model =
  div []
    [ input
      [ type' "text"
      , placeholder "Enter something here"
      , on "input" targetValue (Signal.message address << UpdateMessage)
      ]
      []
    , button [ onClick address Add] [ text "Add" ]
    , div [ countStyle ] [ text (toString model.messages) ]
    ]


countStyle : Attribute
countStyle =
  style
    [ ("font-size", "20px")
    , ("font-family", "monospace")
    , ("display", "inline-block")
    , ("width", "50px")
    , ("text-align", "center")
    ]

Main.elm

import ChatRoom exposing (init, update, view)
import StartApp.Simple exposing (start)


main =
  start
    { model = ChatRoom.init []
    , update = update
    , view = view
    }