button text-field form by Elm-lang

elm make src/Main.elm  =>  index.html

----------------------------------------------------------------------------------------------------- 

module Main exposing (..)

import Browser

import Html exposing (Html, button, div, text)

import Html.Events exposing (onClick)

main =

  Browser.sandbox { init = init, update = update, view = view }

-- MODEL

type alias Model = Int

init : Model

init =

  0

-- UPDATE

type Msg

  = Increment

  | Decrement

update : Msg -> Model -> Model

update msg model =

  case msg of

    Increment ->

      model + 1

    Decrement ->

      model - 1

-- VIEW

view : Model -> Html Msg

view model =

  div []

    [ button [ onClick Decrement ] [ text "-" ]

    , div [] [ text (String.fromInt model) ]

    , button [ onClick Increment ] [ text "+" ]

    ]

---------------------------------------------------------------------------------------------

module Main exposing (..)

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 (String.reverse model.content) ]

    ]

---------------------------------------------------------------------------------------

module Main exposing (..)

import Browser

import Html exposing (..)

import Html.Attributes exposing (..)

import Html.Events exposing (onInput)

-- MAIN

main =

  Browser.sandbox { init = init, update = update, view = view }

-- MODEL

type alias Model =

  { name : String

  , password : String

  , passwordAgain : String

  }

init : Model

init =

  Model "" "" ""

-- UPDATE

type Msg

  = Name String

  | Password String

  | PasswordAgain String

update : Msg -> Model -> Model

update msg model =

  case msg of

    Name name ->

      { model | name = name }

    Password password ->

      { model | password = password }

    PasswordAgain password ->

      { model | passwordAgain = password }

-- VIEW

view : Model -> Html Msg

view model =

  div []

    [ viewInput "text" "Name" model.name Name

    , viewInput "password" "Password" model.password Password

    , viewInput "password" "Re-enter Password" model.passwordAgain PasswordAgain

    , viewValidation model

    ]

viewInput : String -> String -> String -> (String -> msg) -> Html msg

viewInput t p v toMsg =

  input [ type_ t, placeholder p, value v, onInput toMsg ] []

viewValidation : Model -> Html msg

viewValidation model =

  if model.password == model.passwordAgain then

    div [ style "color" "green" ] [ text "OK" ]

  else

    div [ style "color" "red" ] [ text "Passwords do not match!" ]