Simple chat app in Elm

Show and Tell
1

The following is a popular Udemy course on Node.js:

The Complete Node.js Developer Course (3rd Edition)

One of the projects in the course is a chat app. Here’s that chat app with the front-end converted to Elm:

Here’s what it looks like:

q4gG6S8.png1265×1262

It uses ports with socket.io.

2 Likes
2

The login page looks like this:

1233×1287

In the original version of the app, the HTML is as follows:

<div class="centered-form">
    <div class="centered-form__box">
        <h1>
            Join
        </h1>

        <form action="chat.html">
            <label>Display name</label>
            <input type="text" name="username" placeholder="Display name" required>

            <label>Room</label>
            <input type="text" name="room" placeholder="Room" required>

            <button>Join</button>
        </form>
    </div>
</div>

The conversion to Elm is straightforward:

view : Model -> Html Msg
view model =
    div [ class "centered-form" ] 
    [
        h1 [] [ text "Join" ],

        Html.form [ action "chat.html" ]
        [
            label [] [ text "Display name"],
            input [ type_ "text", name "username", placeholder "Display name", required True ] [],

            label [] [ text "Room" ],
            input [ type_ "text", name "room", placeholder "Room", required True ] [],

            button [] [ text "Join" ]
        ]
    ]

This is in Login.elm.

In order to get the file to compile, I setup Msg and Model even though they aren’t used at all:

type Msg = Abc

type alias Model = Int

Is there a way I can setup Login.elm so that I don’t have to define those?

Any other suggestions on how to streamline that file are welcome. :slight_smile:

3

The main function of an Elm program needs to be either:

  1. a Program value
  2. a Html value
  3. an Svg value

This means that it’s OK to have your Elm program be static HTML

main :  Html a
main =
  div [ class "centered-form" ]
  [ ...
  ]
4

Thanks @joelq! I’ve updated Login.elm to reflect your suggestion.

5

This topic was automatically closed 10 days after the last reply. New replies are no longer allowed.