Hi,

as a former enthusiastic Haskell programmer I got excited about Elm and 
eventually started today to learn Elm by examples 
(http://elm-lang.org/examples).

My first exercise was about checkboxes: 
http://elm-lang.org/examples/checkboxes

There at the very bottom an exercise is proposed:

> -- Exercise: move the repetative code in `view` into a separate function
> -- and use it three times.
>

I introduced a function named "radio" for this purpose and it works (code 
below).

Then I was thinking about extending the exercise a bit: I want a fourth 
radio button named "clear" that sets the model of the three other buttons 
to False if clear is True. So I extended the types *Model* and *Msg* 
appropriately. And this works as well. However, I failed in the 
implementation of the last natural requirement: when I check the clear 
button all the other buttons should be unchecked.

How can I achieve this?

This is my compiling but incomplete attempt:

import Html exposing (..)
import Html.App exposing (beginnerProgram)
import Html.Attributes exposing (..)
import Html.Events exposing (onCheck)


main =
  beginnerProgram { model = model, view = view, update = update }



-- MODEL


type alias Model =
  { red : Bool
  , underline : Bool
  , bold : Bool
  , clear : Bool
  }


model : Model
model =
  Model False False False True



-- UPDATE


type Msg
  = Red Bool
  | Underline Bool
  | Bold Bool
  | Clear Bool


update : Msg -> Model -> Model
update msg model =
  case msg of
    Red bool ->
        { model | red = bool }

    Underline bool ->
        { model | underline = bool }

    Bold bool ->
        { model | bold = bool }
    Clear bool ->
        Model False False False bool


-- VIEW


view : Model -> Html Msg
view model =
  div []
    [ span [toStyle model] [text "Hello, how are you?!"]
    , div [] [text (toString model)]
    , radio "bold"
    , radio "underline"
    , radio "red"
    , radio "clear"
    ]


radio : String -> Html Msg
radio str =
  let (event,model') =
    case str of
      "red" -> (Red,model.red)
      "underline" -> (Underline,model.underline)
      "bold" -> (Bold,model.bold)
      _ -> (Clear,model.clear)
  in
    label []
      [ br [] []
      , input [ type' "checkbox", checked model', onCheck event ] []
      , text str
      ]

toStyle : Model -> Attribute msg
toStyle model =
  style
    [ ("color", if model.red then "red" else "black")
    , ("text-decoration", if model.underline then "underline" else "none")
    , ("font-weight", if model.bold then "bold" else "normal")
    ]


-- Exercise: move the repetative code in `view` into a separate function
-- and use it three times.

Somehow in my radio function the checked attribute must be updated on any 
Msg. I stuck here. Probably a boring exercise for an experienced elm 
programmer, but not so for beginners.
So any help is appriciated! 

Cheers,
Immanuel




-- 
You received this message because you are subscribed to the Google Groups "Elm 
Discuss" group.
To unsubscribe from this group and stop receiving emails from it, send an email 
to [email protected].
For more options, visit https://groups.google.com/d/optout.

Reply via email to