commit 7e1b4ad703dd95f514b06e4d460fcb026e0e33d1 Author: Correl Roush Date: Fri Apr 15 00:38:38 2016 -0400 Initial commit diff --git a/.gitignore b/.gitignore new file mode 100644 index 0000000..0c3f49a --- /dev/null +++ b/.gitignore @@ -0,0 +1,2 @@ +elm-stuff/ +elm.js diff --git a/Makefile b/Makefile new file mode 100644 index 0000000..bd9440e --- /dev/null +++ b/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 diff --git a/README.org b/README.org new file mode 100644 index 0000000..f1800ed --- /dev/null +++ b/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. diff --git a/css/style.css b/css/style.css new file mode 100644 index 0000000..b6d9823 --- /dev/null +++ b/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; +} diff --git a/elm-package.json b/elm-package.json new file mode 100644 index 0000000..5ba415f --- /dev/null +++ b/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" +} diff --git a/images/avatar-32.png b/images/avatar-32.png new file mode 100644 index 0000000..9c9456a Binary files /dev/null and b/images/avatar-32.png differ diff --git a/images/avatar-64.png b/images/avatar-64.png new file mode 100644 index 0000000..b4c6034 Binary files /dev/null and b/images/avatar-64.png differ diff --git a/images/avatar.png b/images/avatar.png new file mode 100644 index 0000000..6f05402 Binary files /dev/null and b/images/avatar.png differ diff --git a/json/users.json b/json/users.json new file mode 100644 index 0000000..e9e0f8d --- /dev/null +++ b/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" + } +] diff --git a/sample.html b/sample.html new file mode 100644 index 0000000..a3f4790 --- /dev/null +++ b/sample.html @@ -0,0 +1,30 @@ + + + Elm Exercise + + + +

Online Users

+ + +
+ + + Connect + Connecting + Disconnect + + +
+ +