Elm UI Counter with Step - Elm-ui Typing CST Test

Elm UI Counter with Step — Elm-ui Code

A counter that increases or decreases by a specified step.

module Main exposing (main)

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

-- MODEL

type alias Model =
	{ count : Int, step : Int }

initialModel : Model
initialModel =
	{ count = 0, step = 5 }

-- UPDATE

type Msg = Increment | Decrement

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

-- VIEW

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

-- 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