Created
August 28, 2017 18:09
-
-
Save shaunchurch/51c8838a8a615e204e5ddbe1d6b507c7 to your computer and use it in GitHub Desktop.
A single file implementing some of the elm introduction exercises
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| 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 [] [] |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment