Do the same with ELM?

[António Ramos]

can anyone dare to code the same app in elm?

http://blog.krawaller.se/posts/composition-in-cyclejs-choo-react-and-angular2/~

i would like to see it and learn from you guys because i just "hate" javascript...

Regards

António

[António Ramos]

http://blog.krawaller.se/posts/composition-in-cyclejs-choo-react-and-angular2/

[Erkal Selman]

You can paste the following into http://elm-lang.org/try :

import Html exposing (text, div, input, button, p, span)

import Html.App exposing (beginnerProgram)

import Html.Attributes exposing (..)

import Html.Events exposing (onInput, onClick)

main =

    beginnerProgram

        { model = { state = WaitingForSubmit, inputStr = "", submittedValue = "" }

        , update = update

        , view = view

        }

-- MODEL

type alias Model =

    { state : State

    , inputStr : String

    , submittedValue : String

    }

type State

    = WaitingForSubmit

    | WaitingForConfirm

-- UPDATE

type Msg

    = NewContent String

    | Submit

    | Cancel

    | Confirm

update msg model =

    case msg of

        NewContent str ->

            { model | inputStr = str }

        Submit ->

            { model | state = WaitingForConfirm }

        Cancel ->

            { model | state = WaitingForSubmit }

        Confirm ->

            { model

                | state = WaitingForSubmit

                , submittedValue = model.inputStr

            }

-- VIEW

view { state, inputStr, submittedValue } =

    div []

        [ input [ onInput NewContent ] []

        , case state of

            WaitingForSubmit ->

                span []

                    [ button [ disabled (inputStr == ""), onClick Submit ]

                        [ text "Submit" ]

                    ]

            WaitingForConfirm ->

                span []

                    [ button [ onClick Cancel ] [ text "Cancel" ]

                    , button [ onClick Confirm ] [ text "Confirm" ]

                    ]

        , p [] [ text ("Submitted value: " ++ submittedValue) ]

        ]

A question: Is there a way to clear the input field (on confirm) without using ports?

[António Ramos]

As a side note we need "elmbin"  to share and collect stuff like we do with https://jsbin.com for example..

--
You received this message because you are subscribed to the Google Groups "Elm Discuss" group.
To unsubscribe from this group and stop receiving emails from it, send an email to elm-discuss+unsubscribe@googlegroups.com.
For more options, visit https://groups.google.com/d/optout.

[Marco Perone]

you could just add a `value` to your input field like

    input [ onInput NewContent, value inputStr ]

and then reset the `inputStr` value when you confirm the submission

    Confirm ->

            { model

                | state = WaitingForSubmit

                , inputStr = ""

                , submittedValue = model.inputStr

[Erkal Selman]

Thanks Marco, here is the corrected version:

                , inputStr = ""

                , submittedValue = model.inputStr

            }

-- VIEW

view { state, inputStr, submittedValue } =

    div []

        [ input [ onInput NewContent, value inputStr ] []

        , case state of

            WaitingForSubmit ->

                span []

                    [ button [ disabled (inputStr == ""), onClick Submit ] [ text "Submit" ] ]

            WaitingForConfirm ->

                span []

                    [ button [ onClick Cancel ] [ text "Cancel" ]

                    , button [ onClick Confirm ] [ text "Confirm" ]

                    ]

        , p [] [ text ("Submitted value: " ++ submittedValue) ]

        ]

[António Ramos]

I´m so in love with ELM,

@Erkal please submit this code to 

http://blog.krawaller.se/jscomp/pages/composition.html

Thank you

[Erkal Selman]

I also think that an easy way for sharing examples is a very effective to make elm popular.

Mike Bostock did it very well with D3.js: https://bost.ocks.org/mike/example/

From his talk:

I use examples so often that I created bl.ocks.org to make it easier for me to share them. It lets you quickly post code and share examples with a short URL. Your code is displayed below; it’s view source by default. And it’s backed by GitHub Gist, so examples have a git repository for version control, and are forkable, cloneable and commentable.

We also have to have this kind of thing. 

@Antonio: sorry but the contribution instructions are too complicated: http://blog.krawaller.se/jscomp/index.html 

I am not going to do it. :)

But you can do it if you want. (or anybody else) 

To unsubscribe from this group and stop receiving emails from it, send an email to elm-discuss...@googlegroups.com.