shaunchurch · August 28, 2017 18:09 · Aug 28, 2017
diff --git a/elm-intro.elm b/elm-intro.elm
@@ -0,0 +1,105 @@
+import Html exposing (Html, button, div, text, input)
+import Html.Attributes exposing (..)
+import Html.Events exposing (onClick, onInput, onSubmit)
+
+main : Program Never Model Msg
+main = Html.beginnerProgram { model = model, view = view, update = update }
+
+-- app state model
+type alias Model = {
+  counter : Int,
+  input: String,
+  name: String,
+  password: String,
+  passwordAgain: String,
+  age: Int,
+  submitted: Bool,
+  error: String
+}
+model : Model
+model =
+  Model 0 "" "" "" "" 0 False ""
+
+type Msg
+  = Increment
+  | Decrement
+  | Reset
+  | Change String
+  | Name String
+  | Password String
+  | PasswordAgain String
+  | Age String
+  | Submit
+  | Error String
+
+update : Msg -> Model -> Model
+update msg model =
+  case msg of
+    Increment ->
+     {model | counter = model.counter  + 1 }
+
+    Decrement ->
+      { model | counter = model.counter - 1 }
+
+    Reset ->
+      { model | counter = 0 }
+
+    Change newContent ->
+      { model | input = newContent }
+
+    Name name ->
+      { model | name = name }
+
+    Password password ->
+      { model | password = password }
+
+    PasswordAgain password ->
+      { model | passwordAgain = password }
+
+    Age age ->
+      case String.toInt age of
+        Ok val ->
+          { model | age = val }
+        Err err ->
+          model
+
+    Submit  ->
+      { model | submitted = True }
+
+    Error error ->
+      {model | error = error}
+
+
+view : Model -> Html Msg
+view model =
+  div [] [
+      button [ onClick Decrement ] [text "-" ]
+    , div [] [ text ( toString model.counter) ]
+    , button [ onClick Increment ] [ text "+" ]
+    , button [ onClick Reset ] [ text "reset"]
+    , div [] [ text (String.reverse model.input) ]
+    , div [] 
+      [ input [ type_ "text", placeholder "Name", onInput Name ] []
+      , input [ type_ "password", placeholder "Password", onInput Password ] []
+      , input [ type_ "password", placeholder "Re-enter Password", onInput PasswordAgain ] []
+      , input [ type_ "text", placeholder "Age", onInput Age ] []
+      , button [ type_ "submit", value "Submit", onClick Submit ] []
+      , viewValidation model
+      ]
+    ]
+
+viewValidation : Model -> Html msg
+viewValidation model =
+  let
+    (color, message) =
+      if model.password /= model.passwordAgain then
+        ("red", "Passwords do not match!")
+      else if String.length model.password <= 8 then
+        ("red", "Password should be longer than 8 characters.")
+      else
+        ("green", "OK")
+  in
+    if model.submitted then
+      div [ style [("color", color)] ] [ text message ]
+    else
+      div [] []