add progress bar to nonprofit project proposal wizard

AaronCButcher · Mar 25, 2015 · d64b5c5 · d64b5c5
1 parent 09b8126
commit d64b5c5
Show file tree

Hide file tree

Showing 14 changed files with 89 additions and 44 deletions.
diff --git a/app.js b/app.js
@@ -15,7 +15,7 @@ process.on('uncaughtException', function (err) {
 });
 
 var express = require('express'),
-    accepts = require('accepts'),
+    //accepts = require('accepts'),
     cookieParser = require('cookie-parser'),
     compress = require('compression'),
     session = require('express-session'),
@@ -284,7 +284,8 @@ app.get('/nonprofits/ok-with-javascript', nonprofitController.okWithJavaScript);
 app.get('/nonprofits/other-solutions', nonprofitController.otherSolutions);
 app.get('/nonprofits/what-does-your-nonprofit-do', nonprofitController.whatDoesYourNonprofitDo);
 app.get('/nonprofits/link-us-to-your-website', nonprofitController.linkUsToYourWebsite);
-app.get('/nonprofits/tell-us-your-name-and-email', nonprofitController.tellUsYourNameAndEmail);
+app.get('/nonprofits/tell-us-your-name', nonprofitController.tellUsYourName);
+app.get('/nonprofits/tell-us-your-email', nonprofitController.tellUsYourEmail);
 app.get('/nonprofits/your-nonprofit-project-application-has-been-submitted', nonprofitController.yourNonprofitProjectApplicationHasBeenSubmitted);
 
 app.get(

diff --git a/controllers/nonprofits.js b/controllers/nonprofits.js
@@ -22,55 +22,65 @@ exports.nonprofitsHome = function(req, res) {
 
 exports.areYouWithARegisteredNonprofit = function(req, res) {
     res.render('nonprofits/are-you-with-a-registered-nonprofit', {
-        title: 'Are you with a with a registered nonprofit'
+        title: 'Are you with a with a registered nonprofit',
+        step: 1
     });
 };
 
 exports.howCanFreeCodeCampHelpYou = function(req, res) {
     res.render('nonprofits/how-can-free-code-camp-help-you', {
-        title: 'Are you with a with a registered nonprofit'
+        title: 'Are you with a with a registered nonprofit',
+        step: 2
     });
 };
 
-exports.otherSolutions = function(req, res) {
-    res.render('nonprofits/other-solutions', {
-        title: 'Here are some other possible solutions for you'
-    });
-};
 
 exports.areTherePeopleThatAreAlreadyBenefitingFromYourServices = function(req, res) {
     res.render('nonprofits/are-there-people-that-are-already-benefiting-from-your-services', {
-        title: 'Are there people already benefiting from your services'
+        title: 'Are there people already benefiting from your services',
+        step: 3
     });
 };
 
-exports.inExchangeWeAsk = function(req, res) {
-    res.render('nonprofits/in-exchange-we-ask', {
-        title: 'In exchange we ask that you ...'
+exports.okWithJavaScript = function(req, res) {
+    res.render('nonprofits/ok-with-javascript', {
+        title: 'Are you OK with us using JavaScript',
+        step: 4
     });
 };
 
-exports.okWithJavaScript = function(req, res) {
-    res.render('nonprofits/ok-with-javascript', {
-        title: 'Are you OK with us using JavaScript'
+exports.inExchangeWeAsk = function(req, res) {
+    res.render('nonprofits/in-exchange-we-ask', {
+        title: 'In exchange we ask that you ...',
+        step: 5
     });
 };
 
 exports.whatDoesYourNonprofitDo = function(req, res) {
     res.render('nonprofits/what-does-your-nonprofit-do', {
-        title: 'What does your nonprofit do?'
+        title: 'What does your nonprofit do?',
+        step: 6
     });
 };
 
 exports.linkUsToYourWebsite = function(req, res) {
     res.render('nonprofits/link-us-to-your-website', {
-        title: 'Link us to your website'
+        title: 'Link us to your website',
+        step: 7
+    });
+};
+
+exports.tellUsYourEmail = function(req, res) {
+    res.render('nonprofits/tell-us-your-email', {
+        title: 'Tell us your name',
+        step: 8
     });
 };
 
-exports.tellUsYourNameAndEmail = function(req, res) {
-    res.render('nonprofits/tell-us-your-name-and-email', {
-        title: 'Tell us your name and email address'
+exports.tellUsYourName = function(req, res) {
+    res.render('nonprofits/tell-us-your-name', {
+        title: 'Tell us your name',
+        step: 9
     });
 };
 
@@ -79,3 +89,9 @@ exports.yourNonprofitProjectApplicationHasBeenSubmitted = function(req, res) {
         title: 'Your Nonprofit Project application has been submitted!'
     });
 };
+
+exports.otherSolutions = function(req, res) {
+    res.render('nonprofits/other-solutions', {
+        title: 'Here are some other possible solutions for you'
+    });
+};
diff --git a/views/nonprofits/are-there-people-that-are-already-benefiting-from-your-services.jade b/views/nonprofits/are-there-people-that-are-already-benefiting-from-your-services.jade
@@ -2,7 +2,7 @@ extends ../layout
 block content
     .jumbotron.text-center
         h1.hug-top Nonprofit Sign Up
-        .spacer
+        include ../partials/nonprofit-application-progress-bar
         h2 We build solutions for nonprofits who are already serving a need. Are there people who already benefit from your services?
         .spacer
         .row

diff --git a/views/nonprofits/are-you-with-a-registered-nonprofit.jade b/views/nonprofits/are-you-with-a-registered-nonprofit.jade
@@ -1,12 +1,12 @@
 extends ../layout
 block content
     .jumbotron.text-center
-            h1.hug-top Nonprofit Sign Up
-            .spacer
-            h2 Do you represent a nonprofit organization that is registered with your government?
-            .spacer
-            .row
-                .col-xs-6
-                    a.btn.btn-primary.btn-big.btn-block(href='/nonprofits/how-can-free-code-camp-help-you') Yes
-                .col-xs-6
-                    a.btn.btn-warning.btn-big.btn-block(href='/nonprofits/other-solutions') No
+        h1.hug-top Nonprofit Sign Up
+        include ../partials/nonprofit-application-progress-bar
+        h2 Do you represent a nonprofit organization that is registered with your government?
+        .spacer
+        .row
+            .col-xs-6
+                a.btn.btn-primary.btn-big.btn-block(href='/nonprofits/how-can-free-code-camp-help-you') Yes
+            .col-xs-6
+                a.btn.btn-warning.btn-big.btn-block(href='/nonprofits/other-solutions') No
diff --git a/views/nonprofits/how-can-free-code-camp-help-you.jade b/views/nonprofits/how-can-free-code-camp-help-you.jade
@@ -2,7 +2,7 @@ extends ../layout
 block content
     .jumbotron.text-center
         h1.hug-top Nonprofit Sign Up
-        .spacer
+        include ../partials/nonprofit-application-progress-bar
         h2 How can Free Code Camp help you?
             .spacer
             .row.text-center.negative-35

diff --git a/views/nonprofits/in-exchange-we-ask.jade b/views/nonprofits/in-exchange-we-ask.jade
@@ -2,7 +2,7 @@ extends ../layout
 block content
     .jumbotron
         h1.hug-top.text-center Nonprofit Sign Up
-        .spacer
+        include ../partials/nonprofit-application-progress-bar
         h2 Great! In exchange for our help, we ask only that you:
         h3
             ol

diff --git a/views/nonprofits/link-us-to-your-website.jade b/views/nonprofits/link-us-to-your-website.jade
@@ -1,6 +1,6 @@
 .jumbotron.text-center
     h1.hug-top Nonprofit Sign Up
-    .spacer
+    include ../partials/nonprofit-application-progress-bar
     h2 In 140 characters or less, what does your nonprofit do? For whom?
     .spacer
     .formgroup

diff --git a/views/nonprofits/ok-with-javascript.jade b/views/nonprofits/ok-with-javascript.jade
@@ -2,11 +2,7 @@ extends ../layout
 block content
     .jumbotron.text-center
         h1.hug-top Nonprofit Sign Up
-        .spacer
-        .progress
-            .progress-bar(role='progressbar', aria-valuenow='60', aria-valuemin='0', aria-valuemax='100', style='width: 60%;')
-                span.sr-only 60% Complete
-        h3.gray-text Step 4 of 9
+        include ../partials/nonprofit-application-progress-bar
         h2 Our campers are learning to code using modern full stack JavaScript technologies like Node.js. We do not build or maintain Wordpress, Drupal, or other non-JavaScript based frameworks.
         .spacer
         .row

diff --git a/views/nonprofits/tell-us-your-email.jade b/views/nonprofits/tell-us-your-email.jade
@@ -0,0 +1,12 @@
+extends ../layout
+block content
+    .jumbotron.text-center
+        h1.hug-top Nonprofit Sign Up
+        include ../partials/nonprofit-application-progress-bar
+        h2 Please tell us your email
+        .spacer
+        .formgroup
+            .input-group
+                input.form-control.big-text-field.field-responsive(type='text', maxlength='140', autofocus='')
+                span.input-group-btn
+                    button.btn.btn-big.btn-primary.btn-responsive(href='/nonprofits/your-nonprofit-project-application-has-been-submitted') Submit
diff --git a/views/nonprofits/tell-us-your-name-and-email.jade b/views/nonprofits/tell-us-your-name-and-email.jade
diff --git a/views/nonprofits/tell-us-your-name.jade b/views/nonprofits/tell-us-your-name.jade
@@ -0,0 +1,12 @@
+extends ../layout
+block content
+    .jumbotron.text-center
+        h1.hug-top Nonprofit Sign Up
+        include ../partials/nonprofit-application-progress-bar
+        h2 Please tell us your name
+        .spacer
+        .formgroup
+            .input-group
+                input.form-control.big-text-field.field-responsive(type='text', maxlength='140', autofocus='')
+                span.input-group-btn
+                    button.btn.btn-big.btn-primary.btn-responsive(href='/nonprofits/tell-us-your-email') Submit
diff --git a/views/nonprofits/what-does-your-nonprofit-do.jade b/views/nonprofits/what-does-your-nonprofit-do.jade
@@ -2,7 +2,7 @@ extends ../layout
 block content
     .jumbotron.text-center
         h1.hug-top Nonprofit Sign Up
-        .spacer
+        include ../partials/nonprofit-application-progress-bar
         h2 In 140 characters or less, what does your nonprofit do? For whom?
         .spacer
         .formgroup

diff --git a/views/nonprofits/your-nonprofit-project-application-has-been-submitted.jade b/views/nonprofits/your-nonprofit-project-application-has-been-submitted.jade
@@ -1,4 +1,6 @@
-.jumbotron.text-center
-    h1.hug-top Nonprofit Sign Up
-    .spacer
-    h2 Thank you for reaching out to us. We’ll get back with you before N of next week.
+extends ../layout
+block content
+    .jumbotron.text-center
+        h1.hug-top Nonprofit Sign Up
+        include ../partials/nonprofit-application-progress-bar
+        h2 Thank you for reaching out to us. We’ll get back with you before N of next week.
diff --git a/views/partials/nonprofit-application-progress-bar.jade b/views/partials/nonprofit-application-progress-bar.jade
@@ -0,0 +1,6 @@
+.spacer
+.progress
+    .progress-bar(role='progressbar', aria-valuenow= (step * 10), aria-valuemin='0', aria-valuemax='100', style="width: #{step * 10}%;")
+        span.sr-only= step * 10
+            | % Complete
+h3.gray-text.text-center Step #{step} of 9