HTML + javascript + Haskell = ELM, parte 11

Este es el ultimo post de esta serie de posts. Por supuesto vamos a seguir jugando con ELM.

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/