README.md @master — view markup · raw · history
Articulate JS Tech Challenge
Matt Campbell's interpretation
Reference original repository for the original README.
Installing and Running
This assumes you have
grunt-cli installed already. (See Grunt's Getting Started guide)
npm installto install dependencies
gruntto build the site and start a web server
Visit http://localhost:8888/ to see the app.
You can also run
grunt test to run the test suite.
- Dynamically powered timeline (go ahead, edit
- 3-state playback button (play/stop/replay)
- 2-seconds-per-age pace
- Circular progress bar that gives constant animated feedback
- Event milestone markers within the progress bar
- ... which are clickable and let you skip ahead! (or behind)
- Delightful emoji icons!
Breaking the LAW
To add the emoji icons, I have consciously broken this rule:
You cannot change the supplied data at all, and the data must be used as-is as a JSON file.
- Your video and wireframes from your README are 404ing! Boo! :)
- The emoji feature is completely optional and if you use the original JSON file, the app will not break at all, it just won't be as fun.
To that end, I created a
Component class that provides a flow
for either reacting to absolute current state as well as
providing a state difference for components to selectively
execute more expensive updates.
At the moment there are some sanity checks for the Component class and data model, but there are no integration tests.
Timeline class (which relies heavily on a browser environment)
has a large amount of state management and is in need of test coverage.
There's also no load-fail handling, so if the data fails to load/parse, the user would see nothing.
Other than that, I started toying with the idea of letting the user add/edit milestones and create their own timeline, but decided there wasn't enough time.