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:
100
exercises/03-temperature/src/Main.elm
Normal file
100
exercises/03-temperature/src/Main.elm
Normal 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
|
||||
}
|
||||
Reference in New Issue
Block a user