Counter and Theme Toggle - Elm Typing CST Test

Counter and Theme Toggle — Elm Code

Demonstrates a simple counter with theme toggling using Elm's functional architecture.

module Main exposing (..)

import Browser
import Html exposing (Html, button, div, text)
import Html.Events exposing (onClick)

-- MODEL

type alias Model = { count : Int, isDark : Bool }

init : Model
init = { count = 0, isDark = False }

-- UPDATE

type Msg = Increment | Decrement | Reset | ToggleTheme

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 }
		ToggleTheme -> { model | isDark = not model.isDark }

-- VIEW

view : Model -> Html Msg
view model =
	div []
		[ div [] [ text ("Counter: " ++ String.fromInt model.count) ]
		, div [] [ text ("Theme: " ++ (if model.isDark then "Dark" else "Light")) ]
		, button [ onClick Increment ] [ text "+" ]
		, button [ onClick Decrement ] [ text "-" ]
		, button [ onClick Reset ] [ text "Reset" ]
		, button [ onClick ToggleTheme ] [ text "Toggle Theme" ]
		]

-- MAIN

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

Elm Language Guide

Elm is a functional programming language for front-end web development that compiles to JavaScript. It emphasizes simplicity, maintainability, and robustness through strong static typing, immutability, and a no-runtime-errors guarantee, making it ideal for building reliable web applications.

More Elm Typing Exercises

Practice Other Languages