Archive

Web Development

Intro

This post attempts to document my current understanding of Elm and how to render a form with it.

Implementing the Form

I took an HTML form example from a reference book and decided to port it to Elm.

The following form has been coded:

view model =
    div []
        [ h1 [] [ text "Poetry Workshops" ]
        , p [] [ text "We will be conducting a number of poetry workshops and symposiums throughout the year." ]
        , p [] [ text "please note that the following events are free to members:" ]
        , ul []
            [ li [] [ text "A Poetic Perspective" ]
            , li [] [ text "Walt Witman at Work" ]
            , li [] [ text "Found Poems and Outsider Poetry" ]
            ]
        , table []
            [ tr [ class "head" ] [ th [] [], th [] [ text "New York" ], th [] [ text "Chicago" ], th [] [ text "Sanfrancisco" ] ]
            , tr [] [ th [] [ text "A Poetic Perspective" ], td [] [ text "Sat, 4 Feb 2012" ], td [] [ text "Sat, 3 Feb 2012" ], td [] [ text "Sat, 17 Feb 2012" ] ]
            , tr [ class "even" ] [ th [] [ text "Walt Witman at Work" ], td [] [ text "Sat, 7 Feb 2012" ], td [] [ text "Sat, 5 Feb 2012" ], td [] [ text "Sat, 19 Feb 2012" ] ]
            , tr [] [ th [] [ text "Found Poems and Outsider Poetry" ], td [] [ text "Sat, 9 Feb 2012" ], td [] [ text "Sat, 7 Feb 2012" ], td [] [ text "Sat, 21 Feb 2012" ] ]
            ]
        , Html.form []
            [ fieldset []
                [ legend [] [ text "Register Your Interest" ]
                , p []
                    [ label [ class "title", for "name" ] [ text "Your name:" ]
                    , input [ type_ "text", name "name", id "name" ] []
                    , br [] []
                    , label [ class "title", for "email" ] [ text "Your email:" ]
                    , input [ type_ "text", name "email", id "email" ] []
                    , br [] []
                    ]
                , p []
                    [ label [ class "title", for "location" ] [ text "Your closest center" ]
                    , Html.select [ name "location", id "location" ]
                        [ option [ value "ny" ] [ text "New York" ]
                        , option [ value "il" ] [ text "Chicago" ]
                        , option [ value "ca" ] [ text "San Francisco" ]
                        ]
                    ]
                , span [ class "title" ] [ text "Are you a member?" ]
                , label [] [ text "Yes", input [ type_ "radio", name "member", value "yes" ] [] ]
                , label [] [ text "No", input [ type_ "radio", name "member", value "no" ] [] ]
                ]
            ]
        , div [ class "submit" ]
            [ input [ type_ "submit", value "Register" ] [] ]
        ]

Implementing the CSS

Here’s the corresponding CSS file:

body {
    font-family: Arial, Helvetica, sans-serif;
    font-size: 90%;
    color: #666666;
    background-color: #f8f8f8;
}

li {
    line-height: 1.6em;
}

table {
    border-spacing: 0px;
}

th, td {
    padding: 5px 30px 5px 10;
    border-spacing: 0px;
    font-size: 90%;
    margin: 0px;
}

th, td {
    text-align: left;
    background-color: #e0e9f0;
    border-top: 1px solid #f1f8fe;
    border-bottom: 1px solid #cbd2d8;
    border-right: 1px solid #cbd2d8;
}

tr.head th {
    color: #ffffff;
    background-color: #90b4d6;
    border-bottom: 2px solid #547ca0;
    border-right: 1px solid #749abe;
    border-top: 1px solid #90b4d6;
    text-align: center;
    text-shadow: -1px -1px 1px #666666;
    letter-spacing: 0.15em;
}

td {
    text-shadow: 1px 1px 1px #ffffff;
}

tr.even td, tr.even th{
    background-color:#e8eff5;
}

tr.head th:first-child{
    -webkit-border-top-left-radius: 5px;
    -moz-border-radius-top-left: 5px;
    border-top-left-radius: 5px;
}

tr.head th:last-child{
    -webkit-border-top-left-radius: 5px;
    -moz-border-radius-top-right: 5px;
    border-top-right-radius: 5px;
}

fieldset{
    width:310px;
    margin-top: 20px;
    border: 1px solid #d6d6d6;
    background-color: #ffffff;
    line-height: 1.6em;
}

legend{
    font-style: italic;
    color: #666666;
}

input[type="text"]{
    width: 120px;
    border: 1px solid #d6d6d6;
    padding: 2px;
    outline: none;
}

input[type="text"]:focus , input[type="text"]:hover{
    background-color: #d0e2f0;
    border: 1px solid #999999;
}

input[type="submit"] {
 border: 1px solid #006633;
 background-color: #009966;
 color: #ffffff;
 border-radius: 5px;
 padding: 5px;
 margin-top: 10px;
}

input[type="submit"]:hover{
    border: 1px solid #006633;
    background-color: #00cc33;
    color: #ffffff;
    cursor: pointer;
}

.title {
    float: left;
    width: 160px;
    clear: left;
}

.submit {
    width: 310px;
    text-align: right;
}

Displaying the Form

Here’s the result:

FormPolished.png

Conclusion

In conclusion, this post attempts to document my current understanding of Elm and how to render a form with it.

Intro

This post is meant to document my current understanding of how to build a form using the Elm programming language.

 

Select a File

The following code shows a form for selecting a file:

view : Model -> Html Msg
view model =
    Html.form []
        [ p [] [ text "Upload your song in MP3 format:" ]
        , input [ type_ "text" ] []
        , input [ type_ "file", name "user-song" ] []
        , br [] []
        , input [ type_ "submit", value "Upload" ] []
        ]

Here’s the result:

Elmform1

Label and Textbox

The following code demonstrates one way to associate a textbox to a label:

view model =
    Html.form []
        [ label [] [ text "Age:", input [ type_ "text", name "age" ] [] ]
        ]

Here’s the result:

ElmLabelInput

Labels and Radio Buttons

The following is an example of labels associated to radio buttons:

view model =
    Html.form []
        [ label [] [ text "Gender:" ]
        , input [ id "female", type_ "radio", name "gender", value "f" ] []
        , label [ for "female" ] [ text "Female" ]
        , input [ id "male", type_ "radio", name "gender", value "m" ] []
        , label [ for "male" ] [ text "Male" ]
        ]

Here’s the result:

ElmLabelRadio

Grouping Form Elements

The following code leverages an HTML fieldset to group elements:

view model =
    fieldset []
        [ legend [] [ text "Contact Details" ]
        , label [] [ text "Email:", br [] [], input [ type_ "text", name "email" ] [], br [] [] ]
        , label [] [ text "Mobile:", br [] [], input [ type_ "text", name "mobile" ] [], br [] [] ]
        , label [] [ text "Telephone:", br [] [], input [ type_ "text", name "telephone" ] [] ]
        ]

Here’s the result:

fieldset

Validation

The following code demonstrates validation on required inputs for a form:

view model =
    Html.form []
        [ label [ for "username" ] [ text "UserName:" ]
        , input [ type_ "text", name "username", required True ] []
        , br [] []
        , label [ for "password" ] [ text "Password:" ]
        , input [ type_ "text", name "password", required True ] []
        , input [ type_ "submit", value "Submit" ] []
        ]

Here’s the result:

elmValidation.png

Conclusion

In conclusion, this post attempts to document my current understanding of how to build a form using the Elm programming language.

This post documents an example of inline formatting using Elm:

Oh… And by the way, this video discusses how to simplify verbose syntax by using functions:

Look at the following code:

p [] [ span [] [ text "This text might be an " ], b [] [ text "introduction" ], text " to the rest of the page." ]

The following html is rendered from the code above:
Elm-formati

Note:
When doing inline formatting, I learned to use the span element and pass-in individual elements that can be for either text or formatting. Just be aware that these elements are delimited by commas.

Angry Developer: I’m having a developer identity crisis trying to figure out what my niche should be.  Seems like there’s always web work, but no two shops are using more than a few of the same tools and frameworks.  I’d really like to avoid becoming an expert at some doomed technology, if that can be helped.

Scott Nimrod: I think Angular is a safe bet for the next 6 months.
😉

Angry Developer: You mean Angular2 –Angular is obsolete shit that must be replaced now.
Scott Nimrod: Yea. That.

Angry Developer: That’s the funnest part of JavaScript dev.  By the time you’re an expert at a stack, it’s changed completely.

Angry Developer: I completely wasted about 5 hours last week learning, trying, and failing with code examples and tutorials on Ionic and Angular because (once I looked more carefully) I was looking a examples for the previous frameworks (which were current a few month ago).

Angry Developer: Doh!

Angry Developer: I much prefer slower, more thoughtful languages and frameworks.  I haven’t had to throw away more than a few pages of what I knew about .NET 1.1

Angry Developer: The JS hackers are changing their frameworks constantly because they didn’t think things through very carefully in the initial design.