improve ux on calculator clicking

public/css/main.less

@@ -1122,7 +1122,8 @@ hr {
 }
 
 // Calculator styles
-#income, #calculate {
+
+.hidden-initially {
   visibility: hidden;
 }
 

server/boot/randomAPIs.js

@@ -28,6 +28,7 @@ module.exports = function(app) {
   router.post('/get-pair', getPair);
   router.get('/chat', chat);
   router.get('/bootcamp-calculator', bootcampCalculator);
+  router.get('/bootcamp-calculator.json', bootcampCalculatorJson);
   router.get('/twitch', twitch);
   router.get('/pmi-acp-agile-project-managers', agileProjectManagers);
   router.get('/pmi-acp-agile-project-managers-form', agileProjectManagersForm);
@@ -38,7 +39,6 @@ module.exports = function(app) {
   router.get('/unsubscribe/:email', unsubscribe);
   router.get('/unsubscribed', unsubscribed);
   router.get('/cats.json', getCats);
-
   router.get('/api/slack', slackInvite);
 
   app.use(router);
@@ -334,6 +334,10 @@ module.exports = function(app) {
     });
   }
 
+  function bootcampCalculatorJson(req, res) {
+    res.send(bootcampJson);
+  }
+
   function jobsForm(req, res) {
     res.render('resources/jobs-form', {
       title: 'Employer Partnership Form for Job Postings,' +

server/utils/bootcamps.json

@@ -152,7 +152,9 @@
   "weeks": "19",
   "cities": [
     "austin",
-    "washington-dc"
+    "washington-dc",
+    "raleigh-durham",
+    "atlanta"
   ]
 }, {
   "name": "Launch Academy",

server/views/resources/calculator.jade

@@ -5,9 +5,19 @@ block content
         .panel-body
             .row
                 .col-xs-12.col-sm-10.col-sm-offset-1
-                    h2#one Where do you live?
+                    h2.text-primary#chosen
+                    #chart-controls.initially-hidden
+                        form
+                            label
+                                input(type='radio', name='mode', value='grouped')
+                                |   Grouped  
+                            label
+                                input(type='radio', name='mode', value='stacked')
+                                |   Stacked
+                            br
+                            a(href='/bootcamp-calculator.json') View Data Source JSON
                     #city-buttons
-                            .row
+                        h2 Where do you live?
                         .col-xs-12.col-sm-6.col-md-4.btn-nav
                             button#atlanta.btn.btn-primary.btn-block.btn-lg Atlanta
                         .col-xs-12.col-sm-6.col-md-4.btn-nav
@@ -46,8 +56,8 @@ block content
                             button#toronto.btn.btn-primary.btn-block.btn-lg Toronto
                         .col-xs-12.btn-nav
                             button#other.btn.btn-primary.btn-block.btn-lg Other
-                    h2#two How much money did you make last year (in USD)?
+                    #income.hidden-by-default
-                        #income
+                        h2 How much money did you make last year (in USD)?
                         .col-xs-12.col-sm-6.col-md-4.btn-nav
                             button#0.btn.btn-primary.btn-block.btn-lg(href='#') $0
                         .col-xs-12.col-sm-6.col-md-4.btn-nav
@@ -78,42 +88,25 @@ block content
                             button#180000.btn.btn-primary.btn-block.btn-lg(href='#') $180,000
                         .col-xs-12.col-sm-6.col-md-4.btn-nav
                             button#200000.btn.btn-primary.btn-block.btn-lg(href='#') $200,000
+                    #chart.hidden-by-default
                         svg.chart
-                    | Sources:
-                    a(href='#') Link to Data Sources Here
-                    form
-                        label
-                            input(type='radio', name='mode', value='grouped')
-                            | Grouped
-                        label
-                            input(type='radio', name='mode', value='stacked')
-                            | Stacked
 
                     script.
-
                         $(document).ready(function () {
                             var bootcamps = !{JSON.stringify(bootcampJson)};
                             var city = "";
                             var cityArray = ["san-fransisco", "los-angeles", "chicago", "austin", "new-york-city", "melbourne", "hong-kong", "seattle", "singapore", "london", "toronto", "portland", "brisbane", "atlanta", "raleigh-durham"];
-                            $('#two').css({opacity: '0.25'});
-                            $('#three').css({opacity: '0.25'});
-                            $('#four').css({opacity: '0.25'});
-                            //step one event listener
                             $('#city-buttons').on("click", "button", function () {
-                                $(this).addClass('animated tada');
                                 city = $(this).attr("id");
-                                //make next step visible
+                                $('#city-buttons').hide();
-                                $('#two').css({opacity: '1'});
+                                $('#chosen').text('Coming from ' + city.replace(/-/g, ' ').replace(/\w\S*/g, function(txt){return txt.charAt(0).toUpperCase() + txt.substr(1).toLowerCase();}));
                                 $('#income').css({visibility: 'visible'});
-                                //console.log(city);
                             });
-                            //step two event listener
                             $('#income').on("click", "button", function() {
-                                $(this).addClass('animated tada');
+                                $('#income').hide();
-                                var lastYearincome = parseInt($(this).attr("id"));
+                                $('#chart').css({visibility: 'visible'});
-                                //make next step visible
+                                var lastYearsIncome = parseInt($(this).attr("id"));
-                                $('#four').css({opacity: '1'});
+                                $('#chosen').append(' making $' + lastYearsIncome.toString().replace(/0000/, '0,000') + ', your true costs are:');
-                                <!--Prep the data for D3 -->
                                 var categoryNames = ['Opportunity Cost at Current Wage', 'Financing Cost', 'Housing Cost', 'Tuition / Wage Garnishing'];
                                 bootcamps.forEach(function (camp) {
                                     var x0 = 0;
@@ -143,9 +136,9 @@ block content
                                     }, {
                                         name: camp.name,
                                         label: 'Tuition / Wage Garnishing',
-                                        value: +(Math.floor(camp.weeks * lastYearincome / 50)),
+                                        value: +(Math.floor(camp.weeks * lastYearsIncome / 50)),
                                         x0: camp.finance ? +(Math.floor(camp.cost * 1.09519) + weeklyHousing * camp.weeks) : +camp.cost + weeklyHousing * camp.weeks,
-                                        x1: x0 += +(Math.floor(camp.weeks * lastYearincome / 50))
+                                        x1: x0 += +(Math.floor(camp.weeks * lastYearsIncome / 50))
                                     }];
                                     camp.total = camp.mapping[camp.mapping.length - 1].x1;
                                 });