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

solutions/02-counter/src/Main.elm

@@ -0,0 +1,85 @@
+module Main exposing (main)
+
+{-| Counter Solution
+
+This is the solution to Exercise 2 with:
+- Reset button
+- Double button
+- Prevents count from going below 0
+
+-}
+
+import Browser
+import Html exposing (Html, button, div, text)
+import Html.Events exposing (onClick)
+
+
+
+-- MODEL
+
+
+type alias Model =
+    { count : Int
+    }
+
+
+init : Model
+init =
+    { count = 0
+    }
+
+
+
+-- UPDATE
+
+
+type Msg
+    = Increment
+    | Decrement
+    | Reset
+    | Double
+
+
+update : Msg -> Model -> Model
+update msg model =
+    case msg of
+        Increment ->
+            { model | count = model.count + 1 }
+
+        Decrement ->
+            -- Prevent going below 0
+            { model | count = max 0 (model.count - 1) }
+
+        Reset ->
+            { model | count = 0 }
+
+        Double ->
+            { model | count = model.count * 2 }
+
+
+
+-- VIEW
+
+
+view : Model -> Html Msg
+view model =
+    div []
+        [ button [ onClick Decrement ] [ text "-" ]
+        , div [] [ text (String.fromInt model.count) ]
+        , button [ onClick Increment ] [ text "+" ]
+        , button [ onClick Reset ] [ text "Reset" ]
+        , button [ onClick Double ] [ text "Double" ]
+        ]
+
+
+
+-- MAIN
+
+
+main : Program () Model Msg
+main =
+    Browser.sandbox
+        { init = init
+        , update = update
+        , view = view
+        }

solutions/03-temperature/src/Main.elm

@@ -0,0 +1,124 @@
+module Main exposing (main)
+
+{-| Temperature Converter Solution
+
+Converts between Celsius and Fahrenheit
+
+-}
+
+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
+    , fahrenheit : String
+    }
+
+
+init : Model
+init =
+    { celsius = ""
+    , fahrenheit = ""
+    }
+
+
+
+-- UPDATE
+
+
+type Msg
+    = UpdateCelsius String
+    | UpdateFahrenheit String
+
+
+update : Msg -> Model -> Model
+update msg model =
+    case msg of
+        UpdateCelsius value ->
+            { model
+                | celsius = value
+                , fahrenheit =
+                    case String.toFloat value of
+                        Just c ->
+                            String.fromFloat (celsiusToFahrenheit c)
+
+                        Nothing ->
+                            ""
+            }
+
+        UpdateFahrenheit value ->
+            { model
+                | fahrenheit = value
+                , celsius =
+                    case String.toFloat value of
+                        Just f ->
+                            String.fromFloat (fahrenheitToCelsius f)
+
+                        Nothing ->
+                            ""
+            }
+
+
+
+-- HELPER FUNCTIONS
+
+
+celsiusToFahrenheit : Float -> Float
+celsiusToFahrenheit c =
+    c * 9 / 5 + 32
+
+
+fahrenheitToCelsius : Float -> Float
+fahrenheitToCelsius f =
+    (f - 32) * 5 / 9
+
+
+
+-- VIEW
+
+
+view : Model -> Html Msg
+view model =
+    div []
+        [ div []
+            [ input
+                [ placeholder "Celsius"
+                , value model.celsius
+                , onInput UpdateCelsius
+                ]
+                []
+            , text " °C"
+            ]
+        , div []
+            [ text " = "
+            ]
+        , div []
+            [ input
+                [ placeholder "Fahrenheit"
+                , value model.fahrenheit
+                , onInput UpdateFahrenheit
+                ]
+                []
+            , text " °F"
+            ]
+        ]
+
+
+
+-- MAIN
+
+
+main : Program () Model Msg
+main =
+    Browser.sandbox
+        { init = init
+        , update = update
+        , view = view
+        }