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

README.md

Links

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

Other interesting topics

• Interact with the outside world (network requests, timers, random numbers) http://guide.elm-lang.org/architecture/effects/
• Interact with Javascript http://guide.elm-lang.org/interop/javascript.html
• Using Elm with React

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

LightButton.elm

module LightButton exposing (view)

import Html
import Html.Attributes
import Html.Events


colorForBool : Bool -> String
colorForBool bool =
    if bool then
        "red"
    else
        "blue"


view : Int -> Bool -> Html.Html Int
view index isOn =
    Html.div
        [ Html.Attributes.style
            [ ( "background-color", colorForBool isOn )
            , ( "width", "150px" )
            , ( "height", "150px" )
            ]
        , Html.Events.onClick index
        ]
        []

Main.elm

module Main exposing (..)

import Html
import Html.App
import Html.Attributes
import Html.Events
import LightButton


type alias Model =
    { isOn : List Bool
    , numberOfMoves : Int
    }


initialModel : Model
initialModel =
    { isOn = [ False, False, False ]
    , numberOfMoves = 0
    }


type Msg
    = Toggle Int
    | Reset


toggleButton : Int -> List Bool -> List Bool
toggleButton indexToToggle list =
    List.indexedMap
        (\index bool ->
            if index == indexToToggle then
                not bool
            else
                bool
        )
        list


update : Msg -> Model -> Model
update msg model =
    case msg of
        Toggle indexToToggle ->
            { model
                | isOn =
                    toggleButton
                        indexToToggle
                        model.isOn
                , numberOfMoves =
                    model.numberOfMoves + 1
            }

        Reset ->
            initialModel


view : Model -> Html.Html Msg
view model =
    Html.div []
        [ Html.App.map Toggle
            (Html.div [] (List.indexedMap LightButton.view model.isOn))
        , Html.button
            [ Html.Events.onClick Reset ]
            [ Html.text "Reset" ]
        , Html.hr [] []
        , Html.text (toString model)
        ]


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