gaspersic/freeCodeCamp
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

Merge pull request #777 from LumenTeun/mostly-bootstrap

Browse Source 
A lot of minor fixes and test case improvements to the Bootstrap waypoints.
This commit is contained in:
Quincy Larson
2015-05-31 13:42:39 -07:00
parent 8e5028fdcc b6b62da000
commit 9db7234d56
2 changed files with 37 additions and 34 deletions
Download Patch File Download Diff File Expand all files Collapse all files

4
seed_data/challenges/basic-html5-and-css.json
View File

@ -1039,7 +1039,7 @@
"tests": [ "tests": [
"assert($('a').attr('href').match(/catphotoapp.com/gi).length > 0, 'You need an <code>a</code> element that links to \"catphotoapp.com\".')", "assert($('a').attr('href').match(/catphotoapp.com/gi).length > 0, 'You need an <code>a</code> element that links to \"catphotoapp.com\".')",
"assert($('a').text().match(/cat\\sphotos/gi).length > 0, 'Your <code>a</code> element should have the anchor text of \"cat photos\"')", "assert($('a').text().match(/cat\\sphotos/gi).length > 0, 'Your <code>a</code> element should have the anchor text of \"cat photos\"')",
"assert($('a').parent().is('p'), 'Your anchor element should be wrapped within a paragraph element.')", "assert($('a[href=\\'http://www.catphotoapp.com\\']').parent().is('p'), 'Your anchor element should be wrapped within a paragraph element.')",
"assert($('p').text().match(/click\\shere\\sfor/gi), 'Your <code>p</code> element should have the text \"click here for\".')", "assert($('p').text().match(/click\\shere\\sfor/gi), 'Your <code>p</code> element should have the text \"click here for\".')",
"assert(editor.match(/<\\/p>/g).length > 2, 'Be sure that each of your <code>p</code> elements has a closing tag.')" "assert(editor.match(/<\\/p>/g).length > 2, 'Be sure that each of your <code>p</code> elements has a closing tag.')"
], ],
@ -2532,7 +2532,7 @@
}, },
{ {
"_id": "bad87fee1248bd9aedf08824", "_id": "bad87fee1248bd9aedf08824",
"name": "Waypoint: Add Different a Margin to Each Side of an Element", "name": "Waypoint: Add Different Margins to Each Side of an Element",
"difficulty": 0.068, "difficulty": 0.068,
"description": [ "description": [
"Give the green box a margin of 40 pixels on its top and left side, but only 20 pixels on its bottom and right side.", "Give the green box a margin of 40 pixels on its top and left side, but only 20 pixels on its bottom and right side.",

67
seed_data/challenges/bootstrap.json
View File

@ -180,8 +180,8 @@
"Bootstrap has its own button styles, which look much better than the plain HTML ones." "Bootstrap has its own button styles, which look much better than the plain HTML ones."
], ],
"tests": [ "tests": [
"assert($('.btn').length > 0, 'your new button should have the class \"btn\".');", "assert($('button').hasClass('btn'), 'Your new button should have the class \"btn\".')",
"assert(new RegExp('like this photo','gi').test($('.btn').text()), 'your button should have the text \"like this photo\"');" "assert(new RegExp('like this photo','gi').test($('button.btn').text()), 'Your button should have the text \"like this photo\".')"
], ],
"challengeSeed": [ "challengeSeed": [
"<link href='http://fonts.googleapis.com/css?family=Lobster' rel='stylesheet' type='text/css'>", "<link href='http://fonts.googleapis.com/css?family=Lobster' rel='stylesheet' type='text/css'>",
@ -260,11 +260,12 @@
"difficulty": 0.050, "difficulty": 0.050,
"description": [ "description": [
"Add Bootstrap's <code>btn-block</code> class to your Bootstrap button.", "Add Bootstrap's <code>btn-block</code> class to your Bootstrap button.",
"Normally, your buttons are only as wide as the text they contain. By making them <code>block elements</code>, your button will stretch to fill your page's entire horizontal space.", "Normally, your buttons are only as wide as the text they contain. By making them <code>block</code> elements, your button will stretch to fill your page's entire horizontal space.",
"Note that these buttons still need the <code>btn</code> class." "Note that these buttons still need the <code>btn</code> class."
], ],
"tests": [ "tests": [
"assert($('.btn-block').length > 0, 'your new button should have the class \"btn-block\".')" "assert($('button').hasClass('btn'), 'Your button should still have the class \"btn\".')",
"assert($('button').hasClass('btn-block'), 'Your button should have the class \"btn-block\".')"
], ],
"challengeSeed": [ "challengeSeed": [
"<link href='http://fonts.googleapis.com/css?family=Lobster' rel='stylesheet' type='text/css'>", "<link href='http://fonts.googleapis.com/css?family=Lobster' rel='stylesheet' type='text/css'>",
@ -348,8 +349,8 @@
"Note that this button will still need the <code>btn</code> class." "Note that this button will still need the <code>btn</code> class."
], ],
"tests": [ "tests": [
"assert($('.btn-primary').length > 0, 'Your new button should have the class \"btn-primary\".')", "assert($('button').hasClass('btn-primary'), 'Your button should have the class \"btn-primary\".')",
"assert($('.btn').length > 0, 'Your new button should have the class \"btn\".')" "assert($('button').hasClass('btn-block') && $('button').hasClass('btn'), 'Your button should still have the \"btn\" and \"btn-block\" classes.')"
], ],
"challengeSeed": [ "challengeSeed": [
"<link href='http://fonts.googleapis.com/css?family=Lobster' rel='stylesheet' type='text/css'>", "<link href='http://fonts.googleapis.com/css?family=Lobster' rel='stylesheet' type='text/css'>",
@ -428,13 +429,14 @@
"name": "Waypoint: Call out Optional Actions with Button Info", "name": "Waypoint: Call out Optional Actions with Button Info",
"difficulty": 0.052, "difficulty": 0.052,
"description": [ "description": [
"Create a new block-level Bootstrap button below your \"like\" button with the text \"Info\", and add Bootstrap's <code>btn-info</code> and <code>btn-block</code> classes to it.", "Create a new block-level Bootstrap button below your \"Like\" button with the text \"Info\", and add Bootstrap's <code>btn-info</code> and <code>btn-block</code> classes to it.",
"Bootstrap comes with several pre-defined colors for buttons. The <code>btn-info</code> class is used to call attention to optional actions that the user can take.", "Bootstrap comes with several pre-defined colors for buttons. The <code>btn-info</code> class is used to call attention to optional actions that the user can take.",
"Note that these buttons still need the <code>btn</code> and <code>btn-block</code> classes." "Note that these buttons still need the <code>btn</code> and <code>btn-block</code> classes."
], ],
"tests": [ "tests": [
"assert($('.btn-info').length > 0, 'your new button should have the class \"btn-info\".')", "assert($('button').hasClass('btn-info'), 'Your new button should have the class \"btn-info\".')",
"assert($('.btn-block').length > 1, 'Both of your Bootstrap buttons should have the class \"btn-block\".')" "assert($('button.btn-block.btn').length > 1, 'Both of your Bootstrap buttons should have the \"btn\" and \"btn-block\" classes.')",
"assert(new RegExp('info', 'gi').test($('button.btn-info').text()), 'Your new button should have the text \"Info\".')"
], ],
"challengeSeed": [ "challengeSeed": [
"<link href='http://fonts.googleapis.com/css?family=Lobster' rel='stylesheet' type='text/css'>", "<link href='http://fonts.googleapis.com/css?family=Lobster' rel='stylesheet' type='text/css'>",
@ -513,13 +515,14 @@
"name": "Waypoint: Warn your Users of a Dangerous Action", "name": "Waypoint: Warn your Users of a Dangerous Action",
"difficulty": 0.053, "difficulty": 0.053,
"description": [ "description": [
"Create a button with the text \"delete\" and give it the class <code>btn-danger</code>.", "Create a button with the text \"Delete\" and give it the class <code>btn-danger</code>.",
"Bootstrap comes with several pre-defined colors for buttons. The <code>btn-danger</code> class is the button color you'll use to notify users that the button performs a destructive action, such as deleting a cat photo.", "Bootstrap comes with several pre-defined colors for buttons. The <code>btn-danger</code> class is the button color you'll use to notify users that the button performs a destructive action, such as deleting a cat photo.",
"Note that these buttons still need the <code>btn</code> and <code>btn-block</code> classes." "Note that these buttons still need the <code>btn</code> and <code>btn-block</code> classes."
], ],
"tests": [ "tests": [
"assert($('.btn-danger').length > 0, 'Your new button should have the class \"btn-danger\".')", "assert($('button').hasClass('btn-danger'), 'Your new button should have the class \"btn-danger\".')",
"assert($('.btn-block').length > 1, 'Both of your Bootstrap buttons should have the class \"btn-block\".')" "assert($('button.btn-block.btn').length > 2, 'All of your Bootstrap buttons should have the \"btn\" and \"btn-block\" classes.')",
"assert(new RegExp('delete', 'gi').test($('button.btn-danger').text()), 'Your new button should have the text \"delete\".')"
], ],
"challengeSeed": [ "challengeSeed": [
"<link href='http://fonts.googleapis.com/css?family=Lobster' rel='stylesheet' type='text/css'>", "<link href='http://fonts.googleapis.com/css?family=Lobster' rel='stylesheet' type='text/css'>",
@ -608,8 +611,8 @@
"The <code>row</code> class is applied to a <code>div</code>, and the buttons themselves can be wrapped within it." "The <code>row</code> class is applied to a <code>div</code>, and the buttons themselves can be wrapped within it."
], ],
"tests": [ "tests": [
"assert($('.row').length > 0, 'Your new button should be wrapped within a div with the class \"row\".')", "assert($('div.row:has(button)').length > 0, 'Your buttons should be wrapped within a div with the class \"row\".')",
"assert($('.col-xs-4').length > 2, 'Each of your bootstrap buttons should be wrapped in a div with the class \"col-xs-4\".')" "assert($('div.col-xs-4').length > 2, 'Each of your Bootstrap buttons should be wrapped in a div with the class \"col-xs-4\".')"
], ],
"challengeSeed": [ "challengeSeed": [
"<link href='http://fonts.googleapis.com/css?family=Lobster' rel='stylesheet' type='text/css'>", "<link href='http://fonts.googleapis.com/css?family=Lobster' rel='stylesheet' type='text/css'>",
@ -698,7 +701,7 @@
"assert(!$('h2').hasClass('red-text'), 'You h2 element should no longer have the class \"red-text\".')", "assert(!$('h2').hasClass('red-text'), 'You h2 element should no longer have the class \"red-text\".')",
"assert($('h2').hasClass('text-primary'), 'You h2 element should now have the class \"text-primary\".')", "assert($('h2').hasClass('text-primary'), 'You h2 element should now have the class \"text-primary\".')",
"assert(!$('p').css('font-family').match(/monospace/i), 'Your paragraph elements should no longer use the font \"Monospace\".')", "assert(!$('p').css('font-family').match(/monospace/i), 'Your paragraph elements should no longer use the font \"Monospace\".')",
"assert($('.img-responsive').length > 1, 'Remove the \"smaller-image\" class from your top image and replace it with the \"img-responsive\" class.')" "assert($('img').hasClass('img-responsive') && !$('img').hasClass('smaller-image'), 'Remove the \"smaller-image\" class from your top image and replace it with the \"img-responsive\" class.')"
], ],
"challengeSeed": [ "challengeSeed": [
"<link href='http://fonts.googleapis.com/css?family=Lobster' rel='stylesheet' type='text/css'>", "<link href='http://fonts.googleapis.com/css?family=Lobster' rel='stylesheet' type='text/css'>",
@ -788,7 +791,7 @@
"name": "Waypoint: Create a Custom Heading", "name": "Waypoint: Create a Custom Heading",
"difficulty": 0.056, "difficulty": 0.056,
"description": [ "description": [
"Wrap your first image and your h2 element within a single <code>&#60;div class='row'&#62;</code> element. Wrap your h2 text within a <code>&#60;div class='col-xs-8'&#62;</code> and your image in a <code>&#60;div class='col-xs-4'&#62;</code> so that they are on the same line.", "Wrap your first image and your <code>h2</code> element within a single <code>&#60;div class='row'&#62;</code> element. Wrap your <code>h2</code> text within a <code>&#60;div class='col-xs-8'&#62;</code> and your image in a <code>&#60;div class='col-xs-4'&#62;</code> so that they are on the same line.",
"We will make a simple heading for our Cat Photo App by putting them in the same row.", "We will make a simple heading for our Cat Photo App by putting them in the same row.",
"Remember, Bootstrap uses a responsive grid system, which makes it easy to put elements into rows and specify each element's relative width. Most of Bootstrap's classes can be applied to a <code>div</code> element.", "Remember, Bootstrap uses a responsive grid system, which makes it easy to put elements into rows and specify each element's relative width. Most of Bootstrap's classes can be applied to a <code>div</code> element.",
"Here's a diagram of how Bootstrap's 12-column grid layout works:", "Here's a diagram of how Bootstrap's 12-column grid layout works:",
@ -798,9 +801,9 @@
"Notice how the image is now just the right size to fit along the text?" "Notice how the image is now just the right size to fit along the text?"
], ],
"tests": [ "tests": [
"assert($('.row').length > 1, 'Your h2 and top image elements should both be wrapped together within a div with the class \"row\".')", "assert($('div.row:has(h2)').length > 0 && $('div.row:has(img)').length > 0, 'Your h2 and top image elements should both be wrapped together within a div with the class \"row\".')",
"assert($('.col-xs-4').length > 3, 'Wrap your top image inside a div with the class \"col-xs-4\".')", "assert($('div.col-xs-4:has(img)').length > 0, 'Wrap your top image inside a div with the class \"col-xs-4\".')",
"assert($('.col-xs-8').length > 0, 'Wrap your h2 element inside a div with the class \"col-xs-8\".')" "assert($('div.col-xs-8:has(h2)').length > 0, 'Wrap your h2 element inside a div with the class \"col-xs-8\".')"
], ],
"challengeSeed": [ "challengeSeed": [
"<link href='http://fonts.googleapis.com/css?family=Lobster' rel='stylesheet' type='text/css'>", "<link href='http://fonts.googleapis.com/css?family=Lobster' rel='stylesheet' type='text/css'>",
@ -881,7 +884,7 @@
"Go ahead and add a <code>&#60;i class=\"fa fa-thumbs-up\"&#62;&#60;/i&#62;</code> within your like button's element." "Go ahead and add a <code>&#60;i class=\"fa fa-thumbs-up\"&#62;&#60;/i&#62;</code> within your like button's element."
], ],
"tests": [ "tests": [
"assert($('.fa-thumbs-up').length > 0, 'Add a <code>i</code> element with the classes \"fa\" and \"fa-thumbs-up\".')", "assert($('i').hasClass('fa fa-thumbs-up'), 'Add an <code>i</code> element with the classes \"fa\" and \"fa-thumbs-up\".')",
"assert($('button').children('i').length > 0, 'Wrap your <code>i</code> element within your <code>button</code> element.')", "assert($('button').children('i').length > 0, 'Wrap your <code>i</code> element within your <code>button</code> element.')",
"assert(editor.match(/<\\/i>/g), 'Be sure to close your <code>i</code> element with a closing tag.')" "assert(editor.match(/<\\/i>/g), 'Be sure to close your <code>i</code> element with a closing tag.')"
], ],
@ -968,8 +971,8 @@
"Add <code>&#60;i class=\"fa fa-info-circle\"&#62;&#60;/i&#62;</code> within your info button's element, and a <code>&#60;i class=\"fa fa-trash\"&#62;&#60;/i&#62;</code> within your delete button." "Add <code>&#60;i class=\"fa fa-info-circle\"&#62;&#60;/i&#62;</code> within your info button's element, and a <code>&#60;i class=\"fa fa-trash\"&#62;&#60;/i&#62;</code> within your delete button."
], ],
"tests": [ "tests": [
"assert($('.fa-trash').length > 0, 'You should add a <code>&#60;i class=\"fa fa-trash\"&#62;&#60;/i&#62;</code> within your delete button element.')", "assert($('i').hasClass('fa fa-trash'), 'You should add a <code>&#60;i class=\"fa fa-trash\"&#62;&#60;/i&#62;</code> within your delete button element.')",
"assert($('.fa-info-circle').length > 0, 'You should add a <code>&#60;i class=\"fa fa-info-circle\"&#62;&#60;/i&#62;</code> within your info button element.')" "assert($('i').hasClass('fa fa-info-circle'), 'You should add a <code>&#60;i class=\"fa fa-info-circle\"&#62;&#60;/i&#62;</code> within your info button element.')"
], ],
"challengeSeed": [ "challengeSeed": [
"<link href='http://fonts.googleapis.com/css?family=Lobster' rel='stylesheet' type='text/css'>", "<link href='http://fonts.googleapis.com/css?family=Lobster' rel='stylesheet' type='text/css'>",
@ -1053,8 +1056,8 @@
"You can use Bootstrap's <code>col-xs-*</code> classes on form elements, too! This way, our radio buttons will be evenly spread out across the page, regardless of how wide the screen resolution is." "You can use Bootstrap's <code>col-xs-*</code> classes on form elements, too! This way, our radio buttons will be evenly spread out across the page, regardless of how wide the screen resolution is."
], ],
"tests": [ "tests": [
"assert($('.row').length > 2, 'Wrap your all of your radio buttons inside one div with the class \"row\".')", "assert($('div.row:has(input[type=\\'radio\\'])').length > 0, 'Wrap all of your radio buttons inside one div with the class \"row\".')",
"assert($('.col-xs-6').length > 1, 'Wrap each of your radio buttons inside its own div with the class \"col-xs-6\".')" "assert($('div.col-xs-6:has(input[type=\\'radio\\'])').length > 1, 'Wrap each of your radio buttons inside its own div with the class \"col-xs-6\".')"
], ],
"challengeSeed": [ "challengeSeed": [
"<link href='http://fonts.googleapis.com/css?family=Lobster' rel='stylesheet' type='text/css'>", "<link href='http://fonts.googleapis.com/css?family=Lobster' rel='stylesheet' type='text/css'>",
@ -1138,8 +1141,8 @@
"You can use Bootstrap's <code>col-xs-*</code> classes on form elements, too! This way, our checkboxes will be evenly spread out across the page, regardless of how wide the screen resolution is." "You can use Bootstrap's <code>col-xs-*</code> classes on form elements, too! This way, our checkboxes will be evenly spread out across the page, regardless of how wide the screen resolution is."
], ],
"tests": [ "tests": [
"assert($('.row').length > 3, 'Wrap your all of your checkboxes inside one div with the class \"row\".')", "assert($('div.row:has(input[type=\\'checkbox\\'])').length > 0, 'Wrap all of your checkboxes inside one div with the class \"row\".')",
"assert($('.col-xs-4').length > 6, 'Wrap each of your checkboxes inside its own div with the class \"col-xs-4\".')" "assert($('div.col-xs-4:has(input[type=\\'checkbox\\'])').length > 2, 'Wrap each of your checkboxes inside its own div with the class \"col-xs-4\".')"
], ],
"challengeSeed": [ "challengeSeed": [
"<link href='http://fonts.googleapis.com/css?family=Lobster' rel='stylesheet' type='text/css'>", "<link href='http://fonts.googleapis.com/css?family=Lobster' rel='stylesheet' type='text/css'>",
@ -1229,9 +1232,9 @@
"Give your form's text input field a class of <code>form-control</code>. Give your form's submit button the classes <code>btn btn-primary</code> and give it the Font Awesome icon of <code>fa-paper-plane</code>." "Give your form's text input field a class of <code>form-control</code>. Give your form's submit button the classes <code>btn btn-primary</code> and give it the Font Awesome icon of <code>fa-paper-plane</code>."
], ],
"tests": [ "tests": [
"assert($('.btn-primary').length > 1, 'Give the submit button in your form the classes \"btn btn-primary\".')", "assert($('button[type=\\'submit\\']').hasClass('btn btn-primary'), 'Give the submit button in your form the classes \"btn btn-primary\".')",
"assert($('.fa-paper-plane').length > 0, 'Add a <code>&#60;i class=\"fa fa-paper-plane\"&#62;&#60;/i&#62;</code> within your submit button element.')", "assert($('button[type=\\'submit\\']:has(i.fa.fa-paper-plane)').length > 0, 'Add a <code>&#60;i class=\"fa fa-paper-plane\"&#62;&#60;/i&#62;</code> within your submit button element.')",
"assert($('.form-control').length > 0, 'Give the text input field in your form the class \"form-control\".')" "assert($('input[type=\\'text\\']').hasClass('form-control'), 'Give the text input field in your form the class \"form-control\".')"
], ],
"challengeSeed": [ "challengeSeed": [
"<link href='http://fonts.googleapis.com/css?family=Lobster' rel='stylesheet' type='text/css'>", "<link href='http://fonts.googleapis.com/css?family=Lobster' rel='stylesheet' type='text/css'>",
@ -1332,9 +1335,9 @@
"This is the last challenge we'll do for our Cat Photo App for now. We hope you've enjoyed learning Font Awesome, Bootstrap, and responsive design!" "This is the last challenge we'll do for our Cat Photo App for now. We hope you've enjoyed learning Font Awesome, Bootstrap, and responsive design!"
], ],
"tests": [ "tests": [
"assert($('.row').length > 4, 'Wrap your form submission button and text area in a div with class \"row\".')", "assert($('div.row:has(input[type=\\'text\\'])').length > 0 && $('div.row:has(button[type=\\'submit\\'])').length > 0, 'Wrap your form submission button and text area in a div with class \"row\".')",
"assert($('.col-xs-5').length > 0, 'Wrap your form submission button in a div with the class \"col-xs-5\".')", "assert($('div.col-xs-5:has(button[type=\\'submit\\'])').length > 0, 'Wrap your form submission button in a div with the class \"col-xs-5\".')",
"assert($('.col-xs-7').length > 0, 'Wrap your form text area in a div with the class \"col-xs-7\".')" "assert($('div.col-xs-7:has(input[type=\\'text\\'])').length > 0, 'Wrap your form text area in a div with the class \"col-xs-7\".')"
], ],
"challengeSeed": [ "challengeSeed": [
"<link href='http://fonts.googleapis.com/css?family=Lobster' rel='stylesheet' type='text/css'>", "<link href='http://fonts.googleapis.com/css?family=Lobster' rel='stylesheet' type='text/css'>",