CODEWITHSUNDEEP
functional-programmingelm
Colin Ragnarök
Colin Ragnarök

Reputation: 1062

How to add further HTML elements to the elm code?

I try to implement further html elements like title (h1) or img src. I took an approach in my code with h1 one which is sadly not working. The buttons and the inputs, I found in the documentation but I don't really get (also from other tutorials) how to implement other elements.

-- VIEW


view : Model -> Html Msg
view model =
  div []
    [ h1 [] [ text "todos" ]
    ]
    [ div[] [ input [ placeholder  "🏅 Team 1", style "width" "300px", style "height" "30px", style "font-size" "25px", style "color"  "#488aff", value model.content] []
    , input [ placeholder  "💪🏼 Strength", style "width" "300px", style "height" "30px", style "font-size" "25px", style "color"  "#32db64", value model.content ] []
    ]
    , div []
  [ button [ style "background-color" "#66cc81", style "color" "white", style "margin-top" "20px", style "width" "610px", style "border-radius" "25px", style "height" "60px", style "font-size" "30px", style "margin-right" "70px"] [ text "+ADD" ]
    ]
    ]

also this version doesn't work:

view : Model -> Html Msg
view model =
  div []
    [ div [h1 [] [ text "todos" ]
    ]
    ,div[] [ input [ placeholder  "🏅 Team 1", style "width" "300px", style "height" "30px", style "font-size" "25px", style "color"  "#488aff", value model.content] []
    , input [ placeholder  "💪🏼 Strength", style "width" "300px", style "height" "30px", style "font-size" "25px", style "color"  "#32db64", value model.content ] []
    ]
    , div []
  [ button [ style "background-color" "#66cc81", style "color" "white", style "margin-top" "20px", style "width" "610px", style "border-radius" "25px", style "height" "60px", style "font-size" "30px", style "margin-right" "70px"] [ text "+ADD" ]
    ]
    ]

Upvotes: 0

Views: 200

Answers (1)

Chad Gilbert
Chad Gilbert

Reputation: 36385

There are a lot of stray brackets in your code. I've reformatted it to produce the following:

view : Model -> Html Msg
view model =
  div []
    [ h1 [] [ text "todos" ]
    , div[] [ input [ placeholder  "🏅 Team 1", style "width" "300px", style "height" "30px", style "font-size" "25px", style "color"  "#488aff", value model.content] [] ]
    , input [ placeholder  "💪🏼 Strength", style "width" "300px", style "height" "30px", style "font-size" "25px", style "color"  "#32db64", value model.content ] []
    , div [] [ button [ style "background-color" "#66cc81", style "color" "white", style "margin-top" "20px", style "width" "610px", style "border-radius" "25px", style "height" "60px", style "font-size" "30px", style "margin-right" "70px"] [ text "+ADD" ] ]
    ]

Here is a diff of your version and mine.

The div function takes two arguments: A list of attributes and a list of elements. Notice in my version above, there are some stray brackets removed that were causing compilation failures.

Upvotes: 6

Related Questions