Simple Main.elm file

Main.elm

module Main exposing (..)

-- elm init
-- elm install elm/url
-- elm install rtfeldman/elm-css

import Browser
import Browser.Navigation as Nav
import Css
import Css.Global
import Html.Styled exposing (Html, button, div, p, text, toUnstyled)
import Html.Styled.Events exposing (onClick)
import Url


main : Program () Model Msg
main =
    Browser.application
        { view = view
        , init = init
        , update = update
        , subscriptions = subscriptions
        , onUrlChange = UrlChanged
        , onUrlRequest = LinkClicked
        }


subscriptions : Model -> Sub Msg
subscriptions model =
    Sub.none


type alias Model =
    { value : Int
    }


init : flags -> Url.Url -> Nav.Key -> ( Model, Cmd Msg )
init flags url key =
    let
        state =
            { value = 0
            }
    in
    ( state, Cmd.none )


type Msg
    = UrlChanged Url.Url
    | LinkClicked Browser.UrlRequest
    | ButtonClicked


update : Msg -> Model -> ( Model, Cmd Msg )
update msg model =
    case msg of
        UrlChanged url ->
            ( model, Cmd.none )

        LinkClicked urlRequest ->
            case urlRequest of
                Browser.Internal href ->
                    ( model, Nav.load (Url.toString href) )

                Browser.External href ->
                    ( model, Nav.load href )

        ButtonClicked ->
            ( { value = model.value + 1 }, Cmd.none )


view : Model -> Browser.Document Msg
view model =
    let
        body =
            div
                []
                [ p
                    []
                    [ text <| String.fromInt model.value ]
                , button
                    [ onClick ButtonClicked ]
                    [ text "Increment" ]
                ]
    in
    { title = "Starter page"
    , body =
        [ Css.Global.global
            [ Css.Global.body
                [ Css.margin (Css.px 20)
                ]
            , Css.Global.everything
                [ Css.boxSizing Css.borderBox
                ]
            ]
            |> toUnstyled
        , body |> toUnstyled
        ]
    }