I´m so in love with ELM,
@Erkal please submit this code to
http://blog.krawaller.se/jscomp/pages/composition.html

Thank you

2016-10-20 14:56 GMT+01:00 Erkal Selman <[email protected]>:

> Thanks Marco, here is the corrected version:
>
> *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*
> *                , 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) ]*
> *        ]*
>
> On Thursday, October 20, 2016 at 3:49:49 PM UTC+2, Marco Perone wrote:
>>
>> 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
>>             }
>>
>> On Thursday, October 20, 2016 at 2:57:54 PM UTC+2, Erkal Selman wrote:
>>>
>>> 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?
>>>
>>> On Thursday, October 20, 2016 at 12:48:40 PM UTC+2, António Ramos wrote:
>>>>
>>>> http://blog.krawaller.se/posts/composition-in-cyclejs-choo-
>>>> react-and-angular2/
>>>>
>>>> 2016-10-20 11:48 GMT+01:00 António Ramos <[email protected]>:
>>>>
>>>>> 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
>>>>>
>>>>
>>>> --
> 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 [email protected].
> For more options, visit https://groups.google.com/d/optout.
>

-- 
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 [email protected].
For more options, visit https://groups.google.com/d/optout.

Reply via email to