diff --git a/server/boot/randomAPIs.js b/server/boot/randomAPIs.js index 022962e2f6..a7282e1ca0 100644 --- a/server/boot/randomAPIs.js +++ b/server/boot/randomAPIs.js @@ -26,6 +26,7 @@ module.exports = function(app) { router.post('/get-help', getHelp); router.post('/get-pair', getPair); router.get('/chat', chat); + router.get('/bootcamp-calculator', bootcampCalculator); router.get('/twitch', twitch); router.get('/pmi-acp-agile-project-managers', agileProjectManagers); router.get('/pmi-acp-agile-project-managers-form', agileProjectManagersForm); @@ -325,6 +326,12 @@ module.exports = function(app) { } } + function bootcampCalculator(req, res) { + res.render('resources/calculator', { + title: 'Coding Bootcamp Cost Calculator' + }); + } + function jobsForm(req, res) { res.render('resources/jobs-form', { title: 'Employer Partnership Form for Job Postings,' + diff --git a/server/views/challengeMap/show.jade b/server/views/challengeMap/show.jade index 782f76f484..c72cffe37f 100644 --- a/server/views/challengeMap/show.jade +++ b/server/views/challengeMap/show.jade @@ -98,22 +98,21 @@ block content li.large-p.negative-10 a(href="/challenges/#{challenge.name}")= challenge.name - //#announcementModal.modal(tabindex='-1') - // .modal-dialog.animated.fadeInUp.fast-animation - // .modal-content - // .modal-header.challenge-list-header Join our Saturday Summit! - // a.close.closing-x(href='#', data-dismiss='modal', aria-hidden='true') × - // .modal-body - // h3.text-left Saturday at Noon EDT: We'll live-stream our Saturday Summit on Twitch.tv. - // h3.text-left We'll announce our new Front End Development Certificate Program (it's free, of course) and our new "Free Code Camp On The Go" app.   - // a(href='http://www.freecodecamp.com/twitch', target='_blank') Add us to your calendar here - // | . - // a.btn.btn-lg.btn-info.btn-block(name='_csrf', value=_csrf, aria-hidden='true', href='http://twitch.tv/freecodecamp', target='_blank') Follow us on Twitch.tv - // a.btn.btn-lg.btn-primary.btn-block(href='#', data-dismiss='modal', aria-hidden='true') Thanks for the heads-up! - //script. - // $(document).ready(function () { - // if (!localStorage || !localStorage.day234) { - // $('#announcementModal').modal('show'); - // localStorage.day234 = "true"; - // } - // }); + #announcementModal.modal(tabindex='-1') + .modal-dialog.animated.fadeInUp.fast-animation + .modal-content + .modal-header.challenge-list-header Add us to your LinkedIn profile + a.close.closing-x(href='#', data-dismiss='modal', aria-hidden='true') × + .modal-body + h3.text-left LinkedIn now recognizes Free Code Camp as a university. + img.img-responsive.img-center(src='https://www.evernote.com/l/AHTzkHwtg-BHj57bqqDL7WFF8WgrI5V8cxwB/image.png') + h3.text-left It takes less than a minute to add Free Code Camp to your LinkedIn profile. + a.btn.btn-lg.btn-info.btn-block(name='_csrf', value=_csrf, aria-hidden='true', href='/linkedin', target='_blank') Show me how to do this + a.btn.btn-lg.btn-primary.btn-block(href='#', data-dismiss='modal', aria-hidden='true') Thanks for the heads-up + script. + $(document).ready(function () { + if (!localStorage || !localStorage.linkedIn) { + $('#announcementModal').modal('show'); + localStorage.linkedIn = "true"; + } + }); diff --git a/server/views/partials/footer.jade b/server/views/partials/footer.jade index 4a174070dd..0af2fce328 100644 --- a/server/views/partials/footer.jade +++ b/server/views/partials/footer.jade @@ -3,6 +3,7 @@ a.ion-speakerphone(href='http://blog.freecodecamp.com', target='_blank')  Blog   a.ion-social-github(href="http://github.com/freecodecamp", target='_blank')  GitHub   a.ion-social-twitch-outline(href="/twitch")  Twitch  + a.ion-social-linkedin(href="/linkedin")  LinkedIn  a.ion-social-facebook(href="/field-guide/how-can-i-find-other-free-code-camp-campers-in-my-city")  Facebook   a.ion-social-twitter(href="http://twitter.com/freecodecamp", target='_blank')  Twitter   a.ion-locked(href="/privacy")  Privacy   @@ -14,6 +15,8 @@ span.sr-only Free Code Camp on GitHub a.ion-social-twitch-outline(href="/twitch") span.sr-only Free Code Camp Live Pair Programming on Twitch.tv + a.ion-social-linkedin(href="/linkedin") + span.sr-only Free Code Camp LinkedIn Alumni Network a.ion-social-facebook(href="/field-guide/how-can-i-find-other-free-code-camp-campers-in-my-city") span.sr-only Free Code Camp local groups on Facebook a.ion-social-twitter(href="http://twitter.com/freecodecamp", target='_blank') diff --git a/server/views/resources/twitch.jade b/server/views/resources/twitch.jade index 678d983411..1b89b17432 100644 --- a/server/views/resources/twitch.jade +++ b/server/views/resources/twitch.jade @@ -34,32 +34,32 @@ block content .col-xs-12.col-sm-12.col-md-6 .embed-responsive.embed-responsive-16by9.big-break iframe.embed-responsive-item(src='//www.youtube.com/embed/Z_43xApGB9Y') - p.wrappable.negative-45 link:   + p.wrappable.negative-30 link:   a(href="http://www.youtube.com/watch/Fn9HMn79KH0") http://www.youtube.com/watch/Z_43xApGB9Y .col-xs-12.col-sm-12.col-md-6 .embed-responsive.embed-responsive-16by9.big-break iframe.embed-responsive-item(src='//www.youtube.com/embed/PvWHzcebjjQ') - p.wrappable.negative-45 link:   + p.wrappable.negative-30 link:   a(href="http://www.youtube.com/watch/Fn9HMn79KH0") http://www.youtube.com/watch/PvWHzcebjjQ .col-xs-12.col-sm-12.col-md-6 .embed-responsive.embed-responsive-16by9.big-break iframe.embed-responsive-item(src='//www.youtube.com/embed/yHL6mEr-LGY') - p.wrappable.negative-45 link:   + p.wrappable.negative-30 link:   a(href="http://www.youtube.com/watch/Fn9HMn79KH0") http://www.youtube.com/watch/yHL6mEr-LGY .col-xs-12.col-sm-12.col-md-6 .embed-responsive.embed-responsive-16by9.big-break iframe.embed-responsive-item(src='//www.youtube.com/embed/dolG-yRMcPs') - p.wrappable.negative-45 link:   + p.wrappable.negative-30 link:   a(href="http://www.youtube.com/watch/Fn9HMn79KH0") http://www.youtube.com/watch/dolG-yRMcPs .col-xs-12.col-sm-12.col-md-6 .embed-responsive.embed-responsive-16by9.big-break iframe.embed-responsive-item(src='//www.youtube.com/embed/YMz_vrK_KlQ') - p.wrappable.negative-45 link:   + p.wrappable.negative-30 link:   a(href="http://www.youtube.com/watch/_BErpDdmBOw") http://www.youtube.com/watch/YMz_vrK_KlQ .col-xs-12.col-sm-12.col-md-6 .embed-responsive.embed-responsive-16by9.big-break iframe.embed-responsive-item(src='//www.youtube.com/embed/bbFVxaza8Ik') - p.wrappable.negative-45 link:   + p.wrappable.negative-30 link:   a(href="http://www.youtube.com/watch/S7iRBZJwOAs") http://www.youtube.com/watch/bbFVxaza8Ik br br diff --git a/server/views/stories/news-nav.jade b/server/views/stories/news-nav.jade index 6408520a20..48f64ae561 100644 --- a/server/views/stories/news-nav.jade +++ b/server/views/stories/news-nav.jade @@ -15,10 +15,10 @@ .spacer .row .col-xs-12.col-sm-8.col-sm-offset-2.well - h4.text-center Which Coders are Worth Following on Twitter? - img.img-responsive(src='https://www.evernote.com/l/AHQLuyBNcVpKj5TRhNzWssVuCvbRIEylm3oB/image.png') - p Share a link to the Twitter profile of your choice, and tell us in 140 characters or less why this person is a "Coder Worth Following". - p Use the headline: "Coder Worth Following: (their Twitter handle)". We'll publish a list of the 25 most-upvoted submissions (and the campers who submitted them) in Wednesday's blog post. Also - as always - you'll get 1 point every time someone upvotes your post. + h4.text-center Which other free resources do you use? + img.img-responsive(src='https://www.evernote.com/l/AHRNhlwViM1Kh5qCm6iy7MSWrbdyxYbRkWkB/image.png') + p Link us to your favorite free coding resources. + p Use the headline: "Awesome Free Resource: (the name of the book, podcast, or video series)". We'll publish a list of the 25 most-upvoted resources (and the campers who submitted them) in Wednesday's blog post, and in an upcoming Field Guide article. Also - as always - you'll get 1 point every time someone upvotes your post. .spacer #search-results diff --git a/views/resources/calculator.jade b/views/resources/calculator.jade new file mode 100644 index 0000000000..7db81dab2a --- /dev/null +++ b/views/resources/calculator.jade @@ -0,0 +1,656 @@ +extends ../layout +block content + .panel.panel-info + .panel-heading.text-center Coding Bootcamp Cost Calculator + .panel-body + .row + .col-xs-12.col-sm-10.col-sm-offset-1 + style. + #lastYearIncome{ + clear:both; + margin: 2% 0; + width: 110px; + } + #income, #calculate { + visibility:hidden; + } + .step { + font-size: 2em; + padding: 1%; + clear: both; + } + .city-buttons { + display: block; + clear: right; + } + #four p{ + font-size: .6em; + color: black; + } + .chart rect { + fill: steelblue; + } + .chart text { + fill: #121401; + font: 10px sans-serif; + text-anchor: end; + } + .axis path, + .axis line { + fill: none; + stroke: #121401; + stroke-width: 2px; + shape-rendering: crispEdges; + } + html. + +
+
+ +
Step 1: Choose your City
+
+ +
+   + +
Step 2: Enter last Year's Income
+
+ + +
+ +
Step 3: Calculate
+ + + + + +
+ +
+ Sources: Link to Data Sources Here +
+ + +
+ script. + $(document).ready(function () { + var n = 4, // number of layers + m = 58, // number of samples per layer + stack = d3.layout.stack(), + layers = stack(d3.range(n).map(function () { + return bumpLayer(m, .1); + })), + yGroupMax = d3.max(layers, function (layer) { + return d3.max(layer, function (d) { + return d.y; + }); + }), + yStackMax = d3.max(layers, function (layer) { + return d3.max(layer, function (d) { + return d.y0 + d.y; + }); + }); + var margin = { + top: 40, + right: 10, + bottom: 20, + left: 10 + }, + width = 960 - margin.left - margin.right, + height = 500 - margin.top - margin.bottom; + var x = d3.scale.ordinal() + .domain(d3.range(m)) + .rangeRoundBands([0, width], .08); + var y = d3.scale.linear() + .domain([0, yStackMax]) + .range([height, 0]); + var color = d3.scale.linear() + .domain([0, n - 1]) + .range(["#aad", "#556"]); + var xAxis = d3.svg.axis() + .scale(x) + .tickSize(0) + .tickPadding(6) + .orient("bottom"); + var svg = d3.select("body").append("svg") + .attr("width", width + margin.left + margin.right) + .attr("height", height + margin.top + margin.bottom) + .append("g") + .attr("transform", "translate(" + margin.left + "," + margin.top + ")"); + var layer = svg.selectAll(".layer") + .data(layers) + .enter().append("g") + .attr("class", "layer") + .style("fill", function (d, i) { + return color(i); + }); + var rect = layer.selectAll("rect") + .data(function (d) { + return d; + }) + .enter().append("rect") + .attr("x", function (d) { + return x(d.x); + }) + .attr("y", height) + .attr("width", x.rangeBand()) + .attr("height", 0); + rect.transition() + .delay(function (d, i) { + return i * 10; + }) + .attr("y", function (d) { + return y(d.y0 + d.y); + }) + .attr("height", function (d) { + return y(d.y0) - y(d.y0 + d.y); + }); + svg.append("g") + .attr("class", "x axis") + .attr("transform", "translate(0," + height + ")") + .call(xAxis); + d3.selectAll("input").on("change", change); + var timeout = setTimeout(function () { + d3.select("input[value=\"grouped\"]").property("checked", true).each(change); + }, 2000); + + function change() { + clearTimeout(timeout); + if (this.value === "grouped") transitionGrouped(); + else transitionStacked(); + } + + function transitionGrouped() { + y.domain([0, yGroupMax]); + rect.transition() + .duration(500) + .delay(function (d, i) { + return i * 10; + }) + .attr("x", function (d, i, j) { + return x(d.x) + x.rangeBand() / n * j; + }) + .attr("width", x.rangeBand() / n) + .transition() + .attr("y", function (d) { + return y(d.y); + }) + .attr("height", function (d) { + return height - y(d.y); + }); + } + + function transitionStacked() { + y.domain([0, yStackMax]); + rect.transition() + .duration(500) + .delay(function (d, i) { + return i * 10; + }) + .attr("y", function (d) { + return y(d.y0 + d.y); + }) + .attr("height", function (d) { + return y(d.y0) - y(d.y0 + d.y); + }) + .transition() + .attr("x", function (d) { + return x(d.x); + }) + .attr("width", x.rangeBand()); + } + + // Inspired by Lee Byron's test data generator. + function bumpLayer(n, o) { + function bump(a) { + var x = 1 / (.1 + Math.random()), + y = 2 * Math.random() - .5, + z = 10 / (.1 + Math.random()); + for (var i = 0; i < n; i++) { + var w = (i / n - y) * z; + a[i] += x * Math.exp(-w * w); + } + } + + var a = [], i; + for (i = 0; i < n; ++i) a[i] = o + o * Math.random(); + for (i = 0; i < 5; ++i) bump(a); + return a.map(function (d, i) { + return {x: i, y: Math.max(0, d)}; + }); + } + var city = ""; + var lastYearincome = 52000; + //major cities array to check against users location for housing costs + var cityArray = ["San Fransisco", "Los Angeles", "Chicago", "Austin", "New York City"]; + //this is the raw bootcamps file allowing easy addition of new code camps + var bootcamps = [{ + "name": "App Academy", + "cost": "18000", + "weeks": "12", + "finance": false, + "cities": [ + "New York", + "San Francisco" + ] + }, { + "name": "Viking Code School", + "cost": "18000", + "weeks": "14", + "finance": false, + "cities": [ + "online" + ] + }, { + "name": "Hack Reactor", + "cost": "17780", + "weeks": "12", + "finance": true, + "cities": [ + "New York", + "San Francisco" + ] + }, { + "name": "Hackbright Academy", + "cost": "15000", + "weeks": "10", + "finance": true, + "cities": [ + "San Francisco" + ] + }, { + "name": "Dev Bootcamp", + "cost": "13950", + "finance": true, + "weeks": "19", + "cities": [ + "New York", + "San Francisco", + "Chicago" + ] + }, { + "name": "General Asssembly", + "cost": "11500", + "finance": true, + "weeks": "12", + "cities": [ + "Washington, DC", + "Austin", + "Boston", + "Chicago", + "Hong Kong", + "London", + "Los Angeles", + "Melbourne", + "New York cities", + "San Francisco", + "Seattle", + "Singapore" + ] + }, { + "name": "Angel Hack", + "cost": "14250", + "finance": true, + "weeks": "12", + "cities": [ + "San Francisco" + ] + }, { + "name": "Bitmaker Labs", + "cost": "12000", + "finance": true, + "weeks": "12", + "cities": [ + "Toronto" + ] + }, { + "name": "CoderVox", + "cost": "9980", + "finance": true, + "weeks": "12", + "cities": [ + "Austin" + ] + }, { + "name": "Coding Dojo", + "cost": "12500", + "finance": true, + "weeks": "12", + "cities": [ + "New York", + "San Francisco", + "Chicago" + ] + }, { + "name": "Epicodus", + "cost": "4500", + "finance": false, + "weeks": "15", + "cities": [ + "Portland" + ] + }, { + "name": "Flat Iron School", + "cost": "15000", + "finance": true, + "weeks": "12", + "cities": [ + "New York" + ] + }, { + "name": "Galvanize", + "cost": "21000", + "finance": true, + "weeks": "24", + "cities": [ + "Boulder", + "Denver", + "Seattle", + "San Francisco", + "Fort Collins" + ] + }, { + "name": "The Iron Yard", + "cost": "12000", + "finance": true, + "weeks": "19", + "cities": [ + "Atlanta", + "Austin", + "Colombia, SC", + "Charleston, SC", + "Houston", + "Greenville, SC", + "Las Vegas", + "Little Rock", + "Nashville", + "Orlando", + "Raleigh - Durham", + "Tampa - St. Petersburg", + "Washington DC" + ] + }, { + "name": "Launch Academy", + "cost": "12500", + "finance": true, + "weeks": "10", + "cities": [ + "Boston" + ] + }, { + "name": "Maker Square", + "cost": "16920", + "finance": true, + "weeks": "12", + "cities": [ + "Los Angeles", + "San Francisco", + "Austin" + ] + }, { + "name": "Refactor U", + "cost": "13500", + "finance": true, + "weeks": "10", + "cities": [ + "Boulder" + ] + }, { + "name": "Rocket U", + "cost": "12500", + "finance": true, + "weeks": "12", + "cities": [ + "New York", + "San Francisco", + "Chicago" + ] + }, { + "name": "Sabio", + "cost": "13450", + "finance": true, + "weeks": "12", + "cities": [ + "Los Angeles" + ] + }, { + "name": "Shillington School", + "cost": "12950", + "finance": true, + "weeks": "12", + "cities": [ + "New York", + "Sydney", + "Brisbane", + "London", + "Manchester", + "Melbourne" + ] + }, { + "name": "The Tech Academy", + "cost": "9000", + "finance": true, + "weeks": "20", + "cities": [ + "Portland" + ] + }, { + "name": "Turing School", + "cost": "17500", + "finance": true, + "weeks": "27", + "cities": [ + "Denver" + ] + }, { + "name": "Free Code Camp", + "cost": "0", + "finance": true, + "weeks": "0", + "cities": [ + "Online" + ] + }]; + //reduce opacity for steps 2 through 4 + //the actual elements start out hidden via CSS + $('#two').css({opacity: '0.25'}); + $('#three').css({opacity: '0.25'}); + $('#four').css({opacity: '0.25'}); + //step one event listener + $('#city-buttons').on("click", "span", function () { + $(this).addClass('animated tada'); + city = $(this).attr("id"); + //make next step visible + $('#two').css({opacity: '1'}); + $('#income').css({visibility: 'visible'}); + //console.log(city); + }); + //step two event listener + $('#income').on("change", function () { + console.log("Income Updated"); + lastYearincome = parseInt($('#lastYearIncome').val()); + //make next step visible + $('#three').css({opacity: '1'}); + $('#calculate').css({visibility: 'visible'}); + }); + + $('#calculate').on("click", function () { + //Make data logger visible + $('#four').css({opacity: '1'}); + + var categoryNames = ['Tuition', 'Finance', 'Housing', 'Working Cost']; + bootcamps.forEach(function (camp) { + var x0 = 0; + //this just checks against main city array. + //when we refactor, this should check against this camp's cities array + //should not be a difficult change + if (cityArray.indexOf(city) >= 0) { + weeklyHousing = 0; + } else { + weeklyHousing = 500; + } + camp.mapping = [{ + name: camp.name, + label: 'Tuition', + x0: x0, + x1: x0 += +camp.cost + }, { + name: camp.name, + label: 'Finance', + x0: +camp.cost, + x1: x0 += +Math.floor(camp.cost * .09519) + }, { + name: camp.name, + label: 'Housing', + x0: +Math.floor(camp.cost * 1.09519), + x1: x0 += weeklyHousing * camp.weeks + }, { + name: camp.name, + label: 'Working Cost', + x0: +(Math.floor(camp.cost * 1.09519) + weeklyHousing * camp.weeks), + x1: x0 += +(Math.floor(camp.weeks * lastYearincome / 50)) + }]; + camp.total = camp.mapping[camp.mapping.length - 1].x1; + }); + console.log(bootcamps[0]); + var margin = { + top: 30, + right: 60, + bottom: 50, + left: 140 + }, + width = 800 - margin.left - margin.right, + height = 600 - margin.top - margin.bottom; + var barHeight = 20; + var xScale = d3.scale.linear() + .domain([0, d3.max(bootcamps, function (d) { + return d.total; + })]) + .rangeRound([0, width]); + var yScale = d3.scale.ordinal() + .domain(bootcamps.map(function (d) { + return d.name; + })) + .rangeRoundBands([0, height], .1); + console.log("yrangeroundband", yScale.rangeBand()); + var color = d3.scale.ordinal() + .range(["#f0ad4e", "#4A2B0F", "#215f1e", "#457E86"]) + .domain(['Tuition', 'Finance', 'Housing', 'Working Cost']); + var svg = d3.select("svg") + .attr("width", width + margin.left + margin.right) + .attr("height", height + margin.top + margin.bottom) + .append("g") + .attr("transform", "translate(" + margin.left + "," + margin.top + ")"); + var selection = svg.selectAll(".series") + .data(bootcamps) + .enter().append("g") + .attr("class", "series") + .attr("transform", function (d) { + return "translate(0," + yScale(d.name) + ")"; + }); + ; + selection.selectAll("rect") + .data(function (d) { + return d.mapping; + }) + .enter().append("rect") + .attr("width", function (d) { + return xScale((d.x1) - (d.x0)); + }) + .attr("x", function (d) { + return xScale(d.x0); + }) + .attr("height", yScale.rangeBand()) + .style("fill", function (d) { + return color(d.label); + }) + .style("stroke", "white") + .on("mouseover", function (d) { + showPopover.call(this, d); + }) + .on("mouseout", function (d) { + removePopovers(); + }); + //axes + //axes + var xAxis = d3.svg.axis() + .scale(xScale) + .orient("bottom"); + var yAxis = d3.svg.axis() + .scale(yScale) + .orient("left"); + svg.append("g") + .attr("class", "y axis") + .call(yAxis); + svg.append("g") + .attr("class", "x axis") + .attr("transform", "translate(0," + height + ")") + .call(xAxis) + .append("text") + .attr("x", 300) + .attr("y", 35) + .attr("dy", ".35em") + .style("text-anchor", "middle") + .text("Cost in $USD"); + //tooltips + function removePopovers() { + $('.popover').each(function () { + $(this).remove(); + }); + } + + function showPopover(d) { + $(this).popover({ + title: d.name, + placement: 'auto top', + container: 'body', + trigger: 'manual', + html: true, + content: function () { + return d.label + + "
$" + + d3.format(",")(d.value ? d.value : d.x1 - d.x0); + } + }); + $(this).popover('show') + } + + //legends + var legend = svg.selectAll(".legend") + .data(categoryNames.slice().reverse()) + .enter().append("g") + .attr("class", "legend") + .attr("transform", function (d, i) { + return "translate(30," + i * yScale.rangeBand() * 1.1 + ")"; + }); + legend.append("rect") + .attr("x", width - yScale.rangeBand()) + .attr("width", yScale.rangeBand()) + .attr("height", yScale.rangeBand()) + .style("fill", color) + .style("stroke", "white"); + legend.append("text") + .attr("x", width - yScale.rangeBand() * 1.2) + .attr("y", 12) + .attr("dy", ".35em") + .style("text-anchor", "end") + .text(function (d) { + return d; + }); + }); + });