Elm UI Color Box Example - Elm-ui Typing CST Test

Elm UI Color Box Example — Elm-ui Code

Changes a colored box when a button is clicked.

module Main exposing (main)

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

-- MODEL

type alias Model =
	{ active : Bool }

initialModel : Model
initialModel = { active = False }

-- UPDATE

type Msg = Toggle

update : Msg -> Model -> Model
update msg model =
	case msg of Toggle -> { model | active = not model.active }

-- VIEW

view : Model -> Element Msg
view model =
	column [ spacing 10, padding 20, alignCenter ]
		[ el [ width (px 100), height (px 100), Background.color (if model.active then blue else red) ] (text "")
		, button [ onClick Toggle ] (text "Change Color")
		]

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