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.
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
- 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.
- 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.
- 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.
- 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.
- 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.