Initial commit: Elm tutorial for JavaScript developers

This tutorial includes:
- 7 progressive lessons covering Elm fundamentals
- Exercises with starter code
- Solutions for exercises
- Final project: Task Manager app with localStorage persistence

Topics covered:
- Basic syntax and types
- Functions and functional programming concepts
- The Elm Architecture (Model-View-Update)
- Lists and Maybe types
- HTTP requests and JSON decoding
- Ports for JavaScript interop
This commit is contained in:
2026-03-11 11:07:15 +00:00
commit 7d7986f3ab
16 changed files with 5342 additions and 0 deletions

View File

@@ -0,0 +1,100 @@
module Main exposing (main)
{-| Exercise 3: Temperature Converter
Build a temperature converter:
Exercise 3.1: Convert Celsius to Fahrenheit (F = C × 9/5 + 32)
Exercise 3.2: Add Fahrenheit to Celsius conversion
Exercise 3.3: Handle invalid input gracefully
Run with: elm reactor
Then open http://localhost:8000/src/Main.elm
-}
import Browser
import Html exposing (Html, div, input, text)
import Html.Attributes exposing (placeholder, value)
import Html.Events exposing (onInput)
-- MODEL
type alias Model =
{ celsius : String
}
init : Model
init =
{ celsius = ""
}
-- UPDATE
type Msg
= UpdateCelsius String
update : Msg -> Model -> Model
update msg model =
case msg of
UpdateCelsius value ->
{ model | celsius = value }
-- HELPER FUNCTIONS
celsiusToFahrenheit : Float -> Float
celsiusToFahrenheit c =
-- TODO: Implement the conversion formula
0
-- VIEW
view : Model -> Html Msg
view model =
let
fahrenheit =
case String.toFloat model.celsius of
Just c ->
-- TODO: Call celsiusToFahrenheit and format the result
"TODO"
Nothing ->
"Enter a valid number"
in
div []
[ input
[ placeholder "Enter Celsius"
, value model.celsius
, onInput UpdateCelsius
]
[]
, text " °C = "
, text fahrenheit
]
-- MAIN
main : Program () Model Msg
main =
Browser.sandbox
{ init = init
, update = update
, view = view
}