greatbody
/
freeCodeCamp
mirror of https://github.com/freeCodeCamp/freeCodeCamp.git
1
0
Fork 0
Code Issues Projects Releases Wiki Activity

futher improve calculator ux

pull/1722/head
Quincy Larson 2015-06-16 12:32:12 -07:00
parent 9bc4f0c25c
commit 2cb0a3d717
4 changed files with 59 additions and 51 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

8
gulpfile.js
View File

@ -70,7 +70,7 @@ gulp.task('lint', function() {
.pipe(eslint.format()); .pipe(eslint.format());
}); });
gulp.task('build', function() { gulp.task('less', function() {
return gulp.src('./public/css/*.less') return gulp.src('./public/css/*.less')
.pipe(less({ .pipe(less({
paths: [ path.join(__dirname, 'less', 'includes') ] paths: [ path.join(__dirname, 'less', 'includes') ]
@ -78,4 +78,8 @@ gulp.task('build', function() {
.pipe(gulp.dest('./public/css/')); .pipe(gulp.dest('./public/css/'));
}); });
gulp.task('default', ['build', 'serve', 'sync']); gulp.task('watch', ['less', 'serve', 'sync'], function() {
gulp.watch('./public/css/*.less', ['less']);
});
gulp.task('default', ['less', 'serve', 'sync', 'watch']);

12
public/css/main.less
View File

@ -1123,13 +1123,8 @@ hr {
// Calculator styles // Calculator styles
.hidden-initially { .initially-hidden {
visibility: hidden; display: none;
}
#four p{
font-size: .6em;
color: black;
} }
.chart rect { .chart rect {
@ -1137,8 +1132,7 @@ hr {
} }
.chart text { .chart text {
fill: #121401; font-size: 14px;
font: 13px sans-serif;
text-anchor: end; text-anchor: end;
} }

2
server/boot/randomAPIs.js
View File

@ -27,7 +27,7 @@ module.exports = function(app) {
router.post('/get-help', getHelp); router.post('/get-help', getHelp);
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('/coding-bootcamp-cost-calculator', bootcampCalculator);
router.get('/bootcamp-calculator.json', bootcampCalculatorJson); 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);

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

@ -1,21 +1,16 @@
extends ../layout extends ../layout
block content block content
link(rel='stylesheet', href='https://cdnjs.cloudflare.com/ajax/libs/bootstrap-switch/3.3.2/css/bootstrap2/bootstrap-switch.min.css')
script(src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-switch/3.3.2/js/bootstrap-switch.min.js")
.panel.panel-info .panel.panel-info
.panel-heading.text-center Coding Bootcamp Cost Calculator .panel-heading.text-center Coding Bootcamp Cost Calculator
.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.text-primary#chosen h3.text-primary#chosen Coming from _______, and making $_______, your true costs will be:
#chart-controls.initially-hidden #chart-controls.initially-hidden
form .text-center
label button#transform.btn.btn-primary.btn-lg.animated Transform
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 #city-buttons
h2 Where do you live? 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
@ -56,7 +51,7 @@ block content
button#toronto.btn.btn-primary.btn-block.btn-lg Toronto button#toronto.btn.btn-primary.btn-block.btn-lg Toronto
.col-xs-12.btn-nav .col-xs-12.btn-nav
button#other.btn.btn-primary.btn-block.btn-lg Other button#other.btn.btn-primary.btn-block.btn-lg Other
#income.hidden-by-default #income.initially-hidden
h2 How much money did you make last year (in USD)? 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#0.btn.btn-primary.btn-block.btn-lg(href='#') $0 button#0.btn.btn-primary.btn-block.btn-lg(href='#') $0
@ -88,25 +83,39 @@ block content
button#180000.btn.btn-primary.btn-block.btn-lg(href='#') $180,000 button#180000.btn.btn-primary.btn-block.btn-lg(href='#') $180,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#200000.btn.btn-primary.btn-block.btn-lg(href='#') $200,000
#chart.hidden-by-default #chart.initially-hidden
svg.chart .d3-centered
svg.chart
#explanation.initially-hidden
.text-center
a(href='/coding-bootcamp-cost-calculator.json') View Data Source JSON
span   •  
a(href='/coding-bootcamp-cost-calculator') Recalculate
p.large-p Test
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"]; $( "body" ).data( "state", "stacked");
$('#city-buttons').on("click", "button", function () { $('#city-buttons').on("click", "button", function () {
$(this).addClass('animated pulse');
setTimeout(function () {
$('#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').addClass('animated fadeIn').show();
}, 1000);
city = $(this).attr("id"); city = $(this).attr("id");
$('#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'});
}); });
$('#income').on("click", "button", function() { $('#income').on("click", "button", function() {
$('#income').hide(); $(this).addClass('animated pulse');
$('#chart').css({visibility: 'visible'}); setTimeout(function () {
$('#income').hide();
$('#chart').show();
$('#chart-controls').addClass('animated fadeIn').show();
$('#explanation').addClass('animated fadeIn').show();
}, 1000);
var lastYearsIncome = parseInt($(this).attr("id")); var lastYearsIncome = parseInt($(this).attr("id"));
$('#chosen').append(' making $' + lastYearsIncome.toString().replace(/0000/, '0,000') + ', your true costs are:'); $('#chosen').append(', and making $' + lastYearsIncome.toString().replace(/0000/, '0,000') + ', your true costs will be:');
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;
@ -117,7 +126,7 @@ block content
} }
camp.mapping = [{ camp.mapping = [{
name: camp.name, name: camp.name,
label: 'Opportunity Cost at Current Wage', label: 'Tuition / Wage Garnishing',
value: +camp.cost, value: +camp.cost,
x0: x0, x0: x0,
x1: x0 += +camp.cost x1: x0 += +camp.cost
@ -135,7 +144,7 @@ block content
x1: x0 += weeklyHousing * camp.weeks x1: x0 += weeklyHousing * camp.weeks
}, { }, {
name: camp.name, name: camp.name,
label: 'Tuition / Wage Garnishing', label: 'Opportunity Cost at Current Wage',
value: +(Math.floor(camp.weeks * lastYearsIncome / 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 * lastYearsIncome / 50)) x1: x0 += +(Math.floor(camp.weeks * lastYearsIncome / 50))
@ -145,11 +154,9 @@ block content
bootcamps.sort(function(a, b) { return a.total - b.total; }); bootcamps.sort(function(a, b) { return a.total - b.total; });
maxValue = 0; maxValue = 0;
bootcamps.forEach(function (camp) { bootcamps.forEach(function (camp) {
camp.mapping.forEach(function (thing) { camp.mapping.forEach(function (elem) {
//console.log(thing.value ); if (elem.value > maxValue) {
if (thing.value > maxValue) { maxValue = elem.value;
maxValue = thing.value;
console.log(maxValue);
} }
}); });
}); });
@ -225,19 +232,22 @@ block content
.attr("width", function (d) { .attr("width", function (d) {
return xScale((d.x1) - (d.x0)); return xScale((d.x1) - (d.x0));
}); });
d3.selectAll("input").on("change", change); d3.selectAll("#transform").on("click", function() {
var timeout= setTimeout(function () { $('#transform').addClass('pulse');
d3.select("input[value=\"stacked\"]").property("checked",true).each(change); change();
// d3.select("input[value=\"stacked\"]").property("checked",true).each(change); setTimeout( function() {
}, 4000); $('#transform').removeClass('pulse');
var timeout= setTimeout(function () { }, 1000);
d3.select("input[value=\"grouped\"]").property("checked",true).each(change); });
}, 1500);
function change() { function change() {
clearTimeout(timeout); if ($("body").data("state") === "stacked") {
if (this.value === "grouped") transitionGrouped(); transitionGrouped();
else transitionStacked(); $("body").data("state", "grouped");
} else {
transitionStacked();
$("body").data("state", "stacked");
}
} }
function transitionGrouped() { function transitionGrouped() {