Counter and Theme Toggle - Elm Typing CST Test

Mode:

Duration:

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 }Coding works best on desktop or with an external keyboard.

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.

Primary Use Cases

▸Front-end web application development
▸Single-page applications (SPAs)
▸Interactive dashboards and data visualization
▸Real-time user interfaces
▸Educational projects teaching functional programming for web

Notable Features

▸Strong static typing with type inference
▸No runtime exceptions for type-safe programs
▸Immutable data structures
▸Pure functions with side effects managed via Elm Runtime
▸The Elm Architecture (TEA) for structured applications

Origin & Creator

Elm was created in 2012 by Evan Czaplicki as part of his thesis project at Harvard University to improve front-end development with functional programming principles.

Industrial Note

Elm is mostly used in web development projects requiring high reliability and maintainable codebases. Its concepts have influenced frameworks like Redux in JavaScript.

Quick Explain

▸Elm uses functional reactive programming to manage state and UI.
▸Its type system eliminates runtime exceptions for well-typed programs.
▸Elm promotes a clear architecture (The Elm Architecture) for predictable, maintainable applications.

Core Features

▸Immutable values and functions
▸Algebraic data types (custom types and unions)
▸Pattern matching for control flow
▸Signals and subscriptions for reactive programming
▸Module system for code organization

Learning Path

▸Learn basic functional programming concepts
▸Understand immutable data and pure functions
▸Practice The Elm Architecture (TEA)
▸Build small interactive web apps
▸Progress to larger SPA projects

Practical Examples

▸Todo list SPA
▸Interactive calculator
▸Data visualization charts
▸Simple game using Elm graphics
▸Live chat application using subscriptions

Comparisons

▸Elm vs JavaScript: type-safe, no runtime errors
▸Elm vs React: pure functional architecture vs component-based
▸Elm vs TypeScript: Elm enforces immutability and no-null guarantees
▸Elm vs ReasonML: similar functional paradigms, Elm focused on front-end
▸Elm vs Angular/Vue: simpler, more maintainable architecture

Strengths

▸Predictable and maintainable codebase
▸Eliminates many runtime bugs
▸Highly composable and declarative UI
▸Simple integration with JavaScript via ports
▸Strong compiler feedback improves developer productivity

Limitations

▸Smaller ecosystem compared to JavaScript frameworks
▸Limited third-party library availability
▸Learning curve for developers unfamiliar with functional programming
▸Interfacing with existing JavaScript code can be verbose
▸Not suitable for non-web projects

When NOT to Use

▸Server-side programming
▸Large-scale enterprise front-end without JS interop
▸Projects requiring extensive third-party JS libraries
▸Mobile app development (except via Elm Native or wrappers)
▸Non-web domains

Cheat Sheet

▸type alias Model = { count : Int }
▸init : Model = { count = 0 }
▸type Msg = Increment
▸update : Msg -> Model -> Model
▸view : Model -> Html Msg

FAQ

▸Is Elm still relevant today?
▸Yes, for projects needing highly reliable front-end code with minimal runtime errors.
▸Can Elm integrate with existing JavaScript?
▸Yes, via ports for controlled interop.
▸Does Elm support object-oriented programming?
▸No, Elm is purely functional.
▸Why learn Elm?
▸To build maintainable, type-safe, and reliable web applications.

30-Day Skill Plan

▸Week 1: Basics of Elm syntax and types
▸Week 2: Functions, pattern matching, and modules
▸Week 3: Elm Architecture and building simple apps
▸Week 4: Managing side effects with Cmd and Sub
▸Week 5: Integrating Elm with JavaScript and testing

Final Summary

▸Elm is a functional language for front-end web development with strong static typing and immutability.
▸It eliminates runtime errors and promotes maintainable code through The Elm Architecture.
▸Best suited for reliable, interactive single-page web applications.

Project Structure

▸src/ directory for Elm modules
▸elm.json for project configuration
▸Main.elm as entry point
▸Test/ directory for unit tests
▸Assets and static files for front-end

Monetization

▸Reliable front-end apps for startups and businesses
▸Educational tools and courses teaching Elm
▸Data dashboards and visualizations
▸Interactive web tools for clients
▸Open-source contributions for consulting services

Productivity Tips

▸Leverage TEA for predictable state management
▸Use Elm Reactor for live reloading
▸Format code consistently
▸Write modular and reusable functions
▸Integrate with JS via ports only when necessary

Basic Concepts

▸Immutable variables and constants
▸Pure functions
▸Custom types and unions
▸Pattern matching for control flow
▸The Elm Architecture: Model, Update, View

Official Docs

▸Elm Guide (guide.elm-lang.org)
▸Elm API Documentation
▸Elm Packages Documentation
▸Elm Compiler Documentation
▸Elm Reactor Documentation

More Elm Typing Exercises

Elm Fibonacci Sequence Elm Factorial Calculator Elm Prime Checker Elm Sum of List Elm Reverse String Elm Multiplication Table Elm Celsius to Fahrenheit Elm Simple Alarm Simulation Elm Random Walk Simulation

Practice Other Languages

C React Python C++Rust TypeScript Kotlin PHP Java C#Ruby Mql Cql N1ql Cypher

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 }

Coding works best on desktop or with an external keyboard.

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

Primary Use Cases

▸Front-end web application development
▸Single-page applications (SPAs)
▸Interactive dashboards and data visualization
▸Real-time user interfaces
▸Educational projects teaching functional programming for web

Notable Features

▸Strong static typing with type inference
▸No runtime exceptions for type-safe programs
▸Immutable data structures
▸Pure functions with side effects managed via Elm Runtime
▸The Elm Architecture (TEA) for structured applications

Origin & Creator

Elm was created in 2012 by Evan Czaplicki as part of his thesis project at Harvard University to improve front-end development with functional programming principles.

Industrial Note

Elm is mostly used in web development projects requiring high reliability and maintainable codebases. Its concepts have influenced frameworks like Redux in JavaScript.