wordyallen · October 13, 2016 22:39 · colindensem · Oct 10, 2016
diff --git a/examples.elm b/examples.elm
 import Html exposing (text)

 main =
  text "Hello, World!"
diff --git a/forms.elm b/forms.elm
 import Html exposing (Html, Attribute, div, input, text)
 import Html.App as App
 import Html.Attributes exposing (..)
 import Html.Events exposing (onInput)
 import String
 import Char
 import List

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

 -- 01 schema
 type alias Model = {
    name: String,
    password: String,
    passwordAgain: String
  }

 -- 02 init state
 model: Model
 model = Model "" "" ""

 -- 03 set up actions with there type inputs
 type Msg = Name String | Password String | PasswordAgain String


 -- 04 reducer
 update: Msg -> Model -> Model
 update msg model =
  case msg of
    Name name -> {model | name = name}
    Password password -> { model | password = password }
    PasswordAgain password -> {model | passwordAgain = password}


 -- 05 view component
 view: Model -> Html Msg
 view model = div [] [
    input [type' "text", placeholder "Name",   onInput Name ] [],
    input [type' "password", placeholder "Password",   onInput Password ] [],
    input [type' "password", placeholder "PasswordAgain",  onInput PasswordAgain ] [],
    loginStatus model
  ]

 -- 06 helpers
 loginStatus:  Model -> Html msg
 loginStatus model =
  let (color, message) =
    if  String.length model.password  < 4 &&
        String.length model.password >= 1 ||
        not (List.any Char.isUpper (String.toList model.password)) ||
        not (List.any Char.isDigit (String.toList model.password))
    then
      ("red", "needs to be at least 4 chars, 1 upper, and a num")
    else if  model.password /= model.passwordAgain then
      ("red", "passwords do not match")
    else
      ("green", "yer") 
  in
    div [ style [("color", color)] ][text message]
diff --git a/index.html b/index.html
 <!DOCTYPE html>
 <html lang="en">
 <head>
  <meta charset="UTF-8">
  <title>Document</title>
 </head>
 <body>
  <script  src="elm.js"></script>

 </body>
 </html>
	import Html exposing (Html, Attribute, div, input, text)
	import Html.App as App
	import Html.Attributes exposing (..)
	import Html.Events exposing (onInput)
	import String
	import Char
	import List

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

	-- 01 schema
	type alias Model = {
	name: String,
	password: String,
	passwordAgain: String
	}

	-- 02 init state
	model: Model
	model = Model "" "" ""

	-- 03 set up actions with there type inputs
	type Msg = Name String \| Password String \| PasswordAgain String


	-- 04 reducer
	update: Msg -> Model -> Model
	update msg model =
	case msg of
	Name name -> {model \| name = name}
	Password password -> { model \| password = password }
	PasswordAgain password -> {model \| passwordAgain = password}


	-- 05 view component
	view: Model -> Html Msg
	view model = div [] [
	input [type' "text", placeholder "Name", onInput Name ] [],
	input [type' "password", placeholder "Password", onInput Password ] [],
	input [type' "password", placeholder "PasswordAgain", onInput PasswordAgain ] [],
	loginStatus model
	]

	-- 06 helpers
	loginStatus: Model -> Html msg
	loginStatus model =
	let (color, message) =
	if String.length model.password < 4 &&
	String.length model.password >= 1 \|\|
	not (List.any Char.isUpper (String.toList model.password)) \|\|
	not (List.any Char.isDigit (String.toList model.password))
	then
	("red", "needs to be at least 4 chars, 1 upper, and a num")
	else if model.password /= model.passwordAgain then
	("red", "passwords do not match")
	else
	("green", "yer")
	in
	div [ style [("color", color)] ][text message]
	<!DOCTYPE html>
	<html lang="en">
	<head>
	<meta charset="UTF-8">
	<title>Document</title>
	</head>
	<body>
	<script src="elm.js"></script>

	</body>
	</html>