From e01826e38e528ce3e84d1813e795df45bbf83503 Mon Sep 17 00:00:00 2001 From: LumenTeun Date: Sun, 31 May 2015 14:18:08 +0200 Subject: [PATCH 01/16] Improves 'Create a Bootstrap Button' --- seed_data/challenges/bootstrap.json | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/seed_data/challenges/bootstrap.json b/seed_data/challenges/bootstrap.json index 58d8aa5dbe..92190cceeb 100644 --- a/seed_data/challenges/bootstrap.json +++ b/seed_data/challenges/bootstrap.json @@ -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": [ "", From b36b75e80026c7432dbb1593fd2da4b6a65a9fbe Mon Sep 17 00:00:00 2001 From: LumenTeun Date: Sun, 31 May 2015 15:25:05 +0200 Subject: [PATCH 02/16] Grammar fix --- seed_data/challenges/basic-html5-and-css.json | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/seed_data/challenges/basic-html5-and-css.json b/seed_data/challenges/basic-html5-and-css.json index ef5ae673a9..8f0ba56acd 100644 --- a/seed_data/challenges/basic-html5-and-css.json +++ b/seed_data/challenges/basic-html5-and-css.json @@ -2363,7 +2363,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.", From 94887a70250abebf34100a30dcb15597974c6c82 Mon Sep 17 00:00:00 2001 From: LumenTeun Date: Sun, 31 May 2015 15:29:40 +0200 Subject: [PATCH 03/16] Improves 'Create a Block Element Bootstrap Button' --- seed_data/challenges/bootstrap.json | 5 +++-- 1 file changed, 3 insertions(+), 2 deletions(-) diff --git a/seed_data/challenges/bootstrap.json b/seed_data/challenges/bootstrap.json index 92190cceeb..dc6c06c8f0 100644 --- a/seed_data/challenges/bootstrap.json +++ b/seed_data/challenges/bootstrap.json @@ -260,11 +260,12 @@ "difficulty": 0.050, "description": [ "Add Bootstrap's btn-block class to your Bootstrap button.", - "Normally, your buttons are only as wide as the text they contain. By making them block elements, 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 block elements, your button will stretch to fill your page's entire horizontal space.", "Note that these buttons still need the btn 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": [ "", From fd9e3d4cdb7a89a1d473fdc9ef83d457ebaa3276 Mon Sep 17 00:00:00 2001 From: LumenTeun Date: Sun, 31 May 2015 15:35:09 +0200 Subject: [PATCH 04/16] Improves 'Taste the Bootstrap Button Color Rainbow' --- seed_data/challenges/bootstrap.json | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/seed_data/challenges/bootstrap.json b/seed_data/challenges/bootstrap.json index dc6c06c8f0..bc840c8068 100644 --- a/seed_data/challenges/bootstrap.json +++ b/seed_data/challenges/bootstrap.json @@ -349,8 +349,8 @@ "Note that this button will still need the btn 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": [ "", From 677644ce0b44a918d2114e9dce5cf8d0dd12359d Mon Sep 17 00:00:00 2001 From: LumenTeun Date: Sun, 31 May 2015 15:51:43 +0200 Subject: [PATCH 05/16] Improves 'Call out Optional Actions with Button Info' --- seed_data/challenges/bootstrap.json | 7 ++++--- 1 file changed, 4 insertions(+), 3 deletions(-) diff --git a/seed_data/challenges/bootstrap.json b/seed_data/challenges/bootstrap.json index bc840c8068..9ed893482d 100644 --- a/seed_data/challenges/bootstrap.json +++ b/seed_data/challenges/bootstrap.json @@ -429,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 btn-info and btn-block classes to it.", + "Create a new block-level Bootstrap button below your \"Like\" button with the text \"Info\", and add Bootstrap's btn-info and btn-block classes to it.", "Bootstrap comes with several pre-defined colors for buttons. The btn-info class is used to call attention to optional actions that the user can take.", "Note that these buttons still need the btn and btn-block 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": [ "", From 3a84d48cec788b32077a899a5f8bc2f6185c19c4 Mon Sep 17 00:00:00 2001 From: LumenTeun Date: Sun, 31 May 2015 16:28:33 +0200 Subject: [PATCH 06/16] Improves 'Warn your Users of a Dangerous Action' --- seed_data/challenges/bootstrap.json | 7 ++++--- 1 file changed, 4 insertions(+), 3 deletions(-) diff --git a/seed_data/challenges/bootstrap.json b/seed_data/challenges/bootstrap.json index 9ed893482d..b9cbe82209 100644 --- a/seed_data/challenges/bootstrap.json +++ b/seed_data/challenges/bootstrap.json @@ -515,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 btn-danger.", + "Create a button with the text \"Delete\" and give it the class btn-danger.", "Bootstrap comes with several pre-defined colors for buttons. The btn-danger 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 btn and btn-block 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": [ "", From b1f7c215e42358a320856dd934c951c04035fb96 Mon Sep 17 00:00:00 2001 From: LumenTeun Date: Sun, 31 May 2015 18:27:53 +0200 Subject: [PATCH 07/16] Improves 'Use the Bootstrap Grid to Put Elements Side By Side' --- seed_data/challenges/bootstrap.json | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/seed_data/challenges/bootstrap.json b/seed_data/challenges/bootstrap.json index b9cbe82209..e19c9c4918 100644 --- a/seed_data/challenges/bootstrap.json +++ b/seed_data/challenges/bootstrap.json @@ -602,7 +602,7 @@ "name": "Waypoint: Use the Bootstrap Grid to Put Elements Side By Side", "difficulty": 0.054, "description": [ - "Put the \"like\", \"Info\" and \"Delete\" buttons side-by-side by wrapping all three of them within one <div class=\"row\"> element, then each of them within a <div class=\"col-xs-4\"> element.", + "Put the \"Like\", \"Info\" and \"Delete\" buttons side-by-side by wrapping all three of them within one <div class=\"row\"> element, then each of them within a <div class=\"col-xs-4\"> element.", "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 div element.", "Here's a diagram of how Bootstrap's 12-column grid layout works:", "", @@ -611,8 +611,8 @@ "The row class is applied to a div, 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": [ "", From 13b9a6fd56b9ceb49f0b47295e139a8850edbd40 Mon Sep 17 00:00:00 2001 From: LumenTeun Date: Sun, 31 May 2015 17:30:50 +0200 Subject: [PATCH 08/16] Improves 'Ditch Custom CSS for Bootstrap' --- seed_data/challenges/bootstrap.json | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/seed_data/challenges/bootstrap.json b/seed_data/challenges/bootstrap.json index e19c9c4918..9ea58cdf65 100644 --- a/seed_data/challenges/bootstrap.json +++ b/seed_data/challenges/bootstrap.json @@ -701,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": [ "", From 48d031d211daefe11e3cb5e64b05032266a6ddcc Mon Sep 17 00:00:00 2001 From: LumenTeun Date: Sun, 31 May 2015 18:55:33 +0200 Subject: [PATCH 09/16] Improves 'Create a Custom Heading' --- seed_data/challenges/bootstrap.json | 8 ++++---- 1 file changed, 4 insertions(+), 4 deletions(-) diff --git a/seed_data/challenges/bootstrap.json b/seed_data/challenges/bootstrap.json index 9ea58cdf65..eab6cf5978 100644 --- a/seed_data/challenges/bootstrap.json +++ b/seed_data/challenges/bootstrap.json @@ -791,7 +791,7 @@ "name": "Waypoint: Create a Custom Heading", "difficulty": 0.056, "description": [ - "Wrap your first image and your h2 element within a single <div class='row'> element. Wrap your h2 text within a <div class='col-xs-8'> and your image in a <div class='col-xs-4'> so that they are on the same line.", + "Wrap your first image and your h2 element within a single <div class='row'> element. Wrap your h2 text within a <div class='col-xs-8'> and your image in a <div class='col-xs-4'> 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 div element.", "Here's a diagram of how Bootstrap's 12-column grid layout works:", @@ -801,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": [ "", From 8ae527ecb769619621d3539597eae2c906645f53 Mon Sep 17 00:00:00 2001 From: LumenTeun Date: Sun, 31 May 2015 18:56:57 +0200 Subject: [PATCH 10/16] Improves 'Add Font Awesome Icons to our Buttons' --- seed_data/challenges/bootstrap.json | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/seed_data/challenges/bootstrap.json b/seed_data/challenges/bootstrap.json index eab6cf5978..5b3c9398cd 100644 --- a/seed_data/challenges/bootstrap.json +++ b/seed_data/challenges/bootstrap.json @@ -884,7 +884,7 @@ "Go ahead and add a <i class=\"fa fa-thumbs-up\"></i> within your like button's element." ], "tests": [ - "assert($('.fa-thumbs-up').length > 0, 'Add a i element with the classes \"fa\" and \"fa-thumbs-up\".')", + "assert($('i').hasClass('fa fa-thumbs-up'), 'Add an i element with the classes \"fa\" and \"fa-thumbs-up\".')", "assert($('button').children('i').length > 0, 'Wrap your i element within your button element.')", "assert(editor.match(/<\\/i>/g), 'Be sure to close your i element with a closing tag.')" ], From 72e4428cc8bedc633ad543120f37bc12a138d49a Mon Sep 17 00:00:00 2001 From: LumenTeun Date: Sun, 31 May 2015 19:00:42 +0200 Subject: [PATCH 11/16] Improves 'Add Font Awesome Icons all of our Buttons' --- seed_data/challenges/bootstrap.json | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/seed_data/challenges/bootstrap.json b/seed_data/challenges/bootstrap.json index 5b3c9398cd..316947bd06 100644 --- a/seed_data/challenges/bootstrap.json +++ b/seed_data/challenges/bootstrap.json @@ -971,8 +971,8 @@ "Add <i class=\"fa fa-info-circle\"></i> within your info button's element, and a <i class=\"fa fa-trash\"></i> within your delete button." ], "tests": [ - "assert($('.fa-trash').length > 0, 'You should add a <i class=\"fa fa-trash\"></i> within your delete button element.')", - "assert($('.fa-info-circle').length > 0, 'You should add a <i class=\"fa fa-info-circle\"></i> within your info button element.')" + "assert($('i').hasClass('fa fa-trash'), 'You should add a <i class=\"fa fa-trash\"></i> within your delete button element.')", + "assert($('i').hasClass('fa fa-info-circle'), 'You should add a <i class=\"fa fa-info-circle\"></i> within your info button element.')" ], "challengeSeed": [ "", From ffced214c27c971e76cf84bc72f00c7391f460c7 Mon Sep 17 00:00:00 2001 From: LumenTeun Date: Sun, 31 May 2015 19:09:40 +0200 Subject: [PATCH 12/16] Improves 'Responsively Style Radio Buttons' --- seed_data/challenges/bootstrap.json | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/seed_data/challenges/bootstrap.json b/seed_data/challenges/bootstrap.json index 316947bd06..97fce6af97 100644 --- a/seed_data/challenges/bootstrap.json +++ b/seed_data/challenges/bootstrap.json @@ -1056,8 +1056,8 @@ "You can use Bootstrap's col-xs-* 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": [ "", From 1b227d658d4ad4038f602e573c49e814dee5dd64 Mon Sep 17 00:00:00 2001 From: LumenTeun Date: Sun, 31 May 2015 19:15:20 +0200 Subject: [PATCH 13/16] Improves 'Responsively Style Checkboxes' --- seed_data/challenges/bootstrap.json | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/seed_data/challenges/bootstrap.json b/seed_data/challenges/bootstrap.json index 97fce6af97..e6f80586a6 100644 --- a/seed_data/challenges/bootstrap.json +++ b/seed_data/challenges/bootstrap.json @@ -1141,8 +1141,8 @@ "You can use Bootstrap's col-xs-* 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": [ "", From c2e299d9dbdb4c482fa4c54df35039f2b102b5e3 Mon Sep 17 00:00:00 2001 From: LumenTeun Date: Sun, 31 May 2015 19:24:57 +0200 Subject: [PATCH 14/16] Improves 'Style Text Inputs as Form Controls' --- seed_data/challenges/bootstrap.json | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/seed_data/challenges/bootstrap.json b/seed_data/challenges/bootstrap.json index e6f80586a6..8932032fa6 100644 --- a/seed_data/challenges/bootstrap.json +++ b/seed_data/challenges/bootstrap.json @@ -1232,9 +1232,9 @@ "Give your form's text input field a class of form-control. Give your form's submit button the classes btn btn-primary and give it the Font Awesome icon of fa-paper-plane." ], "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 <i class=\"fa fa-paper-plane\"></i> 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 <i class=\"fa fa-paper-plane\"></i> 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": [ "", From 83eeaf8d82ae3cbc39e6833260f3c00ea48b76f3 Mon Sep 17 00:00:00 2001 From: LumenTeun Date: Sun, 31 May 2015 19:37:16 +0200 Subject: [PATCH 15/16] Improves 'Line up Form Elements Responsively with Bootstrap' --- seed_data/challenges/bootstrap.json | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/seed_data/challenges/bootstrap.json b/seed_data/challenges/bootstrap.json index 8932032fa6..fd4f7a8803 100644 --- a/seed_data/challenges/bootstrap.json +++ b/seed_data/challenges/bootstrap.json @@ -1335,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": [ "", From b6b62da000b3010e757cb9ff382d4c8da1809abd Mon Sep 17 00:00:00 2001 From: LumenTeun Date: Sun, 31 May 2015 20:55:34 +0200 Subject: [PATCH 16/16] Improves 'Wrap an Anchor Element within a Paragraph' --- seed_data/challenges/basic-html5-and-css.json | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/seed_data/challenges/basic-html5-and-css.json b/seed_data/challenges/basic-html5-and-css.json index 8f0ba56acd..048671b855 100644 --- a/seed_data/challenges/basic-html5-and-css.json +++ b/seed_data/challenges/basic-html5-and-css.json @@ -1044,7 +1044,7 @@ "tests": [ "assert($('a').attr('href').match(/catphotoapp.com/gi).length > 0, 'You need an a element that links to \"catphotoapp.com\".')", "assert($('a').text().match(/cat\\sphotos/gi).length > 0, 'Your a 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 p element should have the text \"click here for\".')", "assert(editor.match(/<\\/p>/g).length > 2, 'Be sure that each of your p elements has a closing tag.')" ],