Last active
June 12, 2016 16:15
-
-
Save julianjelfs/1b32adc15cb788c12141 to your computer and use it in GitHub Desktop.
elmtalk
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 (..) | |
| import Html.Attributes exposing(..) | |
| import Html.Events exposing(..) | |
| import Html.App as Html exposing(..) | |
| --MODEL | |
| type alias Model = { | |
| blueClicks : Int, | |
| redClicks : Int, | |
| greenClicks : Int | |
| } | |
| initialModel : Model | |
| initialModel = Model 0 0 0 | |
| --UPDATE | |
| type Msg = NoOp | |
| | BlueClick | |
| | RedClick | |
| | GreenClick | |
| update : Msg -> Model -> Model | |
| update action model = | |
| case action of | |
| NoOp -> | |
| model | |
| BlueClick -> | |
| { model | blueClicks = model.blueClicks + 1 } | |
| RedClick -> | |
| { model | redClicks = model.redClicks + 1 } | |
| GreenClick -> | |
| { model | greenClicks = model.greenClicks + 1 } | |
| --VIEW | |
| buttonStyle : String -> Attribute Msg | |
| buttonStyle colour = | |
| style [ | |
| ("margin", "10px") | |
| , ("display", "block") | |
| , ("width", "150px") | |
| , ("height", "40px") | |
| , ("background-color", colour) | |
| , ("color", "#ffffff")] | |
| totalClicks : Model -> String | |
| totalClicks model = | |
| (toString (model.blueClicks + model.redClicks + model.greenClicks)) | |
| view : Model -> Html Msg | |
| view model = | |
| div [] [ | |
| button [ | |
| (buttonStyle "blue"), | |
| onClick BlueClick | |
| ] [ text ("Blue Clicked: " ++ (toString model.blueClicks)) ], | |
| button [(buttonStyle "red"), | |
| onClick RedClick ] [ text ("Red Clicked: " ++ (toString model.redClicks)) ], | |
| button [(buttonStyle "green"), | |
| onClick GreenClick ] [ text ("Green Clicked: " ++ (toString model.greenClicks)) ], | |
| div [] [ | |
| text ("Total Clicks: " ++ (totalClicks model)) | |
| ] | |
| ] | |
| main = | |
| Html.beginnerProgram { model = initialModel, view = view, update = update } |
Author
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Updated to elm 0.17 syntax