Lo más interesante de ELM es su capacidad de dibujar, por lo tanto vamos a hacer una pequeña aplicación donde se dibujan 2 botones y un circulo. Y los botones cambian la posición del circulo :
--Importo todo lo necesario.
import Svg exposing (..)
import Svg.Attributes exposing (..)
import Html.Events exposing (onClick)
import Browser
import Html exposing (Html, button, div, text)
import Html.Events exposing (onClick)
-- Definimos una app con una vista y una función update.
main =
Browser.sandbox { init = 50, update = update, view = view }
type Msg = Increment | Decrement
update msg m =
case msg of
Increment ->
m + 10
Decrement ->
m - 10
-- La vista dibuja los botones y el circulo.
view model =
div []
[ button [ onClick Decrement ] [ Html.text "-" ]
,
svg
[ viewBox "0 0 400 400"
, width "400"
, height "400"
]
[ circle
[ cx (String.fromInt model)
, cy "50"
, r "40"
, fill "red"
, stroke "black"
, strokeWidth "3"
]
[]
]
, button [ onClick Increment ] [ Html.text "+" ]
]
Si quieren probarlo pueden hacerlo acá : https://elm-lang.org/try
Y creo que esta es la frutilla de la torta.
Dejo link : https://guide.elm-lang.org/
