Create behavior for lessons steps

[ondrae]

Description

Following the wire frame, we need to code the behavior for each step. Each dot on the left should represent a step, with the color changing if that step is complete or not.

This task could most likely use some additional endpoints available from the How to City API. Lets have a good discussion about what is needed.

Files

js/instructions.js

Tools Needed

HTML, CSS, JQuery, Bootstrap

Screenshot

Tips

• [ ] Use $.getJSON to call http://howtocity.herokuapp.com/api/v1/lessons/1 to get the steps.
• [ ] Use http://twitter.github.io/bootstrap/javascript.html#scrollspy or a variation of it to give a visual indicator of where in the lesson we are.

[anselmbradford]

I submitted a pull request (https://github.com/codeforamerica/howtocity-web/pull/2) that adds some modular structure to the JS to (hopefully) make is easier to work with. As is all the var declarations will get attached to the global scope. This wraps all the code in an "instructions" object (aka a JS module) that will live at window.instructions and it also creates private (accessible within the module only) and public (accessible from the outside) methods/properties. Happy to help with working with this structure if needed.

[ondrae]

I'm working on this one in the steps_behavior branch.

[arielkennan]

In progress visual design:

[arielkennan]

Dots for all your dotty needs:

[arielkennan]

Logo with no text (150 x100 pixels)

[arielkennan]

The missing light green dot