Archive

Programming

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.

Intro

This post is meant to document my understanding for supporting auto-refresh behavior for a browser when updating Elm files.

Steps

Given that the elm file that I’m working on is named “Main.elm”, the following needs to be done:

1: create/update index.html with the following:

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <link rel="stylesheet" href="style.css">
    <script src="main.js"></script>
  </head>
  <body>
    <script>
      Elm.Main.fullscreen();
    </script>
  </body>
</html>

2: Enter the following command on whatever command-line interface

elm-live Main.elm --open --output=main.js

Note:
After performing the steps above, every time a save operation occurs, an automatic refresh should also occur on the browser displaying the webpage (i.e. index.html)

Conclusion

In conclusion, I have documented the two steps required for auto refresh support when saving updates to an Elm file.