gaspersic/freeCodeCamp
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

improve ux on calculator clicking

Browse Source
This commit is contained in:
Quincy Larson
2015-06-15 21:44:19 -07:00
parent c9ba210afa
commit 23eb74c762
4 changed files with 104 additions and 104 deletions
Download Patch File Download Diff File Expand all files Collapse all files

3
public/css/main.less
View File

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

6
server/boot/randomAPIs.js
View File

@ -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,' +

4
server/utils/bootcamps.json
View File

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

53
server/views/resources/calculator.jade
View File

@ -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
#income.hidden-by-default
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
$('#two').css({opacity: '1'});
$('#city-buttons').hide();
$('#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');
var lastYearincome = parseInt($(this).attr("id"));
//make next step visible
$('#four').css({opacity: '1'});
<!--Prep the data for D3 -->
$('#income').hide();
$('#chart').css({visibility: 'visible'});
var lastYearsIncome = parseInt($(this).attr("id"));
$('#chosen').append(' making $' + lastYearsIncome.toString().replace(/0000/, '0,000') + ', your true costs are:');
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;
});