Intro to Elm - SF Elm meetup 2016-06-22

README.md

• Elm Website
• Official Elm Guide
• Elm package search and documentation
• Join Elm Slack

elm-make
elm-package install elm-lang/html
elm-make Main.elm && open index.html
elm-reactor

Main.elm

module Main exposing (..)

import Html.App
import Html exposing (..)
import Html.Attributes exposing (..)
import Html.Events exposing (onClick, onInput)
import String


type alias Model =
    { count : Int
    , textInput : Int
    }


type Msg
    = Increment
    | Decrement
    | MultiplyBy Int
    | TextChanged String
    | IncerementByTextFieldAmount


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


initialModel : Model
initialModel =
    { count = 0
    , textInput = 0
    }


update : Msg -> Model -> Model
update action model =
    case action of
        Increment ->
            { model | count = model.count + 1 }

        Decrement ->
            { model | count = model.count - 1 }

        MultiplyBy howMuch ->
            { model | count = model.count * howMuch }

        TextChanged text ->
            case (String.toInt text) of
                Ok parsedInt ->
                    { model | textInput = parsedInt }

                Err errorMessage ->
                    model

        IncerementByTextFieldAmount ->
            { model | count = model.count + model.textInput }


handleTextChange : String -> Msg
handleTextChange text =
    TextChanged text


view : Model -> Html Msg
view model =
    div []
        [ text ("Current count: " ++ toString model.count)
        , button [ onClick Increment ] [ text "Increment" ]
        , button [ onClick Decrement ] [ text "Decrement" ]
        , button [ onClick (MultiplyBy 3) ] [ text "x3" ]
        , button [ onClick (MultiplyBy 10) ] [ text "x10" ]
        , hr [] []
        , input [ onInput handleTextChange ] []
        , button [ onClick IncerementByTextFieldAmount ]
            [ text "Increment by that much" ]
        , hr [] []
        , pre [] [ text (toString model) ]
        ]