Intro to Elm Notes - SF Elm meetup 2016-08-17

README.md

Links

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

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

Next Steps

• Advanced programs: Using Effects (HTTP requests, Timers, Random numbers, Animation, etc.)
• Interoperating with Javascript

Main.elm

module Main exposing (..)

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


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



-- Model


type alias Model =
    { result : Float
    , stack : List Float
    , name : String
    }


initialModel : Model
initialModel =
    { result = 70080
    , stack = [ 10, 100, 1000 ]
    , name = "Aaron"
    }



-- Update


type Msg
    = Button Int
    | Add
    | Enter
    | Clear


update : Msg -> Model -> Model
update msg model =
    case Debug.log "update" msg of
        Button n ->
            { model
                | result = toFloat n
                , name = "Bob"
            }

        _ ->
            model



-- View


keyButton : Int -> Html Msg
keyButton value =
    button
        [ style [ ( "width", "50px" ) ]
        , onClick (Button value)
        ]
        [ text (toString value) ]


viewStackItem : Float -> Html Msg
viewStackItem stackItem =
    li [] [ text (toString stackItem) ]


view : Model -> Html Msg
view model =
    div
        [ style
            [ ( "background-color", "red" )
            , ( "width", "200px" )
            , ( "padding", "10px" )
            , ( "border-radius", "5px" )
            ]
        ]
        [ ul [] (List.map viewStackItem model.stack)
        , input [ value (toString model.result) ] []
        , br [] []
        , keyButton 7
        , keyButton 8
        , keyButton 9
        , br [] []
        , keyButton 4
        , keyButton 5
        , keyButton 6
        , br [] []
        , keyButton 1
        , keyButton 2
        , keyButton 3
        ]