Main.elm

module Main exposing (..)

import Browser
import Html exposing (Html, div, button, select, option, text)
import Html.Attributes exposing (style, value)
import Html.Events exposing (onInput)


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


-- MODEL
type Color
  = White
  | Red
  | Green
  | Blue

type alias Model = { color: Color }

init: Model
init = { color = White }


-- UPDATE
type Msg = ToggleColor String

update: Msg -> Model -> Model
update msg model =
  case msg of
    ToggleColor newColor ->
      { model | color = stringToColor newColor }

colorToString: Color -> String
colorToString color =
  case color of
    White -> 
      "White"
    Red -> 
      "Red"
    Green -> 
      "Green"
    Blue -> 
      "Blue"
      
stringToColor: String -> Color
stringToColor str = 
  case str of
    "White" -> 
      White
    "Red" ->
      Red
    "Green" ->
      Green
    "Blue" ->
      Blue
    _ ->
      White

-- VIEW
colors = [White, Red, Green, Blue]
view: Model -> Html Msg
view model =
  div [] [
    div [
      style "background-color" (String.toLower (colorToString model.color)), 
      style "width" "80px", 
      style "height" "80px",
      style "border" "2px solid black"
    ] [],
    select [ onInput ToggleColor ] (List.map colorToOption colors)
  ]
  
colorToOption: Color -> Html Msg
colorToOption color = 
  option [ value (colorToString color) ] [ text (colorToString color) ]