Mark Gerrard
7d7986f3ab
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
101 lines
1.6 KiB
Elm
101 lines
1.6 KiB
Elm
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
|
||
}
|