Skip to content

Instantly share code, notes, and snippets.

@wordyallen

wordyallen/examples.elm

Last active October 13, 2016 22:39
Show Gist options
  • Save wordyallen/3fe4991ccdae9829e8eb84b0cb47c03f to your computer and use it in GitHub Desktop.
Save wordyallen/3fe4991ccdae9829e8eb84b0cb47c03f to your computer and use it in GitHub Desktop.
Download ZIP
Hello Elm
Raw
examples.elm
import Html exposing (text)
main =
text "Hello, World!"
Raw
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]
Raw
index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<script src="elm.js"></script>
</body>
</html>
@colindensem
Copy link

Consider adding

<div id="main"></div>
<script> 
var node = document.getElementById('main');
 var app = Elm.Examples.embed(node);
</script>

More info here: https://guide.elm-lang.org/interop/html.html

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment