Elm UI Counter Example - Elm-ui Typing CST Test

Elm UI Counter Example — Elm-ui Code

Demonstrates a simple counter layout using Elm UI declarative syntax.

module Main exposing (main)

import Browser
import Element exposing (..)
import Element.Events exposing (onClick)

-- MODEL

type alias Model =
	{ count : Int }

initialModel : Model
initialModel =
	{ count = 0 }

-- UPDATE

type Msg = Increment | Decrement | Reset

update : Msg -> Model -> Model
update msg model =
	case msg of
		Increment -> { model | count = model.count + 1 }
		Decrement -> { model | count = model.count - 1 }
		Reset -> { model | count = 0 }

-- VIEW

view : Model -> Element Msg
view model =
	column [ spacing 10, padding 20, alignCenter ]
		[ text ("Counter: " ++ String.fromInt model.count)
		, row [ spacing 10 ]
		[ button [ onClick Increment ] (text "+")
		, button [ onClick Decrement ] (text "-")
		, button [ onClick Reset ] (text "Reset")
		]
		]

-- MAIN

main =
	Browser.sandbox { init = initialModel, update = update, view = view }

Elm-ui Language Guide

Elm UI is a library for building web interfaces in Elm, focusing on layout and styling in a declarative, type-safe way without relying on CSS.

More Elm-ui Typing Exercises

Practice Other Languages