fix(curriculum): changed test text to use should for Front End Libraries

curriculum/challenges/english/03-front-end-libraries/bootstrap/add-elements-within-your-bootstrap-wells.english.md

@@ -21,11 +21,11 @@ Nest three <code>button</code> elements within each of your <code>well</code> <c
 
 ```yml
 tests:
-  - text: Nest three <code>button</code> elements within each of your <code>div</code> elements with class <code>well</code>.
+  - text: Three <code>button</code> elements should be nested within each of your <code>div</code> elements with class <code>well</code>.
     testString: assert($("div.well:eq(0)").children("button").length === 3 && $("div.well:eq(1)").children("button").length === 3);
   - text: You should have a total of 6 <code>button</code> elements.
     testString: assert($("button") && $("button").length > 5);
-  - text: Make sure all your <code>button</code> elements have closing tags.
+  - text: All of your <code>button</code> elements should have closing tags.
     testString: assert(code.match(/<\/button>/g) && code.match(/<button/g) && code.match(/<\/button>/g).length === code.match(/<button/g).length);
 
 ```

curriculum/challenges/english/03-front-end-libraries/bootstrap/add-font-awesome-icons-to-all-of-our-buttons.english.md

@@ -29,7 +29,7 @@ tests:
     testString: assert($(".btn-info > i").is(".fas.fa-info-circle") || $(".btn-info > span").is(".fas.fa-info-circle"));
   - text: You should add a <code>&#60;i class="fas fa-trash"&#62;&#60;/i&#62;</code> within your delete button element.
     testString: assert($(".btn-danger > i").is(".fas.fa-trash") || $(".btn-danger > span").is(".fas.fa-trash"));
-  - text: Make sure each of your <code>i</code> elements has a closing tag and <code>&#60;i class="fas fa-thumbs-up"&#62;&#60;/i&#62;</code> is in your like button element.
+  - text: Each of your <code>i</code> elements should have a closing tag and <code>&#60;i class="fas fa-thumbs-up"&#62;&#60;/i&#62;</code> is in your like button element.
     testString: assert(code.match(/<\/i>|<\/span/g) && code.match(/<\/i|<\/span>/g).length > 2 && ($(".btn-primary > i").is(".fas.fa-thumbs-up") || $(".btn-primary > span").is(".fas.fa-thumbs-up")));
 
 ```

curriculum/challenges/english/03-front-end-libraries/bootstrap/add-font-awesome-icons-to-our-buttons.english.md

@@ -29,13 +29,13 @@ Use Font Awesome to add a <code>thumbs-up</code> icon to your like button by giv
 
 ```yml
 tests:
-  - text: Add an <code>i</code> element with the classes <code>fas</code> and <code>fa-thumbs-up</code>.
+  - text: You should add an <code>i</code> element with the classes <code>fas</code> and <code>fa-thumbs-up</code>.
     testString: assert($("i").is(".fas.fa-thumbs-up") || $("span").is(".fas.fa-thumbs-up"));
   - text: Your <code>fa-thumbs-up</code> icon should be located within the Like button.
     testString: assert(($("i.fa-thumbs-up").parent().text().match(/Like/gi) && $(".btn-primary > i").is(".fas.fa-thumbs-up")) || ($("span.fa-thumbs-up").parent().text().match(/Like/gi) && $(".btn-primary > span").is(".fas.fa-thumbs-up")));
-  - text: Nest your <code>i</code> element within your <code>button</code> element.
+  - text: Your <code>i</code> element should be nested within your <code>button</code> element.
     testString: assert($("button").children("i").length > 0 || $("button").children("span").length > 0);
-  - text: Make sure your icon element has a closing tag.
+  - text: Your icon element should have a closing tag.
     testString: assert(code.match(/<\/i>|<\/span>/g));
 ```
 

curriculum/challenges/english/03-front-end-libraries/bootstrap/add-id-attributes-to-bootstrap-elements.english.md

@@ -25,9 +25,9 @@ Give the well on the left the id of <code>left-well</code>. Give the well on the
 
 ```yml
 tests:
-  - text: Give your left <code>well</code> the id of <code>left-well</code>.
+  - text: Your left <code>well</code> should have the id of <code>left-well</code>.
     testString: assert($(".col-xs-6").children("#left-well") && $(".col-xs-6").children("#left-well").length > 0);
-  - text: Give your right <code>well</code> the id of <code>right-well</code>.
+  - text: Your right <code>well</code> should have the id of <code>right-well</code>.
     testString: assert($(".col-xs-6").children("#right-well") && $(".col-xs-6").children("#right-well").length > 0);
 
 ```

curriculum/challenges/english/03-front-end-libraries/bootstrap/apply-the-default-bootstrap-button-style.english.md

@@ -21,9 +21,9 @@ Apply both the <code>btn</code> and <code>btn-default</code> classes to each of
 
 ```yml
 tests:
-  - text: Apply the <code>btn</code> class to each of your <code>button</code> elements.
+  - text: You should apply the <code>btn</code> class to each of your <code>button</code> elements.
     testString: assert($(".btn").length > 5);
-  - text: Apply the <code>btn-default</code> class to each of your <code>button</code> elements.
+  - text: You should apply the <code>btn-default</code> class to each of your <code>button</code> elements.
     testString: assert($(".btn-default").length > 5);
 
 ```

curriculum/challenges/english/03-front-end-libraries/bootstrap/call-out-optional-actions-with-btn-info.english.md

@@ -22,13 +22,13 @@ Note that these buttons still need the <code>btn</code> and <code>btn-block</cod
 
 ```yml
 tests:
-  - text: Create a new <code>button</code> element with the text "Info".
+  - text: You should create a new <code>button</code> element with the text "Info".
     testString: assert(new RegExp("info","gi").test($("button").text()));
   - text: Both of your Bootstrap buttons should have the <code>btn</code> and <code>btn-block</code> classes.
     testString: assert($("button.btn-block.btn").length > 1);
   - text: Your new button should have the class <code>btn-info</code>.
     testString: assert($("button").hasClass("btn-info"));
-  - text: Make sure all your <code>button</code> elements have a closing tag.
+  - text: All of your <code>button</code> elements should have closing tags.
     testString: assert(code.match(/<\/button>/g) && code.match(/<button/g) && code.match(/<\/button>/g).length === code.match(/<button/g).length);
 
 ```

curriculum/challenges/english/03-front-end-libraries/bootstrap/create-a-block-element-bootstrap-button.english.md

@@ -33,7 +33,7 @@ tests:
     testString: assert($("button").hasClass("btn") && $("button").hasClass("btn-default"));
   - text: Your button should have the class <code>btn-block</code>.
     testString: assert($("button").hasClass("btn-block"));
-  - text: Make sure all your <code>button</code> elements have a closing tag.
+  - text: All of your <code>button</code> elements should have closing tags.
     testString: assert(code.match(/<\/button>/g) && code.match(/<button/g) && code.match(/<\/button>/g).length === code.match(/<button/g).length);
 
 ```

curriculum/challenges/english/03-front-end-libraries/bootstrap/create-a-bootstrap-button.english.md

@@ -21,11 +21,11 @@ Create a new <code>button</code> element below your large kitten photo. Give it
 
 ```yml
 tests:
-  - text: Create a new <code>button</code> element with the text "Like".
+  - text: You should create a new <code>button</code> element with the text "Like".
     testString: assert(new RegExp("like","gi").test($("button").text()) && ($("img.img-responsive + button.btn").length > 0));
   - text: 'Your new button should have two classes: <code>btn</code> and <code>btn-default</code>.'
     testString: assert($("button").hasClass("btn") && $("button").hasClass("btn-default"));
-  - text: Make sure all your <code>button</code> elements have a closing tag.
+  - text: All of your <code>button</code> elements should have closing tags.
     testString: assert(code.match(/<\/button>/g) && code.match(/<button/g) && code.match(/<\/button>/g).length === code.match(/<button/g).length);
 
 ```

curriculum/challenges/english/03-front-end-libraries/bootstrap/create-a-bootstrap-headline.english.md

@@ -23,9 +23,9 @@ Color your <code>h3</code> element with the <code>text-primary</code> Bootstrap
 
 ```yml
 tests:
-  - text: Add a <code>h3</code> element to your page.
+  - text: You should add an <code>h3</code> element to your page.
     testString: assert($("h3") && $("h3").length > 0);
-  - text: Make sure your <code>h3</code> element has a closing tag.
+  - text: Your <code>h3</code> element should have a closing tag.
     testString: assert(code.match(/<\/h3>/g) && code.match(/<h3/g) && code.match(/<\/h3>/g).length === code.match(/<h3/g).length);
   - text: Your <code>h3</code> element should be colored by applying the class <code>text-primary</code>
     testString: assert($("h3").hasClass("text-primary"));

curriculum/challenges/english/03-front-end-libraries/bootstrap/create-a-bootstrap-row.english.md

@@ -21,13 +21,13 @@ Create a <code>div</code> element below the <code>h3</code> tag, with a class of
 
 ```yml
 tests:
-  - text: Add a <code>div</code> element below your <code>h3</code> element.
+  - text: You should add a <code>div</code> element below your <code>h3</code> element.
     testString: assert(($("div").length > 1) && ($("div.row h3.text-primary").length == 0) && ($("div.row + h3.text-primary").length == 0) && ($("h3.text-primary + div.row").length > 0));
   - text: Your <code>div</code> element should have the class <code>row</code>
     testString: assert($("div").hasClass("row"));
   - text: Your <code>row div</code> should be nested inside the <code>container-fluid div</code>
     testString: assert($("div.container-fluid div.row").length > 0);
-  - text: Make sure your <code>div</code> element has a closing tag.
+  - text: Your <code>div</code> element should have a closing tag.
     testString: assert(code.match(/<\/div>/g) && code.match(/<div/g) && code.match(/<\/div>/g).length === code.match(/<div/g).length);
 
 ```

curriculum/challenges/english/03-front-end-libraries/bootstrap/create-a-class-to-target-with-jquery-selectors.english.md

@@ -21,7 +21,7 @@ Give each of your <code>button</code> elements the class <code>target</code>.
 
 ```yml
 tests:
-  - text: Apply the <code>target</code> class to each of your <code>button</code> elements.
+  - text: You should apply the <code>target</code> class to each of your <code>button</code> elements.
     testString: assert($(".target").length > 5);
 
 ```

curriculum/challenges/english/03-front-end-libraries/bootstrap/create-a-custom-heading.english.md

@@ -25,11 +25,11 @@ Notice how the image is now just the right size to fit along the text?
 tests:
   - text: Your <code>h2</code> element and topmost <code>img</code> element should both be nested together within a <code>div</code> element with the class <code>row</code>.
     testString: assert($("div.row:has(h2)").length > 0 && $("div.row:has(img)").length > 0);
-  - text: Nest your topmost <code>img</code> element within a <code>div</code> with the class <code>col-xs-4</code>.
+  - text: Your topmost <code>img</code> element should be nested within a <code>div</code> with the class <code>col-xs-4</code>.
     testString: assert($("div.col-xs-4:has(img)").length > 0 && $("div.col-xs-4:has(div)").length === 0);
-  - text: Nest your <code>h2</code> element within a <code>div</code> with the class <code>col-xs-8</code>.
+  - text: Your <code>h2</code> element should be nested within a <code>div</code> with the class <code>col-xs-8</code>.
     testString: assert($("div.col-xs-8:has(h2)").length > 0 && $("div.col-xs-8:has(div)").length === 0);
-  - text: Make sure each of your <code>div</code> elements has a closing tag.
+  - text: All of your <code>div</code> elements should have closing tags.
     testString: assert(code.match(/<\/div>/g) && code.match(/<div/g) && code.match(/<\/div>/g).length === code.match(/<div/g).length);
 
 ```

curriculum/challenges/english/03-front-end-libraries/bootstrap/create-bootstrap-wells.english.md

@@ -21,11 +21,11 @@ Nest one <code>div</code> element with the class <code>well</code> within each o
 
 ```yml
 tests:
-  - text: Add a <code>div</code> element with the class <code>well</code> inside each of your <code>div</code> elements with the class <code>"col-xs-6"</code>
+  - text: You should add a <code>div</code> element with the class <code>well</code> inside each of your <code>div</code> elements with the class <code>"col-xs-6"</code>
     testString: assert($("div.col-xs-6").not(":has(>div.well)").length < 1);
-  - text: Nest both of your <code>div</code> elements with the class <code>"col-xs-6"</code> within your <code>div</code> element with the class <code>"row"</code>.
+  - text: Both of your <code>div</code> elements with the class <code>"col-xs-6"</code> should be nested within your <code>div</code> element with the class <code>"row"</code>.
     testString: assert($("div.row > div.col-xs-6").length > 1);
-  - text: Make sure all your <code>div</code> elements have closing tags.
+  - text: All your <code>div</code> elements should have closing tags.
     testString: assert(code.match(/<\/div>/g) && code.match(/<div/g) && code.match(/<\/div>/g).length === code.match(/<div/g).length);
 
 ```

curriculum/challenges/english/03-front-end-libraries/bootstrap/ditch-custom-css-for-bootstrap.english.md

@@ -30,9 +30,9 @@ tests:
     testString: assert($("h2").hasClass("text-primary"));
   - text: Your paragraph elements should no longer use the font <code>Monospace</code>.
     testString: assert(!$("p").css("font-family").match(/monospace/i));
-  - text: Remove the <code>smaller-image</code> class from your top image.
+  - text: The <code>smaller-image</code> class should be removed from your top image.
     testString: assert(!$("img").hasClass("smaller-image"));
-  - text: Add the <code>img-responsive</code> class to your top image.
+  - text: You should add the <code>img-responsive</code> class to your top image.
     testString: assert($(".img-responsive").length > 1);
 
 ```

curriculum/challenges/english/03-front-end-libraries/bootstrap/house-our-page-within-a-bootstrap-container-fluid-div.english.md

@@ -23,9 +23,9 @@ Let's nest your <code>h3</code> element within a <code>div</code> element with t
 tests:
   - text: Your <code>div</code> element should have the class <code>container-fluid</code>.
     testString: assert($("div").hasClass("container-fluid"));
-  - text: Make sure each of your <code>div</code> elements has a closing tag.
+  - text: Each of your <code>div</code> elements should have closing tags.
     testString: assert(code.match(/<\/div>/g) && code.match(/<div/g) && code.match(/<\/div>/g).length === code.match(/<div/g).length);
-  - text: Nest your <code>h3</code> element inside a <code>div</code> element.
+  - text: Your <code>h3</code> element should be nested inside a <code>div</code> element.
     testString: assert($("div").children("h3").length >0);
 
 ```

curriculum/challenges/english/03-front-end-libraries/bootstrap/label-bootstrap-buttons.english.md

@@ -21,17 +21,17 @@ Give each of your <code>button</code> elements text that corresponds to its <cod
 
 ```yml
 tests:
-  - text: Give your <code>button</code> element with the id <code>target1</code> the text <code>#target1</code>.
+  - text: Your <code>button</code> element with the id <code>target1</code> should have the text <code>#target1</code>.
     testString: assert(new RegExp("#target1","gi").test($("#target1").text()));
-  - text: Give your <code>button</code> element with the id <code>target2</code> the text <code>#target2</code>.
+  - text: Your <code>button</code> element with the id <code>target2</code> should have the text <code>#target2</code>.
     testString: assert(new RegExp("#target2","gi").test($("#target2").text()));
-  - text: Give your <code>button</code> element with the id <code>target3</code> the text <code>#target3</code>.
+  - text: Your <code>button</code> element with the id <code>target3</code> should have the text <code>#target3</code>.
     testString: assert(new RegExp("#target3","gi").test($("#target3").text()));
-  - text: Give your <code>button</code> element with the id <code>target4</code> the text <code>#target4</code>.
+  - text: Your <code>button</code> element with the id <code>target4</code> should have the text <code>#target4</code>.
     testString: assert(new RegExp("#target4","gi").test($("#target4").text()));
-  - text: Give your <code>button</code> element with the id <code>target5</code> the text <code>#target5</code>.
+  - text: Your <code>button</code> element with the id <code>target5</code> should have the text <code>#target5</code>.
     testString: assert(new RegExp("#target5","gi").test($("#target5").text()));
-  - text: Give your <code>button</code> element with the id <code>target6</code> the text <code>#target6</code>.
+  - text: Your <code>button</code> element with the id <code>target6</code> should have the text <code>#target6</code>.
     testString: assert(new RegExp("#target6","gi").test($("#target6").text()));
 
 ```

curriculum/challenges/english/03-front-end-libraries/bootstrap/label-bootstrap-wells.english.md

@@ -22,13 +22,13 @@ Above your right-well, inside its <code>col-xs-6</code> <code>div</code> element
 
 ```yml
 tests:
-  - text: Add an <code>h4</code> element to each of your <code>&#60;div class="col-xs-6"&#62;</code> elements.
+  - text: You should add an <code>h4</code> element to each of your <code>&#60;div class="col-xs-6"&#62;</code> elements.
     testString: assert($(".col-xs-6").children("h4") && $(".col-xs-6").children("h4").length > 1);
   - text: One <code>h4</code> element should have the text <code>#left-well</code>.
     testString: assert(new RegExp("#left-well","gi").test($("h4").text()));
   - text: One <code>h4</code> element should have the text <code>#right-well</code>.
     testString: assert(new RegExp("#right-well","gi").test($("h4").text()));
-  - text: Make sure all your <code>h4</code> elements have closing tags.
+  - text: All of your <code>h4</code> elements should have closing tags.
     testString: assert(code.match(/<\/h4>/g) && code.match(/<h4/g) && code.match(/<\/h4>/g).length === code.match(/<h4/g).length);
 
 ```

curriculum/challenges/english/03-front-end-libraries/bootstrap/line-up-form-elements-responsively-with-bootstrap.english.md

@@ -25,13 +25,13 @@ This is the last challenge we'll do for our Cat Photo App for now. We hope you'v
 
 ```yml
 tests:
-  - text: Nest your form submission button and text input in a div with class <code>row</code>.
+  - text: Your form submission button and text input should be nested in a div with class <code>row</code>.
     testString: assert($("div.row:has(input[type=\"text\"])").length > 0 &&  $("div.row:has(button[type=\"submit\"])").length > 0);
-  - text: Nest your form text input in a div with the class <code>col-xs-7</code>.
+  - text: Your form text input should be nested in a div with the class <code>col-xs-7</code>.
     testString: assert($("div.col-xs-7:has(input[type=\"text\"])").length > 0);
-  - text: Nest your form submission button in a div with the class <code>col-xs-5</code>.
+  - text: Your form submission button should be nested in a div with the class <code>col-xs-5</code>.
     testString: assert($("div.col-xs-5:has(button[type=\"submit\"])").length > 0);
-  - text: Make sure each of your <code>div</code> elements has a closing tag.
+  - text: All of your <code>div</code> elements should have closing tags.
     testString: assert(code.match(/<\/div>/g) && code.match(/<div/g) && code.match(/<\/div>/g).length === code.match(/<div/g).length);
 
 ```

curriculum/challenges/english/03-front-end-libraries/bootstrap/make-images-mobile-responsive.english.md

@@ -30,7 +30,7 @@ tests:
     testString: assert(!$("img:eq(1)").hasClass("smaller-image"));
   - text: Your new image should have a <code>src</code> of <code>https&#58;//bit.ly/fcc-running-cats</code>.
     testString: assert($("img:eq(1)").attr("src") === "https://bit.ly/fcc-running-cats");
-  - text: Make sure your new <code>img</code> element has a closing angle bracket.
+  - text: Your new <code>img</code> element should have a closing angle bracket.
     testString: assert(code.match(/<img/g) && code.match(/<img[^<]*>/g).length === 2 && code.match(/<img/g).length === 2);
 
 ```

curriculum/challenges/english/03-front-end-libraries/bootstrap/responsively-style-checkboxes.english.md

@@ -23,11 +23,11 @@ Nest all three of your checkboxes in a <code>&#60;div class="row"&#62;</code> el
 
 ```yml
 tests:
-  - text: Nest all of your checkboxes inside one <code>div</code> with the class <code>row</code>.
+  - text: All of your checkboxes should be nested inside one <code>div</code> with the class <code>row</code>.
     testString: assert($("div.row:has(input[type=\"checkbox\"])").length > 0);
-  - text: Nest each of your checkboxes inside its own <code>div</code> with the class <code>col-xs-4</code>.
+  - text: Each of your checkboxes should be nested inside its own <code>div</code> with the class <code>col-xs-4</code>.
     testString: assert($("div.col-xs-4:has(input[type=\"checkbox\"])").length > 2);
-  - text: Make sure each of your <code>div</code> elements has a closing tag.
+  - text: All of your <code>div</code> elements should have closing tags.
     testString: assert(code.match(/<\/div>/g) && code.match(/<div/g) && code.match(/<\/div>/g).length === code.match(/<div/g).length);
 
 ```

curriculum/challenges/english/03-front-end-libraries/bootstrap/responsively-style-radio-buttons.english.md

@@ -25,11 +25,11 @@ Nest both your radio buttons within a <code>&#60;div class="row"&#62;</code> ele
 
 ```yml
 tests:
-  - text: Nest all of your radio buttons inside one <code>div</code> with the class <code>row</code>.
+  - text: All of your radio buttons should be nested inside one <code>div</code> with the class <code>row</code>.
     testString: assert($("div.row:has(input[type=\"radio\"])").length > 0);
-  - text: Nest each of your radio buttons inside its own <code>div</code> with the class <code>col-xs-6</code>.
+  - text: Each of your radio buttons should be nested inside its own <code>div</code> with the class <code>col-xs-6</code>.
     testString: assert($("div.col-xs-6:has(input[type=\"radio\"])").length > 1);
-  - text: Make sure each of your <code>div</code> elements has a closing tag.
+  - text: All of your <code>div</code> elements should have closing tags.
     testString: assert(code.match(/<\/div>/g) && code.match(/<div/g) && code.match(/<\/div>/g).length === code.match(/<div/g).length);
 
 ```