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

5
public/css/main.less
View File

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

6
server/boot/randomAPIs.js
View File

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

4
server/utils/bootcamps.json
View File

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

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

@ -5,115 +5,108 @@ block content
.panel-body .panel-body
.row .row
.col-xs-12.col-sm-10.col-sm-offset-1 .col-xs-12.col-sm-10.col-sm-offset-1
h2#one Where do you live? h2.text-primary#chosen
#city-buttons #chart-controls.initially-hidden
.row form
.col-xs-12.col-sm-6.col-md-4.btn-nav label
button#atlanta.btn.btn-primary.btn-block.btn-lg Atlanta input(type='radio', name='mode', value='grouped')
.col-xs-12.col-sm-6.col-md-4.btn-nav |   Grouped  
button#austin.btn.btn-primary.btn-block.btn-lg Austin label
.col-xs-12.col-sm-6.col-md-4.btn-nav input(type='radio', name='mode', value='stacked')
button#brisbane.btn.btn-primary.btn-block.btn-lg Brisbane |   Stacked
.col-xs-12.col-sm-6.col-md-4.btn-nav br
button#boulder.btn.btn-primary.btn-block.btn-lg Boulder a(href='/bootcamp-calculator.json') View Data Source JSON
.col-xs-12.col-sm-6.col-md-4.btn-nav #city-buttons
button#chicago.btn.btn-primary.btn-block.btn-lg Chicago h2 Where do you live?
.col-xs-12.col-sm-6.col-md-4.btn-nav .col-xs-12.col-sm-6.col-md-4.btn-nav
button#denver.btn.btn-primary.btn-block.btn-lg Denver button#atlanta.btn.btn-primary.btn-block.btn-lg Atlanta
.col-xs-12.col-sm-6.col-md-4.btn-nav .col-xs-12.col-sm-6.col-md-4.btn-nav
button#hong-kong.btn.btn-primary.btn-block.btn-lg Hong Kong button#austin.btn.btn-primary.btn-block.btn-lg Austin
.col-xs-12.col-sm-6.col-md-4.btn-nav .col-xs-12.col-sm-6.col-md-4.btn-nav
button#london.btn.btn-primary.btn-block.btn-lg London button#brisbane.btn.btn-primary.btn-block.btn-lg Brisbane
.col-xs-12.col-sm-6.col-md-4.btn-nav .col-xs-12.col-sm-6.col-md-4.btn-nav
button#los-angeles.btn.btn-primary.btn-block.btn-lg Los Angeles button#boulder.btn.btn-primary.btn-block.btn-lg Boulder
.col-xs-12.col-sm-6.col-md-4.btn-nav .col-xs-12.col-sm-6.col-md-4.btn-nav
button#manchester.btn.btn-primary.btn-block.btn-lg Manchester button#chicago.btn.btn-primary.btn-block.btn-lg Chicago
.col-xs-12.col-sm-6.col-md-4.btn-nav .col-xs-12.col-sm-6.col-md-4.btn-nav
button#melbourne.btn.btn-primary.btn-block.btn-lg Melbourne button#denver.btn.btn-primary.btn-block.btn-lg Denver
.col-xs-12.col-sm-6.col-md-4.btn-nav .col-xs-12.col-sm-6.col-md-4.btn-nav
button#new-york-city.btn.btn-primary.btn-block.btn-lg New York City button#hong-kong.btn.btn-primary.btn-block.btn-lg Hong Kong
.col-xs-12.col-sm-6.col-md-4.btn-nav .col-xs-12.col-sm-6.col-md-4.btn-nav
button#portland.btn.btn-primary.btn-block.btn-lg Portland button#london.btn.btn-primary.btn-block.btn-lg London
.col-xs-12.col-sm-6.col-md-4.btn-nav .col-xs-12.col-sm-6.col-md-4.btn-nav
button#raleigh-durham.btn.btn-primary.btn-block.btn-lg Raleigh-Durham button#los-angeles.btn.btn-primary.btn-block.btn-lg Los Angeles
.col-xs-12.col-sm-6.col-md-4.btn-nav .col-xs-12.col-sm-6.col-md-4.btn-nav
button#san-francisco.btn.btn-primary.btn-block.btn-lg San Fransisco button#manchester.btn.btn-primary.btn-block.btn-lg Manchester
.col-xs-12.col-sm-6.col-md-4.btn-nav .col-xs-12.col-sm-6.col-md-4.btn-nav
button#seattle.btn.btn-primary.btn-block.btn-lg Seattle button#melbourne.btn.btn-primary.btn-block.btn-lg Melbourne
.col-xs-12.col-sm-6.col-md-4.btn-nav .col-xs-12.col-sm-6.col-md-4.btn-nav
button#singapore.btn.btn-primary.btn-block.btn-lg Singapore button#new-york-city.btn.btn-primary.btn-block.btn-lg New York City
.col-xs-12.col-sm-6.col-md-4.btn-nav .col-xs-12.col-sm-6.col-md-4.btn-nav
button#toronto.btn.btn-primary.btn-block.btn-lg Toronto button#portland.btn.btn-primary.btn-block.btn-lg Portland
.col-xs-12.btn-nav .col-xs-12.col-sm-6.col-md-4.btn-nav
button#other.btn.btn-primary.btn-block.btn-lg Other button#raleigh-durham.btn.btn-primary.btn-block.btn-lg Raleigh-Durham
h2#two How much money did you make last year (in USD)? .col-xs-12.col-sm-6.col-md-4.btn-nav
#income button#san-francisco.btn.btn-primary.btn-block.btn-lg San Fransisco
.col-xs-12.col-sm-6.col-md-4.btn-nav .col-xs-12.col-sm-6.col-md-4.btn-nav
button#0.btn.btn-primary.btn-block.btn-lg(href='#') $0 button#seattle.btn.btn-primary.btn-block.btn-lg Seattle
.col-xs-12.col-sm-6.col-md-4.btn-nav .col-xs-12.col-sm-6.col-md-4.btn-nav
button#20000.btn.btn-primary.btn-block.btn-lg(href='#') $20,000 button#singapore.btn.btn-primary.btn-block.btn-lg Singapore
.col-xs-12.col-sm-6.col-md-4.btn-nav .col-xs-12.col-sm-6.col-md-4.btn-nav
button#30000.btn.btn-primary.btn-block.btn-lg(href='#') $30,000 button#toronto.btn.btn-primary.btn-block.btn-lg Toronto
.col-xs-12.col-sm-6.col-md-4.btn-nav .col-xs-12.btn-nav
button#40000.btn.btn-primary.btn-block.btn-lg(href='#') $40,000 button#other.btn.btn-primary.btn-block.btn-lg Other
.col-xs-12.col-sm-6.col-md-4.btn-nav #income.hidden-by-default
button#50000.btn.btn-primary.btn-block.btn-lg(href='#') $50,000 h2 How much money did you make last year (in USD)?
.col-xs-12.col-sm-6.col-md-4.btn-nav .col-xs-12.col-sm-6.col-md-4.btn-nav
button#60000.btn.btn-primary.btn-block.btn-lg(href='#') $60,000 button#0.btn.btn-primary.btn-block.btn-lg(href='#') $0
.col-xs-12.col-sm-6.col-md-4.btn-nav .col-xs-12.col-sm-6.col-md-4.btn-nav
button#70000.btn.btn-primary.btn-block.btn-lg(href='#') $70,000 button#20000.btn.btn-primary.btn-block.btn-lg(href='#') $20,000
.col-xs-12.col-sm-6.col-md-4.btn-nav .col-xs-12.col-sm-6.col-md-4.btn-nav
button#80000.btn.btn-primary.btn-block.btn-lg(href='#') $80,000 button#30000.btn.btn-primary.btn-block.btn-lg(href='#') $30,000
.col-xs-12.col-sm-6.col-md-4.btn-nav .col-xs-12.col-sm-6.col-md-4.btn-nav
button#90000.btn.btn-primary.btn-block.btn-lg(href='#') $90,000 button#40000.btn.btn-primary.btn-block.btn-lg(href='#') $40,000
.col-xs-12.col-sm-6.col-md-4.btn-nav .col-xs-12.col-sm-6.col-md-4.btn-nav
button#100000.btn.btn-primary.btn-block.btn-lg(href='#') $100,000 button#50000.btn.btn-primary.btn-block.btn-lg(href='#') $50,000
.col-xs-12.col-sm-6.col-md-4.btn-nav .col-xs-12.col-sm-6.col-md-4.btn-nav
button#120000.btn.btn-primary.btn-block.btn-lg(href='#') $120,000 button#60000.btn.btn-primary.btn-block.btn-lg(href='#') $60,000
.col-xs-12.col-sm-6.col-md-4.btn-nav .col-xs-12.col-sm-6.col-md-4.btn-nav
button#140000.btn.btn-primary.btn-block.btn-lg(href='#') $140,000 button#70000.btn.btn-primary.btn-block.btn-lg(href='#') $70,000
.col-xs-12.col-sm-6.col-md-4.btn-nav .col-xs-12.col-sm-6.col-md-4.btn-nav
button#160000.btn.btn-primary.btn-block.btn-lg(href='#') $160,000 button#80000.btn.btn-primary.btn-block.btn-lg(href='#') $80,000
.col-xs-12.col-sm-6.col-md-4.btn-nav .col-xs-12.col-sm-6.col-md-4.btn-nav
button#180000.btn.btn-primary.btn-block.btn-lg(href='#') $180,000 button#90000.btn.btn-primary.btn-block.btn-lg(href='#') $90,000
.col-xs-12.col-sm-6.col-md-4.btn-nav .col-xs-12.col-sm-6.col-md-4.btn-nav
button#200000.btn.btn-primary.btn-block.btn-lg(href='#') $200,000 button#100000.btn.btn-primary.btn-block.btn-lg(href='#') $100,000
svg.chart .col-xs-12.col-sm-6.col-md-4.btn-nav
| Sources: button#120000.btn.btn-primary.btn-block.btn-lg(href='#') $120,000
a(href='#') Link to Data Sources Here .col-xs-12.col-sm-6.col-md-4.btn-nav
form button#140000.btn.btn-primary.btn-block.btn-lg(href='#') $140,000
label .col-xs-12.col-sm-6.col-md-4.btn-nav
input(type='radio', name='mode', value='grouped') button#160000.btn.btn-primary.btn-block.btn-lg(href='#') $160,000
| Grouped .col-xs-12.col-sm-6.col-md-4.btn-nav
label button#180000.btn.btn-primary.btn-block.btn-lg(href='#') $180,000
input(type='radio', name='mode', value='stacked') .col-xs-12.col-sm-6.col-md-4.btn-nav
| Stacked button#200000.btn.btn-primary.btn-block.btn-lg(href='#') $200,000
#chart.hidden-by-default
svg.chart
script. script.
$(document).ready(function () { $(document).ready(function () {
var bootcamps = !{JSON.stringify(bootcampJson)}; var bootcamps = !{JSON.stringify(bootcampJson)};
var city = ""; 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"]; 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 () { $('#city-buttons').on("click", "button", function () {
$(this).addClass('animated tada');
city = $(this).attr("id"); 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'}); $('#income').css({visibility: 'visible'});
//console.log(city);
}); });
//step two event listener
$('#income').on("click", "button", function() { $('#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']; var categoryNames = ['Opportunity Cost at Current Wage', 'Financing Cost', 'Housing Cost', 'Tuition / Wage Garnishing'];
bootcamps.forEach(function (camp) { bootcamps.forEach(function (camp) {
var x0 = 0; var x0 = 0;
@ -143,9 +136,9 @@ block content
}, { }, {
name: camp.name, name: camp.name,
label: 'Tuition / Wage Garnishing', 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, 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; camp.total = camp.mapping[camp.mapping.length - 1].x1;
}); });