Skip to content

Instantly share code, notes, and snippets.

Embed
What would you like to do?
Hexadecimal Color Explorer
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 }
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment