Initial commit

.gitignore

@@ -0,0 +1,2 @@
+elm-stuff/
+elm.js

Makefile

@@ -0,0 +1,20 @@
+.PHONY: all clean dev
+
+APP = App.elm
+APP_JS = app.js
+ELM_FILES = $(shell find . -type f -name '*.elm')
+
+all: $(APP_JS)
+
+$(APP_JS): $(ELM_FILES)
+	elm-make --yes $(APP) --output $@
+
+clean-deps:
+	rm -rf elm-stuff
+
+clean:
+	rm -f $(APP_JS)
+	rm -rf elm-stuff/build-artifacts
+
+dev: all
+	elm-reactor

README.org

@@ -0,0 +1,61 @@
+#+TITLE: Elm Application Exercise
+#+STARTUP: indent
+
+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 [[file:sample.html][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 [[https://github.com/evancz/elm-architecture-tutorial][Elm
+  Architecture]] (using [[http://package.elm-lang.org/packages/evancz/start-app/2.0.2/StartApp][StartApp]]).
+- The user list should be fetched from the provided JSON file.
+
+** Hints
+- Be sure to reference the [[http://elm-lang.org/docs][official Elm documentation]] as well as the
+  [[http://www.elm-tutorial.org/][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 [[http://package.elm-lang.org/packages/evancz/elm-http/3.0.0/][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.

css/style.css

@@ -0,0 +1,61 @@
+body {
+    font-family: sans-serif;
+    color: #333;
+}
+
+a.button {
+    display: inline-block;
+    padding: 0.5em 1em;
+    background-color: rgb(150, 150, 150);
+    color: white;
+    text-transform: uppercase;
+    text-decoration: none;
+    font-weight: bold;
+}
+
+a.button.connect {
+    background-color: rgb(0, 150, 136);
+}
+
+a.button.connect:hover {
+    background-color: rgb(0, 179, 162);
+}
+
+a.button.connect:active {
+    background-color: rgb(102, 204, 194);
+}
+
+a.button.connecting {
+    cursor: wait;
+}
+
+a.button.disconnect {
+    background-color: rgb(199, 26, 26);
+}
+
+a.button.disconnect:hover {
+    background-color: rgb(227, 54, 54);
+}
+
+a.button.disconnect:active {
+    background-color: rgb(255, 82, 82);
+}
+
+ul.users {
+    list-style-type: none;
+    width: 50%;
+    padding: 0;
+}
+
+ul.users li {
+    background-image: url("../images/avatar-32.png");
+    background-repeat: no-repeat;
+    color: #778899;
+    background-color: rgb(245, 249, 250);
+    border-color: #778899;
+    border-bottom-style: solid;
+    border-bottom-width: 1px;
+    line-height: 32px;
+    padding-left: 40px;
+    margin: 0.5em 0;
+}

elm-package.json

@@ -0,0 +1,17 @@
+{
+    "version": "1.0.0",
+    "summary": "Elm Programming Exercise",
+    "repository": "https://github.com/correl/elm-exercise.git",
+    "license": "BSD3",
+    "source-directories": [
+        "."
+    ],
+    "exposed-modules": [],
+    "dependencies": {
+        "elm-lang/core": "3.0.0 <= v < 4.0.0",
+        "evancz/elm-effects": "2.0.1 <= v < 3.0.0",
+        "evancz/elm-html": "4.0.2 <= v < 5.0.0",
+        "evancz/start-app": "2.0.2 <= v < 3.0.0"
+    },
+    "elm-version": "0.16.0 <= v < 0.17.0"
+}

json/users.json

@@ -0,0 +1,30 @@
+[
+    {
+        "id": 3,
+        "name": "Sterling Archer" 
+    },
+    {
+        "id": 4,
+        "name": "Lana Kane" 
+    },
+    {
+        "id": 1,
+        "name": "Malory Archer" 
+    },
+    {
+        "id": 5,
+        "name": "Cyril Figgis" 
+    },
+    {
+        "id": 7,
+        "name": "Cheryl Tunt" 
+    },
+    {
+        "id": 8,
+        "name": "Pam Poovey" 
+    },
+    {
+        "id": 6,
+        "name": "Ray Gillette"
+    }
+]

sample.html

@@ -0,0 +1,30 @@
+<html>
+    <head>
+        <title>Elm Exercise</title>
+        <link rel="stylesheet" href="css/style.css" />
+    </head>
+    <body>
+        <h1>Online Users</h1>
+
+        <!-- Container for our Elm application -->
+        <div id="elm-app">
+
+            <!-- Display one of the following buttons based on the connection state -->
+            <a class="button connect" href="#">Connect</a>
+            <a class="button connecting" href="#">Connecting</a>
+            <a class="button disconnect" href="#">Disconnect</a>
+
+            <ul class="users">
+                <!-- This list should be empty unless the connection state is online -->
+
+                <li>Sterling Archer</li>
+                <li>Lana Kane</li>
+                <li>Malory Archer</li>
+                <li>Cyril Figgis</li>
+                <li>Cheryl Tunt</li>
+                <li>Pam Poovey</li>
+                <li>Ray Gillette</li>
+            </ul>
+        </div>
+    </body>
+</html>