Learn Elm - 10 Code Examples & CST Typing Practice Test
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.
Learn ELM with Real Code Examples
Updated Nov 20, 2025
Code Sample Descriptions
Elm Counter and Theme Toggle
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 }
Demonstrates a simple counter with theme toggling using Elm's functional architecture.
Elm Fibonacci Sequence
module Main exposing (..)
import Browser
import Html exposing (Html, div, text)
fib n = if n < 2 then n else fib (n-1) + fib (n-2)
view = div [] (List.map (\n -> div [] [ text (String.fromInt (fib n)) ]) (List.range 0 9))
main = Browser.sandbox { init = (), update = \_ model -> model, view = \_ -> view }
Generates first 10 Fibonacci numbers and displays them.
Elm Factorial Calculator
module Main exposing (..)
import Browser
import Html exposing (Html, text, div)
fact n = if n == 0 then 1 else n * fact (n-1)
view = div [] [ text (String.fromInt (fact 5)) ]
main = Browser.sandbox { init = (), update = \_ model -> model, view = \_ -> view }
Calculates factorial of a number using recursion.
Elm Prime Checker
module Main exposing (..)
import Browser
import Html exposing (Html, text, div)
isPrime n = List.all ((/=0) << modBy n) (List.range 2 (n-1)) && n > 1
view = div [] [ text (if isPrime 13 then "Prime" else "Not Prime") ]
main = Browser.sandbox { init = (), update = \_ model -> model, view = \_ -> view }
Checks if a number is prime.
Elm Sum of List
module Main exposing (..)
import Browser
import Html exposing (Html, div, text)
nums = [1,2,3,4,5]
sumList = List.foldl (+) 0 nums
view = div [] [ text (String.fromInt sumList) ]
main = Browser.sandbox { init = (), update = \_ model -> model, view = \_ -> view }
Calculates the sum of a list of numbers.
Elm Reverse String
module Main exposing (..)
import Browser
import Html exposing (Html, div, text)
reverseString s = String.join "" (List.reverse (String.toList s))
view = div [] [ text (reverseString "HELLO") ]
main = Browser.sandbox { init = (), update = \_ model -> model, view = \_ -> view }
Reverses a string.
Elm Multiplication Table
module Main exposing (..)
import Browser
import Html exposing (Html, div, text)
n = 5
view = div [] (List.map (\i -> div [] [ text (String.fromInt n ++ " x " ++ String.fromInt i ++ " = " ++ String.fromInt (n*i)) ]) (List.range 1 10))
main = Browser.sandbox { init = (), update = \_ model -> model, view = \_ -> view }
Prints multiplication table of a number.
Elm Celsius to Fahrenheit
module Main exposing (..)
import Browser
import Html exposing (Html, div, text)
c = 25
f = (c * 9 // 5) + 32
view = div [] [ text (String.fromInt f) ]
main = Browser.sandbox { init = (), update = \_ model -> model, view = \_ -> view }
Converts Celsius to Fahrenheit.
Elm Simple Alarm Simulation
module Main exposing (..)
import Browser
import Html exposing (Html, div, text)
temp = 80
thresh = 75
view = div [] [ text (if temp > thresh then "Alarm: Temperature Too High!" else "Temperature Normal") ]
main = Browser.sandbox { init = (), update = \_ model -> model, view = \_ -> view }
Simulates an alarm when temperature exceeds a threshold.
Elm Random Walk Simulation
module Main exposing (..)
import Browser
import Html exposing (Html, div, text)
import Random
positions = List.scanl (+) 0 (List.map (\_ -> if Random.step (Random.float 0 1) Random.initialSeed |> Tuple.first < 0.5 then 1 else -1) (List.range 1 10))
view = div [] (List.map (\p -> div [] [ text (String.fromInt p) ]) positions)
main = Browser.sandbox { init = (), update = \_ model -> model, view = \_ -> view }
Simulates a 1D random walk.
Frequently Asked Questions about Elm
What is Elm?
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.
What are the primary use cases for Elm?
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
What are the strengths of Elm?
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
What are the limitations of Elm?
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
How can I practice Elm typing speed?
CodeSpeedTest offers 10+ real Elm code examples for typing practice. You can measure your WPM, track accuracy, and improve your coding speed with guided exercises.