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

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

Browse Source 
Co-Authored-By: Tom <20648924+moT01@users.noreply.github.com>
This commit is contained in:
Randell Dawson
2019-11-22 04:44:40 -08:00
committed by Oliver Eyton-Williams
parent 9706bc47ff
commit 6fc32ab9b6
50 changed files with 109 additions and 109 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@ -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);
```

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

@ -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")));
```

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

@ -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));
```

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

@ -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);
```

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

@ -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);
```

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

@ -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);
```

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

@ -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);
```

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

@ -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);
```

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

@ -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"));

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

@ -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);
```

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

@ -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);
```

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

@ -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);
```

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

@ -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);
```

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

@ -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);
```

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

@ -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);
```

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

@ -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()));
```

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

@ -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);
```

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

@ -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);
```

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

@ -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);
```

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

@ -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);
```

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

@ -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);
```

4
curriculum/challenges/english/03-front-end-libraries/bootstrap/split-your-bootstrap-row.english.md
View File

@ -21,9 +21,9 @@ Create two <code>div</code> elements within your row, both with the class <code>
```yml
tests:
- text: Nest two <code>div class="col-xs-6"</code> elements within your <code>div class="row"</code> element.
- text: Two <code>div class="col-xs-6"</code> elements should be nested within your <code>div class="row"</code> element.
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);
```

8
curriculum/challenges/english/03-front-end-libraries/bootstrap/style-text-inputs-as-form-controls.english.md
View File

@ -25,13 +25,13 @@ All textual <code>&lt;input&gt;</code>, <code>&lt;textarea&gt;</code>, and <code
```yml
tests:
- text: Give the submit button in your form the classes <code>btn btn-primary</code>.
- text: The submit button in your form should have the classes <code>btn btn-primary</code>.
testString: assert($("button[type=\"submit\"]").hasClass("btn btn-primary"));
- text: Add a <code>&#60;i class="fa fa-paper-plane"&#62;&#60;/i&#62;</code> within your submit <code>button</code> element.
- text: You should add a <code>&#60;i class="fa fa-paper-plane"&#62;&#60;/i&#62;</code> within your submit <code>button</code> element.
testString: assert($("button[type=\"submit\"]:has(i.fa.fa-paper-plane)").length > 0);
- text: Give the text <code>input</code> in your form the class <code>form-control</code>.
- text: The text <code>input</code> in your form should have the class <code>form-control</code>.
testString: assert($("input[type=\"text\"]").hasClass("form-control"));
- text: Make sure each of your <code>i</code> elements has a closing tag.
- text: Each of your <code>i</code> elements should have a closing tag.
testString: assert(code.match(/<\/i>/g) && code.match(/<\/i/g).length > 3);
```

2
curriculum/challenges/english/03-front-end-libraries/bootstrap/taste-the-bootstrap-button-color-rainbow.english.md
View File

@ -26,7 +26,7 @@ tests:
testString: assert($("button").hasClass("btn-primary"));
- text: Your button should still have the <code>btn</code> and <code>btn-block</code> classes.
testString: assert($("button").hasClass("btn-block") && $("button").hasClass("btn"));
- text: Make sure all your <code>button</code> elements have a closing tag.
- text: All 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);
```

2
curriculum/challenges/english/03-front-end-libraries/bootstrap/use-a-span-to-target-inline-elements.english.md
View File

@ -33,7 +33,7 @@ tests:
testString: assert($("p span") && $("p span").text().match(/love/i) && !$("p span").text().match(/Things cats/i));
- text: Your <code>span</code> element should have class <code>text-danger</code>.
testString: assert($("span").hasClass("text-danger"));
- text: Make sure your <code>span</code> element has a closing tag.
- text: Your <code>span</code> element should have a closing tag.
testString: assert(code.match(/<\/span>/g) && code.match(/<span/g) && code.match(/<\/span>/g).length === code.match(/<span/g).length);
```

4
curriculum/challenges/english/03-front-end-libraries/bootstrap/use-comments-to-clarify-code.english.md
View File

@ -23,11 +23,11 @@ Add a comment at the top of your HTML that says <code>Only change code above thi
```yml
tests:
- text: Start a comment with <code>&#60;!--</code> at the top of your HTML.
- text: You should start a comment with <code>&#60;!--</code> at the top of your HTML.
testString: assert(code.match(/^\s*<!--/));
- text: Your comment should have the text <code>Only change code above this line</code>.
testString: assert(code.match(/<!--(?!(>|->|.*-->.*this line))\s*.*this line.*\s*-->/gi));
- text: Be sure to close your comment with <code>--&#62;</code>.
- text: You should close your comment with <code>--&#62;</code>.
testString: assert(code.match(/-->.*\n+.+/g));
- text: You should have the same number of comment openers and closers.
testString: assert(code.match(/<!--/g).length === code.match(/-->/g).length);

4
curriculum/challenges/english/03-front-end-libraries/bootstrap/use-responsive-design-with-bootstrap-fluid-containers.english.md
View File

@ -28,9 +28,9 @@ To get started, we should nest all of our HTML (except the <code>link</code> tag
tests:
- text: Your <code>div</code> element should have the class <code>container-fluid</code>.
testString: assert($("div").hasClass("container-fluid"));
- 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);
- text: Make sure you have nested all HTML elements after the closing <code>style</code> tag in <code>.container-fluid</code>.
- text: All HTML elements after the closing <code>style</code> tag should be nested in <code>.container-fluid</code>.
testString: assert($(".container-fluid").children().length >= 8);
```

4
curriculum/challenges/english/03-front-end-libraries/bootstrap/use-the-bootstrap-grid-to-put-elements-side-by-side.english.md
View File

@ -29,9 +29,9 @@ tests:
testString: assert($("div.row:has(button)").length > 0);
- text: Each of your Bootstrap buttons should be nested within its own <code>div</code> element with the class <code>col-xs-4</code>.
testString: assert($("div.col-xs-4:has(button)").length > 2);
- text: Make sure each of your <code>button</code> elements has a closing tag.
- text: Each of your <code>button</code> elements should have a closing tag.
testString: assert(code.match(/<\/button>/g) && code.match(/<button/g) && code.match(/<\/button>/g).length === code.match(/<button/g).length);
- text: Make sure each of your <code>div</code> elements has a closing tag.
- text: Each of your <code>div</code> elements 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);
```

4
curriculum/challenges/english/03-front-end-libraries/bootstrap/warn-your-users-of-a-dangerous-action-with-btn-danger.english.md
View File

@ -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 "Delete".
- text: You should create a new <code>button</code> element with the text "Delete".
testString: assert(new RegExp("Delete","gi").test($("button").text()));
- text: All of your Bootstrap buttons should have the <code>btn</code> and <code>btn-block</code> classes.
testString: assert($("button.btn-block.btn").length > 2);
- text: Your new button should have the class <code>btn-danger</code>.
testString: assert($("button").hasClass("btn-danger"));
- 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);
```

10
curriculum/challenges/english/03-front-end-libraries/jquery/change-text-inside-an-element-using-jquery.english.md
View File

@ -27,15 +27,15 @@ Note that while the <code>&#60;i&#62;</code> tag has traditionally been used to
```yml
tests:
- text: Emphasize the text in your <code>target4</code> button by adding HTML tags.
- text: You should emphasize the text in your <code>target4</code> button by adding HTML tags.
testString: assert.isTrue((/<em>|<i>\s*#target4\s*<\/em>|<\/i>/gi).test($("#target4").html()));
- text: Make sure the text is otherwise unchanged.
- text: The text should otherwise remain unchanged.
testString: assert($("#target4") && $("#target4").text().trim() === '#target4');
- text: Do not alter any other text.
- text: You should not alter any other text.
testString: assert.isFalse((/<em>|<i>/gi).test($("h3").html()));
- text: Make sure you are using <code>.html()</code> and not <code>.text()</code>.
- text: You should be using <code>.html()</code> and not <code>.text()</code>.
testString: assert(code.match(/\.html\(/g));
- text: Make sure to select <code>button id="target4"</code> with jQuery.
- text: You should select <code>button id="target4"</code> with jQuery.
testString: assert(code.match(/\$\(\s*?(\"|\')#target4(\"|\')\s*?\)\.html\(/));
```

2
curriculum/challenges/english/03-front-end-libraries/jquery/change-the-css-of-an-element-using-jquery.english.md
View File

@ -30,7 +30,7 @@ Select <code>target1</code> and change its color to red.
tests:
- text: Your <code>target1</code> element should have red text.
testString: assert($("#target1").css("color") === 'rgb(255, 0, 0)');
- text: Only use jQuery to add these classes to the element.
- text: You should only use jQuery to add these classes to the element.
testString: assert(!code.match(/class.*animated/g));
```

2
curriculum/challenges/english/03-front-end-libraries/jquery/clone-an-element-using-jquery.english.md
View File

@ -29,7 +29,7 @@ tests:
testString: assert($("#right-well").children("#target5").length > 0);
- text: A copy of your <code>target5</code> element should also be inside your <code>left-well</code>.
testString: assert($("#left-well").children("#target5").length > 0);
- text: Only use jQuery to move these elements.
- text: You should only use jQuery to move these elements.
testString: assert(!code.match(/class.*animated/g));
```

10
curriculum/challenges/english/03-front-end-libraries/jquery/delete-your-jquery-functions.english.md
View File

@ -23,15 +23,15 @@ Delete all three of these jQuery functions from your <code>document ready functi
```yml
tests:
- text: Delete all three of your jQuery functions from your <code>document ready function</code>.
- text: All three of your jQuery functions should be deleted from your <code>document ready function</code>.
testString: assert(code.match(/\{\s*\}\);/g));
- text: Leave your <code>script</code> element intact.
- text: You should leave your <code>script</code> element intact.
testString: assert(code.match(/<script>/g));
- text: Leave your <code>$&#40document&#41.ready&#40function&#40&#41 {</code> to the beginning of your <code>script</code> element.
- text: You should leave your <code>$&#40document&#41.ready&#40function&#40&#41 {</code> at the beginning of your <code>script</code> element.
testString: assert(code.match(/\$\(document\)\.ready\(function\(\)\s?\{/g));
- text: Leave your "document ready function" closing <code>&#125;&#41;</code> intact.
- text: You should leave your "document ready function" closing <code>&#125;&#41;</code> intact.
testString: assert(code.match(/.*\s*\}\);/g));
- text: Leave your <code>script</code> element closing tag intact.
- text: You should leave your <code>script</code> element closing tag intact.
testString: assert(code.match(/<\/script>/g) && code.match(/<script/g) && code.match(/<\/script>/g).length === code.match(/<script/g).length);
```

6
curriculum/challenges/english/03-front-end-libraries/jquery/disable-an-element-using-jquery.english.md
View File

@ -25,11 +25,11 @@ Disable only the <code>target1</code> button.
```yml
tests:
- text: Disable your <code>target1</code> button.
- text: Your <code>target1</code> button should be disabled.
testString: assert($("#target1") && $("#target1").prop("disabled") && code.match(/["']disabled["'],( true|true)/g));
- text: Do not disable any other buttons.
- text: No other buttons should be disabled.
testString: assert($("#target2") && !$("#target2").prop("disabled"));
- text: Only use jQuery to add these classes to the element.
- text: You should only use jQuery to add these classes to the element.
testString: assert(!code.match(/disabled[^<]*>/g));
```

4
curriculum/challenges/english/03-front-end-libraries/jquery/learn-how-script-tags-and-document-ready-work.english.md
View File

@ -26,11 +26,11 @@ This is important because without your <code>document ready function</code>, you
```yml
tests:
- text: Create a <code>script</code> element making sure it is valid and has a closing tag.
- text: You should create a <code>script</code> element making sure it is valid and has a closing tag.
testString: 'assert(code.match(/<\/script\s*>/g) && code.match(/<script(\sasync|\sdefer)*(\s(charset|src|type)\s*=\s*["\"]+[^"\"]*["\"]+)*(\sasync|\sdefer)*\s*>/g) && code.match(/<\/script\s*>/g).length === code.match(/<script(\sasync|\sdefer)*(\s(charset|src|type)\s*=\s*["\"]+[^"\"]*["\"]+)*(\sasync|\sdefer)*\s*>/g).length);'
- text: 'You should add <code>$&#40;document&#41;.ready<wbr>&#40;function&#40;&#41; {</code> to the beginning of your <code>script</code> element.'
testString: 'assert(code.match(/\$\s*?\(\s*?document\s*?\)\.ready\s*?\(\s*?function\s*?\(\s*?\)\s*?\{/g));'
- text: 'Close your <code>$&#40;document&#41;.ready<wbr>&#40;function&#40;&#41; {</code> function with <code>}&#41;;</code>'
- text: 'You should close your <code>$&#40;document&#41;.ready<wbr>&#40;function&#40;&#41; {</code> function with <code>}&#41;;</code>'
testString: 'assert(code.match(/\n*?\s*?\}\s*?\);/g));'
```

4
curriculum/challenges/english/03-front-end-libraries/jquery/remove-an-element-using-jquery.english.md
View File

@ -22,9 +22,9 @@ Remove element <code>target4</code> from the page by using the <code>.remove()</
```yml
tests:
- text: Use jQuery to remove your <code>target4</code> element from your page.
- text: You should use jQuery to remove your <code>target4</code> element from your page.
testString: assert($("#target4").length === 0 && code.match(/\$\(["']#target4["']\).remove\(\)/g));
- text: Only use jQuery to remove this element.
- text: You should only use jQuery to remove this element.
testString: assert(code.match(/id="target4/g) && !code.match(/<!--.*id="target4".*-->/g) && $("#right-well").length > 0);
```

6
curriculum/challenges/english/03-front-end-libraries/jquery/remove-classes-from-an-element-with-jquery.english.md
View File

@ -25,11 +25,11 @@ Let's remove the <code>btn-default</code> class from all of our <code>button</co
```yml
tests:
- text: Remove the <code>btn-default</code> class from all of your <code>button</code> elements.
- text: The <code>btn-default</code> class should be removed from all of your <code>button</code> elements.
testString: assert($(".btn-default").length === 0);
- text: Only use jQuery to remove this class from the element.
- text: You should only use jQuery to remove this class from the element.
testString: assert(code.match(/btn btn-default/g));
- text: Only remove the <code>btn-default</code> class.
- text: You should only remove the <code>btn-default</code> class.
testString: assert(code.match(/\.[\v\s]*removeClass[\s\v]*\([\s\v]*('|")\s*btn-default\s*('|")[\s\v]*\)/gm));
```

2
curriculum/challenges/english/03-front-end-libraries/jquery/target-a-specific-child-of-an-element-using-jquery.english.md
View File

@ -33,7 +33,7 @@ tests:
testString: assert($(".animated.bounce").length === 2);
- text: You should use the <code>&#58;nth-child&#40&#41</code> selector to modify these elements.
testString: assert(code.match(/\:nth-child\(/g));
- text: Only use jQuery to add these classes to the element.
- text: You should only use jQuery to add these classes to the element.
testString: assert(code.match(/\$\(".target:nth-child\(2\)"\)/g) || code.match(/\$\('.target:nth-child\(2\)'\)/g) || code.match(/\$\(".target"\).filter\(":nth-child\(2\)"\)/g) || code.match(/\$\('.target'\).filter\(':nth-child\(2\)'\)/g));
```

4
curriculum/challenges/english/03-front-end-libraries/jquery/target-elements-by-class-using-jquery.english.md
View File

@ -28,9 +28,9 @@ For example, you could make all the elements with the class <code>text-primary</
```yml
tests:
- text: Use the jQuery <code>addClass&#40&#41</code> function to give the classes <code>animated</code> and <code>shake</code> to all your elements with the class <code>well</code>.
- text: You should use the jQuery <code>addClass&#40&#41</code> function to give the classes <code>animated</code> and <code>shake</code> to all your elements with the class <code>well</code>.
testString: assert($(".well").hasClass("animated") && $(".well").hasClass("shake"));
- text: Only use jQuery to add these classes to the element.
- text: You should only use jQuery to add these classes to the element.
testString: assert(!code.match(/class\.\*animated/g));
```

6
curriculum/challenges/english/03-front-end-libraries/jquery/target-elements-by-id-using-jquery.english.md
View File

@ -27,11 +27,11 @@ Here's how you'd make the <code>button</code> element with the id <code>target6<
```yml
tests:
- text: Select the <code>button</code> element with the <code>id</code> of <code>target3</code> and use the jQuery <code>addClass&#40&#41</code> function to give it the class of <code>animated</code>.
- text: You should select the <code>button</code> element with the <code>id</code> of <code>target3</code> and use the jQuery <code>addClass&#40&#41</code> function to give it the class of <code>animated</code>.
testString: assert($("#target3").hasClass("animated"));
- text: Target the element with the id <code>target3</code> and use the jQuery <code>addClass&#40&#41</code> function to give it the class <code>fadeOut</code>.
- text: You should target the element with the id <code>target3</code> and use the jQuery <code>addClass&#40&#41</code> function to give it the class <code>fadeOut</code>.
testString: assert(($("#target3").hasClass("fadeOut") || $("#target3").hasClass("fadeout")) && code.match(/\$\(\s*.#target3.\s*\)/g));
- text: Only use jQuery to add these classes to the element.
- text: You should only use jQuery to add these classes to the element.
testString: assert(!code.match(/class.*animated/g));
```

2
curriculum/challenges/english/03-front-end-libraries/jquery/target-even-elements-using-jquery.english.md
View File

@ -30,7 +30,7 @@ tests:
testString: assert($('.target:even').hasClass('animated') && $('.target:even').hasClass('shake'));
- text: You should use the <code>&#58;even</code> selector to modify these elements.
testString: assert(code.match(/\:even/g));
- text: Only use jQuery to add these classes to the element.
- text: You should only use jQuery to add these classes to the element.
testString: assert(code.match(/\$\(".target:even"\)/g) || code.match(/\$\('.target:even'\)/g) || code.match(/\$\(".target"\).filter\(":even"\)/g) || code.match(/\$\('.target'\).filter\(':even'\)/g));
```

4
curriculum/challenges/english/03-front-end-libraries/jquery/target-html-elements-with-selectors-using-jquery.english.md
View File

@ -27,9 +27,9 @@ Note that we've already included both the jQuery library and the Animate.css lib
```yml
tests:
- text: 'Use the jQuery <code>addClass&#40&#41</code> function to give the classes <code>animated</code> and <code>bounce</code> to your <code>button</code> elements.'
- text: 'You should use the jQuery <code>addClass&#40&#41</code> function to give the classes <code>animated</code> and <code>bounce</code> to your <code>button</code> elements.'
testString: 'assert($("button").hasClass("animated") && $("button").hasClass("bounce"));'
- text: Only use jQuery to add these classes to the element.
- text: You should only use jQuery to add these classes to the element.
testString: 'assert(!code.match(/class.*animated/g));'
- text: Your jQuery code should be within the <code>$(document).ready();</code> function.
testString: assert(code.match(/\$\(document\)\.ready\(function.*(\s|\n)*.*button.*.addClass.*\);/g));

2
curriculum/challenges/english/03-front-end-libraries/jquery/target-the-children-of-an-element-using-jquery.english.md
View File

@ -27,7 +27,7 @@ tests:
testString: assert($("#right-well").children().css("color") === 'rgb(255, 165, 0)');
- text: You should use the <code>children&#40&#41</code> function to modify these elements.
testString: assert(code.match(/\.children\(\)\.css/g));
- text: Only use jQuery to add these classes to the element.
- text: You should only use jQuery to add these classes to the element.
testString: assert(code.match(/<div class="well" id="right-well">/g));
```

2
curriculum/challenges/english/03-front-end-libraries/jquery/target-the-parent-of-an-element-using-jquery.english.md
View File

@ -31,7 +31,7 @@ tests:
testString: assert(code.match(/\.parent\s*\(\s*\)\s*\.css/g));
- text: The <code>&#46;parent&#40;&#41;</code> method should be called on the <code>&#35;target1</code> element.
testString: assert(code.match(/\$\s*?\(\s*?(?:'|")\s*?#target1\s*?(?:'|")\s*?\)\s*?\.parent/gi));
- text: Only use jQuery to add these classes to the element.
- text: You should only use jQuery to add these classes to the element.
testString: assert(code.match(/<div class="well" id="left-well">/g));
```

10
curriculum/challenges/english/03-front-end-libraries/jquery/target-the-same-element-with-multiple-jquery-selectors.english.md
View File

@ -28,17 +28,17 @@ Add the <code>btn-primary</code> class to the button with id <code>#target1</cod
```yml
tests:
- text: Use the <code>$&#40"button"&#41</code> selector.
- text: Your code should use the <code>$&#40"button"&#41</code> selector.
testString: assert(code.match(/\$\s*?\(\s*?(?:'|")\s*?button\s*?(?:'|")/gi));
- text: Use the <code>$&#40".btn"&#41</code> selector.
- text: Your code should use the <code>$&#40".btn"&#41</code> selector.
testString: assert(code.match(/\$\s*?\(\s*?(?:'|")\s*?\.btn\s*?(?:'|")/gi));
- text: Use the <code>$&#40"#target1"&#41</code> selector.
- text: Your code should use the <code>$&#40"#target1"&#41</code> selector.
testString: assert(code.match(/\$\s*?\(\s*?(?:'|")\s*?#target1\s*?(?:'|")/gi));
- text: Only add one class with each of your three selectors.
- text: You should only add one class with each of your three selectors.
testString: assert(code.match(/addClass/g) && code.match(/addClass\s*?\(\s*?('|")\s*?[\w-]+\s*?\1\s*?\)/g).length > 2);
- text: Your <code>#target1</code> element should have the classes <code>animated</code>&#130; <code>shake</code> and <code>btn-primary</code>.
testString: assert($('#target1').hasClass('animated') && $('#target1').hasClass('shake') && $('#target1').hasClass('btn-primary'));
- text: Only use jQuery to add these classes to the element.
- text: You should only use jQuery to add these classes to the element.
testString: assert(!code.match(/class.*animated/g));
```

2
curriculum/challenges/english/03-front-end-libraries/jquery/use-appendto-to-move-elements-with-jquery.english.md
View File

@ -28,7 +28,7 @@ tests:
testString: assert($("#left-well").children("#target2").length === 0);
- text: Your <code>target2</code> element should be inside your <code>right-well</code>.
testString: assert($("#right-well").children("#target2").length > 0);
- text: Only use jQuery to move these elements.
- text: You should only use jQuery to move these elements.
testString: assert(!code.match(/class.*animated/g));
```

2
curriculum/challenges/english/03-front-end-libraries/jquery/use-jquery-to-modify-the-entire-page.english.md
View File

@ -25,7 +25,7 @@ But let's do something more dramatic. Add the classes <code>animated</code> and
```yml
tests:
- text: Add the classes <code>animated</code> and <code>hinge</code> to your <code>body</code> element.
- text: You should add the classes <code>animated</code> and <code>hinge</code> to your <code>body</code> element.
testString: assert($('body').hasClass('animated') && $('body').hasClass('hinge'));
```

2
curriculum/challenges/english/03-front-end-libraries/react-and-redux/manage-state-locally-first.english.md
View File

@ -27,7 +27,7 @@ tests:
testString: 'assert((function() { const mockedComponent = Enzyme.mount(React.createElement(DisplayMessages)); const initialState = mockedComponent.state(); return ( typeof initialState === ''object'' && initialState.input === '''' && initialState.messages.length === 0); })());'
- text: The <code>DisplayMessages</code> component should render a <code>div</code> containing an <code>h2</code> element, a <code>button</code> element, a <code>ul</code> element, and <code>li</code> elements as children.
testString: 'async () => { const mockedComponent = Enzyme.mount(React.createElement(DisplayMessages)); const waitForIt = (fn) => new Promise((resolve, reject) => setTimeout(() => resolve(fn()), 100)); const state = () => { mockedComponent.setState({messages: [''__TEST__MESSAGE'']}); return waitForIt(() => mockedComponent )}; const updated = await state(); assert(updated.find(''div'').length === 1 && updated.find(''h2'').length === 1 && updated.find(''button'').length === 1 && updated.find(''ul'').length === 1 && updated.find(''li'').length > 0); }; '
- text: <code>.map</code> was used on the <code>messages</code> array.
- text: <code>.map</code> should be used on the <code>messages</code> array.
testString: assert(code.match(/this\.state\.messages\.map/g));
- text: The <code>input</code> element should render the value of <code>input</code> in local state.
testString: 'async () => { const mockedComponent = Enzyme.mount(React.createElement(DisplayMessages)); const waitForIt = (fn) => new Promise((resolve, reject) => setTimeout(() => resolve(fn()), 100)); const causeChange = (c, v) => c.find(''input'').simulate(''change'', { target: { value: v }}); const testValue = ''__TEST__EVENT__INPUT''; const changed = () => { causeChange(mockedComponent, testValue); return waitForIt(() => mockedComponent )}; const updated = await changed(); assert(updated.find(''input'').props().value === testValue); }; '

2
curriculum/challenges/english/03-front-end-libraries/react/define-an-html-class-in-jsx.english.md
View File

@ -26,7 +26,7 @@ Apply a class of <code>myDiv</code> to the <code>div</code> provided in the JSX
tests:
- text: The constant <code>JSX</code> should return a <code>div</code> element.
testString: assert.strictEqual(JSX.type, 'div');
- text: The <code>div</code> has a class of <code>myDiv</code>.
- text: The <code>div</code> should have a class of <code>myDiv</code>.
testString: assert.strictEqual(JSX.props.className, 'myDiv');
```

4
curriculum/challenges/english/03-front-end-libraries/redux/create-a-redux-store.english.md
View File

@ -25,9 +25,9 @@ Declare a <code>store</code> variable and assign it to the <code>createStore()</
```yml
tests:
- text: The redux store exists.
- text: The redux store should exist.
testString: assert(typeof store.getState === 'function');
- text: The redux store has a value of 5 for the state.
- text: The redux store should have a value of 5 for the state.
testString: assert(store.getState()=== 5);
```