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": [
"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').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(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",
"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,
"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.",

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."
],
"tests": [
"assert($('.btn').length > 0, '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($('button').hasClass('btn'), 'Your new button should have the class \"btn\".')",
"assert(new RegExp('like this photo','gi').test($('button.btn').text()), 'Your button should have the text \"like this photo\".')"
],
"challengeSeed": [
"<link href='http://fonts.googleapis.com/css?family=Lobster' rel='stylesheet' type='text/css'>",
@ -260,11 +260,12 @@
"difficulty": 0.050,
"description": [
"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."
],
"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": [
"<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."
],
"tests": [
"assert($('.btn-primary').length > 0, 'Your new button should have the class \"btn-primary\".')",
"assert($('.btn').length > 0, 'Your new button should have the class \"btn\".')"
"assert($('button').hasClass('btn-primary'), 'Your button should have the class \"btn-primary\".')",
"assert($('button').hasClass('btn-block') && $('button').hasClass('btn'), 'Your button should still have the \"btn\" and \"btn-block\" classes.')"
],
"challengeSeed": [
"<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",
"difficulty": 0.052,
"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.",
"Note that these buttons still need the <code>btn</code> and <code>btn-block</code> classes."
],
"tests": [
"assert($('.btn-info').length > 0, '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').hasClass('btn-info'), 'Your new button should have the class \"btn-info\".')",
"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": [
"<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",
"difficulty": 0.053,
"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.",
"Note that these buttons still need the <code>btn</code> and <code>btn-block</code> classes."
],
"tests": [
"assert($('.btn-danger').length > 0, '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').hasClass('btn-danger'), 'Your new button should have the class \"btn-danger\".')",
"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": [
"<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."
],
"tests": [
"assert($('.row').length > 0, 'Your new button 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.row:has(button)').length > 0, 'Your buttons should be wrapped within a div with the class \"row\".')",
"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": [
"<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('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($('.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": [
"<link href='http://fonts.googleapis.com/css?family=Lobster' rel='stylesheet' type='text/css'>",
@ -788,7 +791,7 @@
"name": "Waypoint: Create a Custom Heading",
"difficulty": 0.056,
"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.",
"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:",
@ -798,9 +801,9 @@
"Notice how the image is now just the right size to fit along the text?"
],
"tests": [
"assert($('.row').length > 1, '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($('.col-xs-8').length > 0, 'Wrap your h2 element inside a div with the class \"col-xs-8\".')"
"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($('div.col-xs-4:has(img)').length > 0, 'Wrap your top image inside a div with the class \"col-xs-4\".')",
"assert($('div.col-xs-8:has(h2)').length > 0, 'Wrap your h2 element inside a div with the class \"col-xs-8\".')"
],
"challengeSeed": [
"<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."
],
"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(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."
],
"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($('.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-trash'), '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-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": [
"<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."
],
"tests": [
"assert($('.row').length > 2, 'Wrap your 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.row:has(input[type=\\'radio\\'])').length > 0, 'Wrap all of your radio buttons inside one div with the class \"row\".')",
"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": [
"<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."
],
"tests": [
"assert($('.row').length > 3, 'Wrap your 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.row:has(input[type=\\'checkbox\\'])').length > 0, 'Wrap all of your checkboxes inside one div with the class \"row\".')",
"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": [
"<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>."
],
"tests": [
"assert($('.btn-primary').length > 1, '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($('.form-control').length > 0, 'Give the text input field in your form the class \"form-control\".')"
"assert($('button[type=\\'submit\\']').hasClass('btn btn-primary'), 'Give the submit button in your form the classes \"btn btn-primary\".')",
"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($('input[type=\\'text\\']').hasClass('form-control'), 'Give the text input field in your form the class \"form-control\".')"
],
"challengeSeed": [
"<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!"
],
"tests": [
"assert($('.row').length > 4, '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($('.col-xs-7').length > 0, 'Wrap your form text area in a div with the class \"col-xs-7\".')"
"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($('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($('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": [
"<link href='http://fonts.googleapis.com/css?family=Lobster' rel='stylesheet' type='text/css'>",