img-responsive
```yml
tests:
- text: You should have a total of two images.
- testString: assert($("img").length === 2, 'You should have a total of two images.');
+ testString: assert($("img").length === 2);
- text: Your new image should be below your old one and have the class
img-responsive
.
- testString: assert($("img:eq(1)").hasClass("img-responsive"), 'Your new image should be below your old one and have the class
img-responsive
.');
+ testString: assert($("img:eq(1)").hasClass("img-responsive"));
- text: Your new image should not have the class
smaller-image
.
- testString: assert(!$("img:eq(1)").hasClass("smaller-image"), 'Your new image should not have the class
smaller-image
.');
+ testString: assert(!$("img:eq(1)").hasClass("smaller-image"));
- text: Your new image should have a
src
of
https://bit.ly/fcc-running-cats
.
- testString: assert($("img:eq(1)").attr("src") === "https://bit.ly/fcc-running-cats", 'Your new image should have a
src
of
https://bit.ly/fcc-running-cats
.');
+ testString: assert($("img:eq(1)").attr("src") === "https://bit.ly/fcc-running-cats");
- text: Make sure your new
img
element has a closing angle bracket.
- testString: assert(code.match(/
/g).length === 2 && code.match(/
img element has a closing angle bracket.');
+ testString: assert(code.match(/
/g).length === 2 && code.match(/
<div class="row"> el
```yml
tests:
- text: Nest all of your checkboxes inside one
div
with the class
row
.
- testString: assert($("div.row:has(input[type=\"checkbox\"])").length > 0, 'Nest all of your checkboxes inside one
div
with the class
row
.');
+ testString: assert($("div.row:has(input[type=\"checkbox\"])").length > 0);
- text: Nest each of your checkboxes inside its own
div
with the class
col-xs-4
.
- testString: assert($("div.col-xs-4:has(input[type=\"checkbox\"])").length > 2, 'Nest each of your checkboxes inside its own
div
with the class
col-xs-4
.');
+ testString: assert($("div.col-xs-4:has(input[type=\"checkbox\"])").length > 2);
- text: Make sure each of your
div
elements has a closing tag.
- testString: assert(code.match(/<\/div>/g) && code.match(/
/g).length === code.match(/
div elements has a closing tag.');
+ testString: assert(code.match(/<\/div>/g) && code.match(/
/g).length === code.match(/
<div class="row"> ele
```yml
tests:
- text: Nest all of your radio buttons inside one
div
with the class
row
.
- testString: assert($("div.row:has(input[type=\"radio\"])").length > 0, 'Nest all of your radio buttons inside one
div
with the class
row
.');
+ testString: assert($("div.row:has(input[type=\"radio\"])").length > 0);
- text: Nest each of your radio buttons inside its own
div
with the class
col-xs-6
.
- testString: assert($("div.col-xs-6:has(input[type=\"radio\"])").length > 1, 'Nest each of your radio buttons inside its own
div
with the class
col-xs-6
.');
+ testString: assert($("div.col-xs-6:has(input[type=\"radio\"])").length > 1);
- text: Make sure each of your
div
elements has a closing tag.
- testString: assert(code.match(/<\/div>/g) && code.match(/
/g).length === code.match(/
div elements has a closing tag.');
+ testString: assert(code.match(/<\/div>/g) && code.match(/
/g).length === code.match(/
div elements within your row, both with the class
```yml
tests:
- text: Nest two div class="col-xs-6"
elements within your div class="row"
element.
- testString: assert($("div.row > div.col-xs-6").length > 1, 'Nest two div class="col-xs-6"
elements within your div class="row"
element.');
+ testString: assert($("div.row > div.col-xs-6").length > 1);
- text: Make sure all your div
elements have closing tags.
- testString: assert(code.match(/<\/div>/g) && code.match(//g).length === code.match(/
div elements have closing tags.');
+ testString: assert(code.match(/<\/div>/g) && code.match(/
/g).length === code.match(/
<input>,
<textarea>
, and
btn btn-primary
.
- testString: assert($("button[type=\"submit\"]").hasClass("btn btn-primary"), 'Give the submit button in your form the classes
btn btn-primary
.');
+ testString: assert($("button[type=\"submit\"]").hasClass("btn btn-primary"));
- text: Add a
<i class="fa fa-paper-plane"></i>
within your submit
button
element.
- testString: 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.');
+ testString: assert($("button[type=\"submit\"]:has(i.fa.fa-paper-plane)").length > 0);
- text: Give the text
input
in your form the class
form-control
.
- testString: assert($("input[type=\"text\"]").hasClass("form-control"), 'Give the text
input
in your form the class
form-control
.');
+ testString: assert($("input[type=\"text\"]").hasClass("form-control"));
- text: Make sure each of your
i
elements has a closing tag.
- testString: assert(code.match(/<\/i>/g) && code.match(/<\/i/g).length > 3, 'Make sure each of your
i
elements has a closing tag.');
+ testString: assert(code.match(/<\/i>/g) && code.match(/<\/i/g).length > 3);
```
diff --git a/curriculum/challenges/english/03-front-end-libraries/bootstrap/taste-the-bootstrap-button-color-rainbow.english.md b/curriculum/challenges/english/03-front-end-libraries/bootstrap/taste-the-bootstrap-button-color-rainbow.english.md
index 94c7e3f1f6..1d057b35e5 100644
--- a/curriculum/challenges/english/03-front-end-libraries/bootstrap/taste-the-bootstrap-button-color-rainbow.english.md
+++ b/curriculum/challenges/english/03-front-end-libraries/bootstrap/taste-the-bootstrap-button-color-rainbow.english.md
@@ -22,11 +22,11 @@ Note that this button will still need the
btn
and
btn-block
```yml
tests:
- text: Your button should have the class btn-primary
.
- testString: assert($("button").hasClass("btn-primary"), 'Your button should have the class btn-primary
.');
+ testString: assert($("button").hasClass("btn-primary"));
- text: Your button should still have the btn
and btn-block
classes.
- testString: assert($("button").hasClass("btn-block") && $("button").hasClass("btn"), 'Your button should still have the btn
and btn-block
classes.');
+ testString: assert($("button").hasClass("btn-block") && $("button").hasClass("btn"));
- text: Make sure all your button
elements have a closing tag.
- testString: assert(code.match(/<\/button>/g) && code.match(//g).length === code.match(/button
elements have a closing tag.');
+ testString: assert(code.match(/<\/button>/g) && code.match(/
/g).length === code.match(/span element should be inside your p
element.
- testString: assert($("p span") && $("p span").length > 0, 'Your span
element should be inside your p
element.');
+ testString: assert($("p span") && $("p span").length > 0);
- text: Your span
element should have just the text love
.
- testString: assert($("p span") && $("p span").text().match(/love/i) && !$("p span").text().match(/Things cats/i), 'Your span
element should have just the text love
.');
+ testString: assert($("p span") && $("p span").text().match(/love/i) && !$("p span").text().match(/Things cats/i));
- text: Your span
element should have class text-danger
.
- testString: assert($("span").hasClass("text-danger"), 'Your span
element should have class text-danger
.');
+ testString: assert($("span").hasClass("text-danger"));
- text: Make sure your span
element has a closing tag.
- testString: assert(code.match(/<\/span>/g) && code.match(//g).length === code.match(/span element has a closing tag.');
+ testString: assert(code.match(/<\/span>/g) && code.match(//g).length === code.match(/Only change code above thi
```yml
tests:
- text: Start a comment with <!--
at the top of your HTML.
- testString: assert(code.match(/^\s*.*this line))\s*.*this line.*\s*-->/gi), 'Your comment should have the text Only change code above this line
.');
+ testString: assert(code.match(/.*this line))\s*.*this line.*\s*-->/gi));
- text: Be sure to close your comment with -->
.
- testString: assert(code.match(/-->.*\n+.+/g), 'Be sure to close your comment with -->
.');
+ testString: assert(code.match(/-->.*\n+.+/g));
- text: You should have the same number of comment openers and closers.
- testString: assert(code.match(//g).length, 'You should have the same number of comment openers and closers.');
+ testString: assert(code.match(//g).length);
```
diff --git a/curriculum/challenges/english/03-front-end-libraries/bootstrap/use-responsive-design-with-bootstrap-fluid-containers.english.md b/curriculum/challenges/english/03-front-end-libraries/bootstrap/use-responsive-design-with-bootstrap-fluid-containers.english.md
index 903d86a61e..77f95f9dbc 100644
--- a/curriculum/challenges/english/03-front-end-libraries/bootstrap/use-responsive-design-with-bootstrap-fluid-containers.english.md
+++ b/curriculum/challenges/english/03-front-end-libraries/bootstrap/use-responsive-design-with-bootstrap-fluid-containers.english.md
@@ -26,11 +26,11 @@ To get started, we should nest all of our HTML (except the link
tag
```yml
tests:
- text: Your div
element should have the class container-fluid
.
- testString: assert($("div").hasClass("container-fluid"), 'Your div
element should have the class container-fluid
.');
+ testString: assert($("div").hasClass("container-fluid"));
- text: Make sure your div
element has a closing tag.
- testString: assert(code.match(/<\/div>/g) && code.match(//g).length === code.match(/
div element has a closing tag.');
+ testString: assert(code.match(/<\/div>/g) && code.match(/
/g).length === code.match(/
style tag in
.container-fluid
.
- testString: assert($(".container-fluid").children().length >= 8, 'Make sure you have nested all HTML elements after the closing
style
tag in
.container-fluid
.');
+ testString: assert($(".container-fluid").children().length >= 8);
```
diff --git a/curriculum/challenges/english/03-front-end-libraries/bootstrap/use-the-bootstrap-grid-to-put-elements-side-by-side.english.md b/curriculum/challenges/english/03-front-end-libraries/bootstrap/use-the-bootstrap-grid-to-put-elements-side-by-side.english.md
index 4d13baa356..f53dbfe9c4 100644
--- a/curriculum/challenges/english/03-front-end-libraries/bootstrap/use-the-bootstrap-grid-to-put-elements-side-by-side.english.md
+++ b/curriculum/challenges/english/03-front-end-libraries/bootstrap/use-the-bootstrap-grid-to-put-elements-side-by-side.english.md
@@ -25,13 +25,13 @@ The
row
class is applied to a
div
, and the buttons the
```yml
tests:
- text: Your buttons should all be nested within the same
div
element with the class
row
.
- testString: assert($("div.row:has(button)").length > 0, 'Your buttons should all be nested within the same
div
element with the class
row
.');
+ testString: assert($("div.row:has(button)").length > 0);
- text: Each of your Bootstrap buttons should be nested within its own
div
element with the class
col-xs-4
.
- testString: assert($("div.col-xs-4:has(button)").length > 2, 'Each of your Bootstrap buttons should be nested within its own
div
element with the class
col-xs-4
.');
+ testString: assert($("div.col-xs-4:has(button)").length > 2);
- text: Make sure each of your
button
elements has a closing tag.
- testString: assert(code.match(/<\/button>/g) && code.match(/
/g).length === code.match(/button elements has a closing tag.');
+ testString: assert(code.match(/<\/button>/g) && code.match(//g).length === code.match(/div elements has a closing tag.
- testString: assert(code.match(/<\/div>/g) && code.match(//g).length === code.match(/
div elements has a closing tag.');
+ testString: assert(code.match(/<\/div>/g) && code.match(/
/g).length === code.match(/
btn and btn-blockbutton
element with the text "Delete".
- testString: assert(new RegExp("Delete","gi").test($("button").text()), 'Create a new button
element with the text "Delete".');
+ testString: assert(new RegExp("Delete","gi").test($("button").text()));
- text: All of your Bootstrap buttons should have the btn
and btn-block
classes.
- testString: assert($("button.btn-block.btn").length > 2, 'All of your Bootstrap buttons should have the btn
and btn-block
classes.');
+ testString: assert($("button.btn-block.btn").length > 2);
- text: Your new button should have the class btn-danger
.
- testString: assert($("button").hasClass("btn-danger"), 'Your new button should have the class btn-danger
.');
+ testString: assert($("button").hasClass("btn-danger"));
- text: Make sure all your button
elements have a closing tag.
- testString: assert(code.match(/<\/button>/g) && code.match(//g).length === code.match(/button elements have a closing tag.');
+ testString: assert(code.match(/<\/button>/g) && code.match(//g).length === code.match(/<i> tag has traditionally been used to
```yml
tests:
- text: Emphasize the text in your target4
button by adding HTML tags.
- testString: assert.isTrue((/|\s*#target4\s*<\/em>|<\/i>/gi).test($("#target4").html()), 'Emphasize the text in your target4
button by adding HTML tags.');
+ testString: assert.isTrue((/|\s*#target4\s*<\/em>|<\/i>/gi).test($("#target4").html()));
- text: Make sure the text is otherwise unchanged.
- testString: assert($("#target4") && $("#target4").text().trim() === '#target4', 'Make sure the text is otherwise unchanged.');
+ testString: assert($("#target4") && $("#target4").text().trim() === '#target4');
- text: Do not alter any other text.
- testString: assert.isFalse((/|/gi).test($("h3").html()), 'Do not alter any other text.');
+ testString: assert.isFalse((/|/gi).test($("h3").html()));
- text: Make sure you are using .html()
and not .text()
.
- testString: assert(code.match(/\.html\(/g), 'Make sure you are using .html()
and not .text()
.');
+ testString: assert(code.match(/\.html\(/g));
- text: Make sure to select button id="target4"
with jQuery.
- testString: assert(code.match(/\$\(\s*?(\"|\')#target4(\"|\')\s*?\)\.html\(/), 'Make sure to select button id="target4"
with jQuery.');
+ testString: assert(code.match(/\$\(\s*?(\"|\')#target4(\"|\')\s*?\)\.html\(/));
```
diff --git a/curriculum/challenges/english/03-front-end-libraries/jquery/change-the-css-of-an-element-using-jquery.english.md b/curriculum/challenges/english/03-front-end-libraries/jquery/change-the-css-of-an-element-using-jquery.english.md
index e82b69c517..c46841420a 100644
--- a/curriculum/challenges/english/03-front-end-libraries/jquery/change-the-css-of-an-element-using-jquery.english.md
+++ b/curriculum/challenges/english/03-front-end-libraries/jquery/change-the-css-of-an-element-using-jquery.english.md
@@ -28,9 +28,9 @@ Select target1
and change its color to red.
```yml
tests:
- text: Your target1
element should have red text.
- testString: assert($("#target1").css("color") === 'rgb(255, 0, 0)', 'Your target1
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.
- testString: assert(!code.match(/class.*animated/g), 'Only use jQuery to add these classes to the element.');
+ testString: assert(!code.match(/class.*animated/g));
```
diff --git a/curriculum/challenges/english/03-front-end-libraries/jquery/clone-an-element-using-jquery.english.md b/curriculum/challenges/english/03-front-end-libraries/jquery/clone-an-element-using-jquery.english.md
index 77fc9c0411..2a14c5b846 100644
--- a/curriculum/challenges/english/03-front-end-libraries/jquery/clone-an-element-using-jquery.english.md
+++ b/curriculum/challenges/english/03-front-end-libraries/jquery/clone-an-element-using-jquery.english.md
@@ -25,11 +25,11 @@ Clone your target5
element and append it to your left-welltarget5
element should be inside your right-well
.
- testString: assert($("#right-well").children("#target5").length > 0, 'Your target5
element should be inside your right-well
.');
+ testString: assert($("#right-well").children("#target5").length > 0);
- text: A copy of your target5
element should also be inside your left-well
.
- testString: assert($("#left-well").children("#target5").length > 0, 'A copy of your target5
element should also be inside your left-well
.');
+ testString: assert($("#left-well").children("#target5").length > 0);
- text: Only use jQuery to move these elements.
- testString: assert(!code.match(/class.*animated/g), 'Only use jQuery to move these elements.');
+ testString: assert(!code.match(/class.*animated/g));
```
diff --git a/curriculum/challenges/english/03-front-end-libraries/jquery/delete-your-jquery-functions.english.md b/curriculum/challenges/english/03-front-end-libraries/jquery/delete-your-jquery-functions.english.md
index d8123dafab..6f18fe2338 100644
--- a/curriculum/challenges/english/03-front-end-libraries/jquery/delete-your-jquery-functions.english.md
+++ b/curriculum/challenges/english/03-front-end-libraries/jquery/delete-your-jquery-functions.english.md
@@ -23,15 +23,15 @@ Delete all three of these jQuery functions from your document ready functi
```yml
tests:
- text: Delete all three of your jQuery functions from your document ready function
.
- testString: assert(code.match(/\{\s*\}\);/g), 'Delete all three of your jQuery functions from your document ready function
.');
+ testString: assert(code.match(/\{\s*\}\);/g));
- text: Leave your script
element intact.
- testString: assert(code.match(/