messing around with elm -- take input, reverse it, upper case it, count chars, change color if length is even

elm extend sample

{- 
for v 0.17

http://guide.elm-lang.org/architecture/user_input/text_fields.html
  1. reverse and uppercase input. Check
  2. count & display the number of characters. Check
  3. change text color if even number of characters . . . Check, but ugly.
-}


import Html exposing (Html, Attribute, text, div, input)
import Html.App exposing (beginnerProgram)
import Html.Attributes exposing (..)
import Html.Events exposing (onInput)
import String exposing (..)


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


-- UPDATE

type Msg = NewContent String

update (NewContent content) oldContent =
  content


-- VIEW

reverseAndUpper: String -> String
reverseAndUpper s =
  reverse s 
    |> toUpper

{-
even_or_odd : Int -> String
even_or_odd x = 
  if x % 2 == 0 then 
    "green" 
  else 
    "red"
-}



blueIfEven : String -> Attribute msg
blueIfEven s =
  let 
    blue = 
       style
        [ ("width", "100%")
        , ("height", "40px")
        , ("padding", "10px 0")
        , ("font-size", "2em")
        , ("text-align", "center")
        , ("color", "blue")
        ]
  in 
    if (String.length s) % 2 == 0 then
      blue 
    else
      style
        [ ("width", "100%")
        , ("height", "40px")
        , ("padding", "10px 0")
        , ("font-size", "2em")
        , ("text-align", "center")
        ]

{-
getStyle = 
  let 
    theStyle =
      [ blueIfEven content ]
  in 
    theStyle 
 -} 
 
view content =
  div []
    [ input [ placeholder "Text to reverse", onInput NewContent, myStyle ] []
    , div [ blueIfEven content ] [ text (reverseAndUpper content) ]
    , div [ myStyle ] [ text (toString (String.length content)) ]

    ]

myStyle =
  style
    [ ("width", "100%")
    , ("height", "40px")
    , ("padding", "10px 0")
    , ("font-size", "2em")
    , ("text-align", "center")
    ]

blueIfEven : String -> Attribute msg
blueIfEven s =
  let 
    baseAttribs = 
      [ ("width", "100%")
      , ("height", "40px")
      , ("padding", "10px 0")
      , ("font-size", "2em")
      , ("text-align", "center") 
      ]
    blue = 
      baseAttribs ++ 
        [ ("color", "blue")
        ]
    attribs =
      if even (String.length s) then
        blue
      else
        baseAttribs
  in 
    style attribs