Learn ELM with Real Code Examples

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.

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.

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.

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.

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.

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.

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.

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.

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.

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.