Intro to Elm - SF Elm meetup 2016-07-14

README.md

• Elm Website
• Official Elm Guide
• Elm package search and documentation
• Join Elm Slack
• ElmBridge
• Using Elm with React

elm-make
elm-make Main.elm && open index.html
elm-reactor
elm-repl

Main.elm

module Main exposing (..)

import Html.App
import WordThing


-- WIRING


main : Program Never
main =
    Html.App.beginnerProgram
        { model = WordThing.initialModel
        , update = WordThing.update
        , view = WordThing.view
        }

WordThing.elm

module WordThing exposing (..)

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


-- MODEL


type alias Model =
    { text : String
    , changesCount : Int
    }


initialModel : Model
initialModel =
    { text = ""
    , changesCount = 0
    }



-- UPDATE


type Msg
    = TextChanged String
    | Clear


update : Msg -> Model -> Model
update msg model =
    case msg of
        TextChanged newText ->
            { model
                | text = newText
                , changesCount =
                    model.changesCount + 1
            }

        Clear ->
            { model
                | text = ""
                , changesCount = 0
            }



-- VIEW


splitParagraphs : String -> List (Html Msg)
splitParagraphs inputString =
    let
        paragraphStrings =
            String.split "\n\n" inputString

        wrapInP string =
            p [] [ text string ]
    in
        List.map wrapInP paragraphStrings


view : Model -> Html Msg
view model =
    p []
        [ text "Current: "
        , model.text
            |> splitParagraphs
            |> div []
        , div
            [ style [ ( "background-color", "red" ) ]
            ]
            (splitParagraphs model.text)
        , hr [] []
        , text
            ("Times changed: "
                ++ toString model.changesCount
            )
        , hr [] []
        , text
            ("Characters: "
                ++ toString (String.length model.text)
            )
        , hr [] []
        , button
            [ onClick Clear ]
            [ text "Clear" ]
        , textarea
            [ rows 20
            , cols 50
            , onInput TextChanged
            , value model.text
            ]
            []
        ]