Skip to content

Instantly share code, notes, and snippets.

@dlidstrom
Last active Aug 15, 2019
Embed
What would you like to do?
Elm counter sample with flags
<!doctype html>
<html>
<head>
<meta charset="UTF-8" />
<title>Counter App</title>
<script src="app.js"></script>
</head>
<body>
<div id="app"></div>
<script>
var app = Elm.Main.init({
node: document.getElementById('app'),
flags: {
counter: 10
}
});
</script>
</body>
</html>
import Browser
import Html exposing (Html, button, div, text)
import Html.Events exposing (onClick)
type alias Flags =
{ counter : Int }
type Msg = Increment | Decrement
type Model = Model Int
init : Flags -> (Model, Cmd Msg)
init flags =
(Model flags.counter, Cmd.none)
update : Msg -> Model -> (Model, Cmd Msg)
update msg (Model counter) =
case msg of
Increment -> (Model (counter + 1), Cmd.none)
Decrement -> (Model (counter - 1), Cmd.none)
view : Model -> Html Msg
view (Model counter) =
div
[]
[ button [ onClick Decrement ] [ text "-" ]
, div [] [ text (String.fromInt counter) ]
, button [ onClick Increment ] [ text "+" ] ]
main =
Browser.element
{ init = init
, update = update
, subscriptions = \_ -> Sub.none
, view = view }
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment