michaelglass/README.md

## README.md

      
    Raw
  

              README.md
            
          
    After downloading, running elm-make in the extracted directory should yield a renderable example.html.

  
## example.html
<!DOCTYPE html>
<html>
  <head>
    <title>Elm Signup Form</title>

    <!-- Some basic styles for the form -->
    <style>
      label, input, .signup-button, h1, .validation-error { font-family: sans-serif; font-size: 36px; width: 200px }
      h1 { font-size: 48px; width: auto; border-bottom: 1px solid #111; padding-bottom: 10px; width: 925px; }
      label { display: inline-block; }
      input { margin: 20px; width: 680px; padding: 10px; color: #111111; }
      .signup-button { padding: 30px; background-color: #7FDBFF; color: rgb(0, 73, 102); border: none; margin: 20px 0; width: 150px;}
      .signup-button:hover { background-color: #0074D9; color: rgb(179, 220, 255); }
      form { width: 960px; margin: 80px auto; }
      .validation-error { color: #FF4136; width: 925px; box-sizing: border-box; display: inline-block; }
    </style>
  </head>

  <body>
    <!-- We'll render everything inside this div. -->
    <div id="elm-rendering-area"></div>
  </body>

  <!-- Import our compiled Elm code -->
  <script src="elm.js"></script>

  <!-- Run our Elm app! -->
  <script>
    Elm.SignupForm.embed(document.getElementById("elm-rendering-area"));
  </script>

</html>

## SignupForm.elm
module SignupForm exposing (..)

-- This is where our Elm logic lives.`module SignupForm` declares that this is
-- the SignupForm module, which is how other modules will reference this one
-- if they want to import it and reuse its code.

import Html.App


-- Elm’s "import" keyword works similarly to "require" in node.js.

import Html exposing (..)


-- The “exposing (..)” option says that we want to bring the Html module’s contents
-- into this file’s current namespace, so that instead of writing out
-- Html.form and Html.label we can use "form" and "label" without the "Html."

import Html.Events exposing (..)


-- This works the same way; we also want to import the entire
-- Html.Events module into the current namespace.

import Html.Attributes exposing (id, type', for, value, class)


-- With this import we are only bringing a few specific functions into our
-- namespace, specifically "id", "type'", "for", "value", and "class".


view model =
    form [ id "signup-form" ]
        [ h1 [] [ text "Sensational Signup Form" ]
        , label [ for "username-field" ] [ text "username: " ]
        , input [ id "username-field", type' "text", value model.username ] []
        , label [ for "password" ] [ text "password: " ]
        , input [ id "password-field", type' "password", value model.password ] []
        , div [ class "signup-button" ] [ text "Sign Up!" ]
        ]


-- Take a look at this starting model we’re passing to our view function.
-- Note that in Elm syntax, we use = to separate fields from values
-- instead of : like JavaScript uses for its object literals.


main =
    view { username = "", password = "" }
	<!DOCTYPE html>
	<html>
	<head>
	<title>Elm Signup Form</title>

	<!-- Some basic styles for the form -->
	<style>
	label, input, .signup-button, h1, .validation-error { font-family: sans-serif; font-size: 36px; width: 200px }
	h1 { font-size: 48px; width: auto; border-bottom: 1px solid #111; padding-bottom: 10px; width: 925px; }
	label { display: inline-block; }
	input { margin: 20px; width: 680px; padding: 10px; color: #111111; }
	.signup-button { padding: 30px; background-color: #7FDBFF; color: rgb(0, 73, 102); border: none; margin: 20px 0; width: 150px;}
	.signup-button:hover { background-color: #0074D9; color: rgb(179, 220, 255); }
	form { width: 960px; margin: 80px auto; }
	.validation-error { color: #FF4136; width: 925px; box-sizing: border-box; display: inline-block; }
	</style>
	</head>

	<body>
	<!-- We'll render everything inside this div. -->
	<div id="elm-rendering-area"></div>
	</body>

	<!-- Import our compiled Elm code -->
	<script src="elm.js"></script>

	<!-- Run our Elm app! -->
	<script>
	Elm.SignupForm.embed(document.getElementById("elm-rendering-area"));
	</script>

	</html>
	module SignupForm exposing (..)

	-- This is where our Elm logic lives.`module SignupForm` declares that this is
	-- the SignupForm module, which is how other modules will reference this one
	-- if they want to import it and reuse its code.

	import Html.App


	-- Elm’s "import" keyword works similarly to "require" in node.js.

	import Html exposing (..)


	-- The “exposing (..)” option says that we want to bring the Html module’s contents
	-- into this file’s current namespace, so that instead of writing out
	-- Html.form and Html.label we can use "form" and "label" without the "Html."

	import Html.Events exposing (..)


	-- This works the same way; we also want to import the entire
	-- Html.Events module into the current namespace.

	import Html.Attributes exposing (id, type', for, value, class)


	-- With this import we are only bringing a few specific functions into our
	-- namespace, specifically "id", "type'", "for", "value", and "class".


	view model =
	form [ id "signup-form" ]
	[ h1 [] [ text "Sensational Signup Form" ]
	, label [ for "username-field" ] [ text "username: " ]
	, input [ id "username-field", type' "text", value model.username ] []
	, label [ for "password" ] [ text "password: " ]
	, input [ id "password-field", type' "password", value model.password ] []
	, div [ class "signup-button" ] [ text "Sign Up!" ]
	]



	-- Take a look at this starting model we’re passing to our view function.
	-- Note that in Elm syntax, we use = to separate fields from values
	-- instead of : like JavaScript uses for its object literals.


	main =
	view { username = "", password = "" }