Hexadecimal Color Explorer

HexColorExplorer.elm

import Browser
import Html exposing (Html, Attribute, div, input, text, button, p, h1)
import Html.Attributes exposing (placeholder, style, value)
import Html.Events exposing (onInput, onClick)

-- MODEL

type alias Model =
  { field : String
  , color : String
  }


init : Model
init =
  { field = ""
  , color = "000000"
  }


-- UPDATE

type Msg
  = UpdateTextfield String
  | ChangeColor


update : Msg -> Model -> Model
update msg model =
  case msg of
    UpdateTextfield newContent ->
      { model | field = newContent }
    ChangeColor -> 
      { model | color = model.field }

    
-- VIEW

view : Model -> Html Msg
view model =
  div []
    [ h1 [] [ text "Hexadecimal color explorer"]
    , input [ placeholder "Input a hexademical color.", value model.field, onInput UpdateTextfield ] []
    , div [ style "color" (String.cons '#' model.color)
          , style "font-size" "100px"
          ] 
          [ text "YOUR NAME"]
    , button [ onClick ChangeColor ] [ text "Change Color" ]
    ]
    
-- MAIN

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