The tools that I used: Basic: ZURB Foundation and JQuery Bonus: Grunt, Autoprefixer, and Knockout

There are two versions of this project: The first is the completed static version which uses hard-coded data. It is purely presentational. That version can be found in the basic branch.

In the bonus version, I learned some Knockout (hopefully I didn't break too many standards) and used it to ping the two APIs and populate all the data in the page (except for the drawn charts - ran out of time, darn!). This version also uses grunt with 'Autoprefixer' so I don't have to think about vendor prefixes too much. There are some other cool things that Knockout helped with like the formatCurrency utility function called in the view, and other such amenities.

I look forward to talking about code with you soon!

#UPDATE: DEMO HERE

1. Clone this repo (or download the zip archive) to get started.

2. The page should look like business_overview.png on the page load:

   

3. The page should look like business_overview_expanded.png when the "more" links are clicked:

   

4. The pencil icon should change color on hover.

5. The "New Program" button should open a form to add a new program. This is where you get some UX/design freedom, but the form should have the following fields:

   • Program Type (single select)
     • Count Series
     • Time Series
     • Membership
   • Program Name (input)
   • Allow online scheduling (boolean)
   • Default capacity (input)
   • Tabs this program is on (multi-select)
     • Classes
     • Appointments
     • Workshops
     • Outside
     • Inside
     • Gym

6. You may use any front-end libraries you wish to complete the task. The Internet is your oyster!

7. When you're finished, send a link to your GitHub repo (preferred) or a .zip archive to your point-of-contact. (Make sure you include your unminified code!)

You may choose to make two API calls to populate any or all parts of page. The data returned may not reflect the amounts in the business_overview.png image. Assume that the data from these calls is correct.

• Programs (GET: https://api.myjson.com/bins/5bdb3)
• Pricing Options (GET: https://api.myjson.com/bins/17oy7)

Should you stumble into any questions during your quest, feel free tor reach out to your recruiter or dev contact. There are no stupid questions!