Skip to content

Instantly share code, notes, and snippets.

@dlidstrom

dlidstrom/Main.elm

Last active August 15, 2019 14:15
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save dlidstrom/1600ff82de53d0507b6dcbb1b377246a to your computer and use it in GitHub Desktop.
Save dlidstrom/1600ff82de53d0507b6dcbb1b377246a to your computer and use it in GitHub Desktop.
Download ZIP
Elm counter sample with flags
Raw
index.html
<!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>
Raw
Main.elm
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