container, which is turned off by default; that is,
- * display is set to “none” in the CSS. This function simply reveals that container.
- */
-function showQuestionWhereWasLincolnBorn() {
- 'use strict';
-
- whereWasLincolnBornQuestionContainer.style.display = 'block';
-}
-
-/**
- * SHOW QUESTION “WHO ASSASSINATED LINCOLN?”
- *
- * Firing off this function displays the container for the question “Who Assassinated
- * Lincoln?”, then removes the “Submit” button associated with the question “Where
- * Was Lincoln Born?” and the “Next Question” button that is shown when the user
- * answers the “Where Was Lincoln Born?” question correctly. The drop down menu
- * showing the location options of Lincoln’s birth is disabled, also.
- */
-function showQuestionWhoAssassinatedLincoln() {
- 'use strict';
-
- whoAssassinatedLincolnQuestionContainer.style.display = 'block';
- submitLincolnsBirthPlace.style.display = 'none';
- moveToQuestion2.style.display = 'none';
- lincolnsBirthPlace.setAttribute('disabled', 'disabled');
-}
-
-/**
- * SHOW RESULTS
- *
- * This function does for the question “Who Assassinated Lincoln?” what the function
- * showQuestionWhoAssassinatedLincoln() does for the question “Where Was Lincoln
- * Born?” Except, however, that it doesn’t trigger the display for a new question.
- *
- * You can choose to display some results about how the user answered these
- * questions. For example, how long they took to take this quiz, or how many times
- * they chose a drop down option before choosing the correct answer.
- *
- * In other words, this is a homework function that you might want to modify.
- */
-function showResults() {
- 'use strict';
-
- submitNameOfLincolnsAssassin.style.display = 'none';
- moveToQuestion3.style.display = 'none';
- lincolnsAssassin.setAttribute('disabled', 'disabled');
-}
-
-/**
- * CHECK ANSWER TO LINCOLN’S BIRTH PLACE QUESTION
- *
- * The first thing this function does is create a reference to the aragraph child
- * of the element on line 42 of “index.html,” because this is where I’ll be
- * rendering feedback on the answer the user submits.
- *
- * The switch statement is checking the value submitted by the element of
- * the form bound to the question “Where Was Lincoln Born?” In each of the three
- * cases, “lansing,” “hodgenville,” and “washington,” the transition class is removed
- * from the element (line 27 in the HTML file) so that a new transition can
- * be included later in each of the three cases.
- *
- * Also, in each of the three cases, following the removal of the class “transition,”
- * a timer is set to run after 250 milliseconds that fills the paragraph child of the
- * section element. The lines containing p.innerHTML are self-explanatory.
- *
- * Within the same timer, the transition class is added anew.
- *
- * In the “hodgenville” case, which is the correct answer to the question regarding
- * the location of Lincoln’s birth place, a button with the text “Next Question” is
- * set to display, and a second timer is added for the transition of that button.
- */
-function checkAnswerToLincolnsBirthPlaceQuestion() {
- 'use strict';
-
- var aside =
- whereWasLincolnBornQuestionContainer.getElementsByTagName('aside')[0],
- p = aside.getElementsByTagName('p')[0],
- moveToQuestion2 = document.getElementById('move-to-question-2');
-
- switch (lincolnsBirthPlace.value) {
- case 'lansing':
- aside.classList.remove('transition');
- setTimeout(
- function () {
- p.innerHTML = 'DC ' +
- 'eventually becomes his home, Lincoln was not born here.';
- aside.setAttribute('class', 'transition');
- },
- 250
- );
-
- break;
- }
-}
-
-/**
- * CHECK ANSWER TO LINCOLN’S ASSASSINATION QUESTION
- *
- * This function works exactly as the previous function, but for the with
- * ID “who-assassinated-lincoln-question-container.”
- */
-function checkAnswerToLincolnsAssassinQuestion() {
- 'use strict';
-
- var aside =
- whoAssassinatedLincolnQuestionContainer.getElementsByTagName('aside')[0],
- p = aside.getElementsByTagName('p')[0],
- moveToQuestion3 = document.getElementById('move-to-question-3');
-
- switch (lincolnsAssassin.value) {
- case 'lee-oswald':
- aside.classList.remove('transition');
- setTimeout(
- function () {
- p.innerHTML = '
) with the input entered in the form whose container
- * is on line 14.
- *
- * If the input entered by the user into the form is empty, an error message is
- * displayed. Otherwise,
- *
- * 1. greet the user
- * 2. hide the form the user just used to enter her/his name
- * 3. display the element, whose display is set to “none” by default
- * 4. display the first question, Where Was Lincoln Born?
- * 5. and, finally, wait 50 milliseconds before adding a class called “transition”
- * to the paragraph that greets the user (
).
- */
-function setUsersName() {
- 'use strict';
-
- if (usersName.value === '') {
- showUsersName.innerHTML = 'Nothing ' +
- 'entered. Please try again. ';
-
- } else {
- showUsersName.textContent = 'Hi, ' + usersName.value;
- nameContainer.style.display = 'none';
- showMain();
- showQuestionWhereWasLincolnBorn();
-
- setTimeout(
- function () {
- showUsersName.setAttribute('class', 'transition');
- },
- 50
- );
- }
-}
diff --git a/dev/scripts/03-main.js b/dev/scripts/03-main.js
index 126ecca..e69de29 100644
--- a/dev/scripts/03-main.js
+++ b/dev/scripts/03-main.js
@@ -1,62 +0,0 @@
-/**
- * ONLOAD
- *
- * This function binds all the global variables established at the beginning of this
- * JavaScript file to all the ID attributes in “index.html.” It also binds the click
- * event listeners to each of the buttons found in “index.html.”
- */
-window.onload = function () {
- 'use strict';
-
- lincolnsBirthPlace = document.getElementById('lincolns-birth-place');
- lincolnsAssassin = document.getElementById('lincolns-assassin');
- main = document.getElementsByTagName('main')[0];
- moveToQuestion2 = document.getElementById('move-to-question-2');
- moveToQuestion3 = document.getElementById('move-to-question-3');
- nameContainer = document.getElementById('name-container');
- showUsersName = document.getElementById('show-users-name');
- submitLincolnsBirthPlace = document.getElementById(
- 'submit-lincolns-birth-place'
- );
- submitNameOfLincolnsAssassin = document.getElementById(
- 'submit-name-of-lincolns-assassin'
- );
- submitUsersName = document.getElementById('submit-users-name');
- usersName = document.getElementById('users-name');
- whereWasLincolnBornQuestionContainer = document.getElementById(
- 'where-was-lincoln-born-question-container'
- );
- whoAssassinatedLincolnQuestionContainer = document.getElementById(
- 'who-assassinated-lincoln-question-container'
- );
-
- submitUsersName.addEventListener(
- 'click',
- setUsersName,
- false
- );
-
- submitNameOfLincolnsAssassin.addEventListener(
- 'click',
- checkAnswerToLincolnsAssassinQuestion,
- false
- );
-
- submitLincolnsBirthPlace.addEventListener(
- 'click',
- checkAnswerToLincolnsBirthPlaceQuestion,
- false
- );
-
- moveToQuestion2.addEventListener(
- 'click',
- showQuestionWhoAssassinatedLincoln,
- false
- );
-
- moveToQuestion3.addEventListener(
- 'click',
- showResults,
- false
- );
-};
diff --git a/dev/scripts/grid.js b/dev/scripts/grid.js
deleted file mode 100644
index 5f97078..0000000
--- a/dev/scripts/grid.js
+++ /dev/null
@@ -1,56 +0,0 @@
-var body = document.querySelector('body'),
- firstChildOfBody = body.firstElementChild,
- gridLayer = document.createElement('div'),
- gridChoice = 0;
-
-gridLayer.setAttribute('id', 'column-baseline-grid');
-
-if (null !== firstChildOfBody) {
- body.insertBefore(gridLayer, firstChildOfBody);
-} else {
- body.textContent = 'The body element does not have a child element.';
-}
-
-document.onkeydown = function (evnt) {
- if (27 === evnt.keyCode) {
- switch (gridChoice) {
- case 0:
- gridLayer.classList.add('column-grid');
- gridLayer.classList.remove('user-supplied-bg-image');
-
- break;
-
- case 1:
- gridLayer.classList.remove('column-grid');
- gridLayer.classList.add('modular-grid');
-
- break;
-
- case 2:
- gridLayer.classList.remove('modular-grid');
- gridLayer.classList.add('baseline-grid');
-
- break;
-
- case 3:
- gridLayer.classList.remove('baseline-grid');
- gridLayer.classList.add('all-grids');
-
- break;
-
- case 4:
- gridLayer.classList.remove('all-grids');
- gridLayer.classList.add('user-supplied-bg-image');
-
- break;
-
- case 5:
- gridLayer.classList.remove('user-supplied-bg-image');
- break;
- }
-
- if (gridChoice++ === 5) {
- gridChoice = 0;
- }
- }
-};
diff --git a/dev/styles/01-fonts/_index.scss b/dev/styles/01-fonts/_index.scss
index a6243aa..679dbae 100755
--- a/dev/styles/01-fonts/_index.scss
+++ b/dev/styles/01-fonts/_index.scss
@@ -3,5 +3,3 @@
//
// Import any fonts here, since they will be used by the entirety of this project.
//
-@import url("http://fonts.googleapis.com/css?family=Hind:400,700&subset=latin,latin-ext");
-@import url("http://maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css");
diff --git a/dev/styles/03-base/_base.scss b/dev/styles/03-base/_base.scss
index 4d9b9c3..97bcfa5 100755
--- a/dev/styles/03-base/_base.scss
+++ b/dev/styles/03-base/_base.scss
@@ -9,7 +9,6 @@ body {
font: 1.1em / 1.45 "Hind", sans-serif;
font-size: 1.1em;
color: white;
- width: 960px;
margin: 0 auto;
padding: 0;
}
@@ -19,61 +18,3 @@ header {
padding: 0;
margin: 0;
}
-
-abbr {
- cursor: help;
- border-bottom: 1px dotted white;
-}
-
-main {
- background-color: $color-background;
- padding: 25px;
- display: none;
- opacity: 0;
- transition: 2s;
-
- p {
- margin: 0 0 25px;
- }
-
- &.transition {
- opacity: 1;
- }
- section {
- display: none;
- margin: 20px 0;
-
- &>div {
- display: table-cell;
- width: 590px;
-
- select {
- margin: 10px 10px 10px 0;
- }
- }
-
- &>aside {
- display: table-cell;
- text-align: right;
- opacity: 0;
- width: 370px;
- transition: 250ms;
-
- &.transition {
- opacity: 1;
- }
- }
-
- &>button {
- opacity: 0;
- display: none;
- float: right;
- width: 100px;
- transition: 250ms;
-
- &.transition {
- opacity: 1;
- }
- }
- }
-}
diff --git a/dev/styles/06-states/_grid.scss b/dev/styles/06-states/_grid.scss
deleted file mode 100644
index 17290ab..0000000
--- a/dev/styles/06-states/_grid.scss
+++ /dev/null
@@ -1,91 +0,0 @@
-// =============================================================================
-// Grid-specific variables.
-// =============================================================================
-$grid-width: 60px; // 60 pixels
-$grid-gutter: $grid-width / 3; // 25 pixels
-$color-grid-column: rgba(200, 0, 0, 0.2);
-$color-grid-baseline: rgba(56, 255, 255, 0.8);
-
-// =============================================================================
-// The file `modular-grid.png` below is a placeholder for the image you’d like
-// to use for development. Make sure to update the value to the `height`
-// variable to the height of your image.
-// =============================================================================
-$users-comparison-bg-image: url('../img/modular-grid.png');
-$users-comparison-bg-image--height: 3111px;
-$users-comparison-bg-image--position-x: center;
-$users-comparison-bg-image--position-y: top;
-$users-comparison-bg-image--size-x: auto;
-$users-comparison-bg-image--size-y: auto;
-$users-comparison-bg-image--attachment: scroll;
-$users-comparison-bg-image--repeat: no-repeat;
-$users-comparison-bg-image--color: transparent;
-
-#column-baseline-grid {
- position: absolute;
- z-index: -1;
- top: 0;
- left: 0;
- width: 100%;
- height: $users-comparison-bg-image--height;
-}
-
-.all-grids {
- background-image: $users-comparison-bg-image,
- linear-gradient(90deg, $color-grid-column $grid-width,
- transparent 0px),
- linear-gradient(0deg, rgba(0, 0, 0, 0) 95%,
- $color-grid-baseline 100%);
-
- background-position: $users-comparison-bg-image--position-x
- $users-comparison-bg-image--position-y,
- 0% 0%,
- 0% 0%;
-
- background-size: $users-comparison-bg-image--size-x
- $users-comparison-bg-image--size-y,
- ($grid-width + $grid-gutter) 100%,
- 100% $grid-leading;
-
- background-attachment: $users-comparison-bg-image--attachment,
- fixed,
- fixed;
-
- background-repeat: $users-comparison-bg-image--repeat,
- no-repeat,
- no-repeat;
-
- background-color: $users-comparison-bg-image--color,
- transparent;
-}
-
-.modular-grid {
- background-image: linear-gradient(90deg, $color-grid-column $grid-width,
- transparent 0px),
- linear-gradient(0deg, rgba(0, 0, 0, 0) 95%, $color-grid-baseline 100%);
- background-size: ($grid-width + $grid-gutter) 100%,
- 100% $grid-leading;
-}
-
-.column-grid {
- background-image: linear-gradient(90deg, $color-grid-column $grid-width,
- transparent 0px);
- background-size: ($grid-width + $grid-gutter) 100%;
-}
-
-.baseline-grid {
- background-image: linear-gradient(0deg, rgba(0, 0, 0, 0) 95%,
- $color-grid-baseline 100%);
- background-size: 100% $grid-leading;
-}
-
-.user-supplied-bg-image {
- background-image: $users-comparison-bg-image;
- background-position: $users-comparison-bg-image--position-x
- $users-comparison-bg-image--position-y;
- background-size: $users-comparison-bg-image--size-x
- $users-comparison-bg-image--size-y;
- background-attachment: $users-comparison-bg-image--attachment;
- background-repeat: $users-comparison-bg-image--repeat;
- background-color: $users-comparison-bg-image--color;
-}
diff --git a/dev/styles/06-states/_index-for-dev.scss b/dev/styles/06-states/_index-for-dev.scss
index 1da893d..0084a52 100644
--- a/dev/styles/06-states/_index-for-dev.scss
+++ b/dev/styles/06-states/_index-for-dev.scss
@@ -5,4 +5,3 @@
// in this file.
//
@import 'states';
-@import 'grid';
diff --git a/dev/styles/06-states/_states.scss b/dev/styles/06-states/_states.scss
index b9c382e..e69de29 100644
--- a/dev/styles/06-states/_states.scss
+++ b/dev/styles/06-states/_states.scss
@@ -1,41 +0,0 @@
-#name-container {
- background-color: $color-background;
- color: white;
- padding: 30px;
- height: 40px;
- position: relative;
-
- input {
- width: 100px;
- margin: 0 10px;
- }
-}
-
-#show-users-name {
- font-size: 1.4em;
- text-align: center;
- color: rgba(255,255,255,0);
- transition: 500ms;
-
- &.transition {
- color: rgba(255,255,255,1);
- }
-}
-
-.error-highlight {
- color: red;
- background-color: rgba(255,255,255,0.7);
- padding: 2px 10px;
-}
-
-[class~="fa"] {
- font-size: 1.7em;
-}
-
-.fa-remove {
- color: red;
-}
-
-.fa-check {
- color: green;
-}
diff --git a/gulpfile.js b/gulpfile.js
index 634f011..2bbcf30 100644
--- a/gulpfile.js
+++ b/gulpfile.js
@@ -371,53 +371,54 @@ gulp.task('build', [
*
* Finally, changes to images also trigger a browser reload.
*/
-gulp.task('serve', ['compileCSSForDev', 'compileJSForDev', 'lintJS', 'validateHTML'],
- function () {
- 'use strict';
-
- browserSync({
- notify: true,
- port: 9000,
- reloadDelay: 100,
- browser: browserChoice,
- server: {
- baseDir: [
- config.baseFolders.tmp,
- config.baseFolders.dev,
- config.baseFolders.dev + config.scaffoldFolders.html
- ]
- }
- });
-
- gulp.watch(config.baseFolders.dev +
- config.scaffoldFolders.js + '*.js',
- ['compileJSForDev', 'lintJS']).on(
- 'change',
- reload
- );
-
- gulp.watch(config.baseFolders.dev +
- config.scaffoldFolders.images + '**/*').on(
- 'change',
- reload
- );
-
- gulp.watch([config.baseFolders.dev +
- config.scaffoldFolders.html + '**/*.html'],
- ['validateHTML']).on(
- 'change',
- reload
- );
-
- gulp.watch(config.baseFolders.dev +
- config.scaffoldFolders.styles + '**/*.scss',
- ['compileCSSForDev']).on(
- 'change',
- reload
- );
- });
+ gulp.task('serve', ['compileCSSForDev', 'compileJSForDev', 'lintJS', 'validateHTML'],
+ function () {
+ 'use strict';
+
+ browserSync({
+ notify: true,
+ port: 9000,
+ reloadDelay: 100,
+ browser: browserChoice,
+ server: {
+ baseDir: [].concat(
+ config.baseFolders.libs,
+ config.baseFolders.tmp,
+ config.baseFolders.dev,
+ config.baseFolders.dev + config.scaffoldFolders.html
+ )
+ }
+ });
+
+ gulp.watch(config.baseFolders.dev +
+ config.scaffoldFolders.js + '*.js',
+ ['compileJSForDev', 'lintJS']).on(
+ 'change',
+ reload
+ );
+
+ gulp.watch(config.baseFolders.dev +
+ config.scaffoldFolders.images + '**/*').on(
+ 'change',
+ reload
+ );
+
+ gulp.watch([config.baseFolders.dev +
+ config.scaffoldFolders.html + '**/*.html'],
+ ['validateHTML']).on(
+ 'change',
+ reload
+ );
+
+ gulp.watch(config.baseFolders.dev +
+ config.scaffoldFolders.styles + '**/*.scss',
+ ['compileCSSForDev']).on(
+ 'change',
+ reload
+ );
+});
-/**
+ /**
* CLEAN
*
* This task deletes the folders pointed to by the config.baseFolders.tmp and
@@ -425,57 +426,57 @@ gulp.task('serve', ['compileCSSForDev', 'compileJSForDev', 'lintJS', 'validateHT
* Gulp creates them as temporary folders during the serve process and via the build
* task.
*/
-gulp.task('clean', function () {
- 'use strict';
-
- var fs = require('fs'),
- i,
- expendableFolders = [config.baseFolders.tmp, config.baseFolders.prod];
-
- for (i = 0; i < expendableFolders.length; i += 1) {
- try {
- fs.accessSync(expendableFolders[i], fs.F_OK);
- process.stdout.write('\n\tThe ' + colors.green + expendableFolders[i] +
- colors.default + ' directory was found and ' + colors.green +
- 'will' + colors.default + ' be deleted.\n');
- del(expendableFolders[i]);
- } catch (error) {
- if (error) {
- process.stdout.write('\n\tThe ' + colors.red +
- expendableFolders[i] + colors.default +
- ' directory does ' + colors.red + 'not' + colors.default +
- ' exist or is ' + colors.red + 'not' + colors.default +
- ' accessible.\n');
- }
- }
- }
-
- process.stdout.write('\n');
-});
-
-/**
+ gulp.task('clean', function () {
+ 'use strict';
+
+ var fs = require('fs'),
+ i,
+ expendableFolders = [config.baseFolders.tmp, config.baseFolders.prod];
+
+ for (i = 0; i < expendableFolders.length; i += 1) {
+ try {
+ fs.accessSync(expendableFolders[i], fs.F_OK);
+ process.stdout.write('\n\tThe ' + colors.green + expendableFolders[i] +
+ colors.default + ' directory was found and ' + colors.green +
+ 'will' + colors.default + ' be deleted.\n');
+ del(expendableFolders[i]);
+ } catch (error) {
+ if (error) {
+ process.stdout.write('\n\tThe ' + colors.red +
+ expendableFolders[i] + colors.default +
+ ' directory does ' + colors.red + 'not' + colors.default +
+ ' exist or is ' + colors.red + 'not' + colors.default +
+ ' accessible.\n');
+ }
+ }
+ }
+
+ process.stdout.write('\n');
+ });
+
+ /**
* DEFAULT
*
* This task does nothing but list the available tasks in this file.
*/
-gulp.task('default', function () {
- 'use strict';
-
- var exec = require('child_process').exec;
-
- exec('gulp --tasks', function (error, stdout, stderr) {
- if (null !== error) {
- process.stdout.write('An error was likely generated when invoking ' +
- 'the `exec` program in the default task.');
- }
-
- if ('' !== stderr) {
- process.stdout.write('Content has been written to the stderr stream ' +
- 'when invoking the `exec` program in the default task.');
- }
-
- process.stdout.write('\n\tThis default task does ' + colors.red +
- 'nothing' + colors.default + ' but generate this message. The ' +
- 'available tasks are:\n\n' + stdout);
- });
-});
+ gulp.task('default', function () {
+ 'use strict';
+
+ var exec = require('child_process').exec;
+
+ exec('gulp --tasks', function (error, stdout, stderr) {
+ if (null !== error) {
+ process.stdout.write('An error was likely generated when invoking ' +
+ 'the `exec` program in the default task.');
+ }
+
+ if ('' !== stderr) {
+ process.stdout.write('Content has been written to the stderr stream ' +
+ 'when invoking the `exec` program in the default task.');
+ }
+
+ process.stdout.write('\n\tThis default task does ' + colors.red +
+ 'nothing' + colors.default + ' but generate this message. The ' +
+ 'available tasks are:\n\n' + stdout);
+ });
+ });