Skip to content

correl/elm-exercise

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

1 Commit
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 

Repository files navigation

Elm Application Exercise

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.

About

An Elm programming exercise

Resources

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published