Elm Application Exercise

• Exercise: A Chat Service User List
  • Requirements
    • Behavior
      • Offline
      • Connecting
      • Connected
    • Architecture
  • Hints

This is an exercise in creating a basic embedded Elm application that will react to user actions and fetch data from a JSON endpoint.

An HTML mockup is provided along with CSS and images.

Exercise: A Chat Service User List

The exercise will be a user list application for a phony chat service.

The application will have three states:

• Offline
• Connecting
• Connected

Two UI elements must be presented to the User:

• A button to connect or disconnect
• A list of online users

Requirements

Behavior

Offline

• The application must start in an offline state
• The button should appear in its "Connect" state while offline
• Clicking the "Connect" button should progress the application to its connecting state, and fetch the JSON user list.
• The user list should be empty.

Connecting

• The button should appear in its "Connecting" state while connecting
• When the user list has been fetched, the application should progress to its connected state with a populated user list.

Connected

• The button should appear in its "Connect" state while online (user list is present)
• The user list should be populated.
• Clicking the "Disconnect" button should clear the user list and progress the application to its offline state.

Architecture

• The Elm application should be embedded within an HTML file per the mockup, loading within the elm-app div.
• The Elm application should be built following the Elm Architecture (using StartApp).
• The user list should be fetched from the provided JSON file.

Hints

• Be sure to reference the official Elm documentation as well as the Elm tutorial to see how to build Elm application
• The provided Makefile expects your main module to be in ./App.elm, and will output the compiled javascript for your application to ./app.js.
• While the app is running within the Elm reactor via make dev, assets will be available relative to the project's root directory. E.g., you can include the css file as /css/style.css.
• The external library elm-http will be useful for making the request to fetch the users JSON.
• You may find it easier to build the widgets separately, and to hard-code the various into your models before implementing your click actions and HTTP request.