63 lines
1.0 KiB
Elm
63 lines
1.0 KiB
Elm
-- A text input for reversing text. Very useful!
|
|
--
|
|
-- Read how it works:
|
|
-- https://guide.elm-lang.org/architecture/text_fields.html
|
|
--
|
|
-- Changes by maxmoon:
|
|
-- - Converted String.length (int) to string
|
|
-- - New text field to show the length of the string
|
|
|
|
import Browser
|
|
import Html exposing (Html, Attribute, div, input, text)
|
|
import Html.Attributes exposing (..)
|
|
import Html.Events exposing (onInput)
|
|
|
|
|
|
-- MAIN
|
|
|
|
|
|
main =
|
|
Browser.sandbox { init = init, update = update, view = view }
|
|
|
|
|
|
|
|
-- MODEL
|
|
|
|
|
|
type alias Model =
|
|
{ content : String
|
|
}
|
|
|
|
|
|
init : Model
|
|
init =
|
|
{ content = "" }
|
|
|
|
|
|
|
|
-- UPDATE
|
|
|
|
|
|
type Msg
|
|
= Change String
|
|
|
|
|
|
update : Msg -> Model -> Model
|
|
update msg model =
|
|
case msg of
|
|
Change newContent ->
|
|
{ model | content = newContent }
|
|
|
|
|
|
|
|
-- VIEW
|
|
|
|
|
|
view : Model -> Html Msg
|
|
view model =
|
|
div []
|
|
[ input [ placeholder "Text to reverse", value model.content, onInput Change ] []
|
|
, div [] [ text ("Reverse: " ++ String.reverse model.content) ]
|
|
, div [] [ text ("Length: " ++ String.fromInt (String.length model.content)) ]
|
|
]
|