fix(curriculum): quotes in tests (#18828)
* fix(curriculum): tests quotes * fix(curriculum): fill seed-teardown * fix(curriculum): fix tests and remove unneeded seed-teardown
This commit is contained in:
Valeriy
committed by
mrugesh mohapatra
mrugesh mohapatra
parent
96eb124163
commit
79d9012432
@ -24,13 +24,13 @@ Add a button as the last element of your <code>form</code> element with a type o
|
||||
```yml
|
||||
tests:
|
||||
- text: Your form should have a button inside it.
|
||||
testString: 'assert($("form").children("button").length > 0, "Your form should have a button inside it.");'
|
||||
testString: assert($("form").children("button").length > 0, 'Your form should have a button inside it.');
|
||||
- text: Your submit button should have the attribute <code>type</code> set to <code>submit</code>.
|
||||
testString: 'assert($("button").attr("type") === "submit", "Your submit button should have the attribute <code>type</code> set to <code>submit</code>.");'
|
||||
testString: assert($("button").attr("type") === "submit", 'Your submit button should have the attribute <code>type</code> set to <code>submit</code>.');
|
||||
- text: Your submit button should only have the text "Submit".
|
||||
testString: 'assert($("button").text().match(/^\s*submit\s*$/gi), "Your submit button should only have the text "Submit".");'
|
||||
testString: assert($("button").text().match(/^\s*submit\s*$/gi), 'Your submit button should only have the text "Submit".');
|
||||
- text: Make sure your <code>button</code> element has a closing tag.
|
||||
testString: 'assert(code.match(/<\/button>/g) && code.match(/<button/g) && code.match(/<\/button>/g).length === code.match(/<button/g).length, "Make sure your <code>button</code> element has a closing tag.");'
|
||||
testString: assert(code.match(/<\/button>/g) && code.match(/<button/g) && code.match(/<\/button>/g).length === code.match(/<button/g).length, 'Make sure your <code>button</code> element has a closing tag.');
|
||||
|
||||
```
|
||||
|
||||
|
||||
@ -34,11 +34,11 @@ Finally don't forget to give your image an <code>alt</code> text.
|
||||
```yml
|
||||
tests:
|
||||
- text: Your page should have an image element.
|
||||
testString: 'assert($("img").length > 0, "Your page should have an image element.");'
|
||||
testString: assert($("img").length > 0, 'Your page should have an image element.');
|
||||
- text: Your image should have a <code>src</code> attribute that points to the kitten image.
|
||||
testString: 'assert(new RegExp("\/\/bit.ly\/fcc-relaxing-cat|\/\/s3.amazonaws.com\/freecodecamp\/relaxing-cat.jpg", "gi").test($("img").attr("src")), "Your image should have a <code>src</code> attribute that points to the kitten image.");'
|
||||
testString: assert(new RegExp("\/\/bit.ly\/fcc-relaxing-cat|\/\/s3.amazonaws.com\/freecodecamp\/relaxing-cat.jpg", "gi").test($("img").attr("src")), 'Your image should have a <code>src</code> attribute that points to the kitten image.');
|
||||
- text: Your image element <strong>must</strong> have an <code>alt</code> attribute.
|
||||
testString: 'assert(code.match(/alt\s*?=\s*?(\"|\").*(\"|\")/), "Your image element <strong>must</strong> have an <code>alt</code> attribute.");'
|
||||
testString: assert(code.match(/alt\s*?=\s*?(\"|\').*(\"|\')/), 'Your image element <strong>must</strong> have an <code>alt</code> attribute.');
|
||||
|
||||
```
|
||||
|
||||
|
||||
@ -24,11 +24,11 @@ Set the <code>placeholder</code> value of your text <code>input</code> to "cat p
|
||||
```yml
|
||||
tests:
|
||||
- text: Add a <code>placeholder</code> attribute to the existing text <code>input</code> element.
|
||||
testString: 'assert($("input[placeholder]").length > 0, "Add a <code>placeholder</code> attribute to the existing text <code>input</code> element.");'
|
||||
testString: assert($("input[placeholder]").length > 0, 'Add a <code>placeholder</code> attribute to the existing text <code>input</code> element.');
|
||||
- text: Set the value of your placeholder attribute to "cat photo URL".
|
||||
testString: 'assert($("input") && $("input").attr("placeholder") && $("input").attr("placeholder").match(/cat\s+photo\s+URL/gi), "Set the value of your placeholder attribute to "cat photo URL".");'
|
||||
testString: assert($("input") && $("input").attr("placeholder") && $("input").attr("placeholder").match(/cat\s+photo\s+URL/gi), 'Set the value of your placeholder attribute to "cat photo URL".');
|
||||
- text: The finished <code>input</code> element should have valid syntax.
|
||||
testString: 'assert($("input[type=text]").length > 0 && code.match(/<input((\s+\w+(\s*=\s*(?:".*?"|".*?"|[\^"">\s]+))?)+\s*|\s*)\/?>/gi), "The finished <code>input</code> element should have valid syntax.");'
|
||||
testString: assert($("input[type=text]").length > 0 && code.match(/<input((\s+\w+(\s*=\s*(?:".*?"|'.*?'|[\^'">\s]+))?)+\s*|\s*)\/?>/gi), 'The finished <code>input</code> element should have valid syntax.');
|
||||
|
||||
```
|
||||
|
||||
|
||||
@ -23,9 +23,9 @@ Set the first of your <code>radio buttons</code> and the first of your <code>che
|
||||
```yml
|
||||
tests:
|
||||
- text: Your first radio button on your form should be checked by default.
|
||||
testString: 'assert($("input[type="radio"]").prop("checked"), "Your first radio button on your form should be checked by default.");'
|
||||
testString: assert($('input[type="radio"]').prop("checked"), 'Your first radio button on your form should be checked by default.');
|
||||
- text: Your first checkbox on your form should be checked by default.
|
||||
testString: 'assert($("input[type="checkbox"]").prop("checked"), "Your first checkbox on your form should be checked by default.");'
|
||||
testString: assert($('input[type="checkbox"]').prop("checked"), 'Your first checkbox on your form should be checked by default.');
|
||||
|
||||
```
|
||||
|
||||
|
||||
@ -22,15 +22,15 @@ Comment out your <code>h1</code> element and your <code>p</code> element, but no
|
||||
```yml
|
||||
tests:
|
||||
- text: Comment out your <code>h1</code> element so that it is not visible on your page.
|
||||
testString: 'assert(($("h1").length === 0), "Comment out your <code>h1</code> element so that it is not visible on your page.");'
|
||||
testString: assert(($("h1").length === 0), 'Comment out your <code>h1</code> element so that it is not visible on your page.');
|
||||
- text: Leave your <code>h2</code> element uncommented so that it is visible on your page.
|
||||
testString: 'assert(($("h2").length > 0), "Leave your <code>h2</code> element uncommented so that it is visible on your page.");'
|
||||
testString: assert(($("h2").length > 0), 'Leave your <code>h2</code> element uncommented so that it is visible on your page.');
|
||||
- text: Comment out your <code>p</code> element so that it is not visible on your page.
|
||||
testString: 'assert(($("p").length === 0), "Comment out your <code>p</code> element so that it is not visible on your page.");'
|
||||
- text: 'Be sure to close each of your comments with <code>--></code>.'
|
||||
testString: 'assert(code.match(/[^fc]-->/g).length > 1, "Be sure to close each of your comments with <code>--></code>.");'
|
||||
testString: assert(($("p").length === 0), 'Comment out your <code>p</code> element so that it is not visible on your page.');
|
||||
- text: Be sure to close each of your comments with <code>--></code>.
|
||||
testString: assert(code.match(/[^fc]-->/g).length > 1, 'Be sure to close each of your comments with <code>--></code>.');
|
||||
- text: Do not change the order of the <code>h1</code> <code>h2</code> or <code>p</code> in the code.
|
||||
testString: 'assert((code.match(/<([a-z0-9]){1,2}>/g)[0]==="<h1>" && code.match(/<([a-z0-9]){1,2}>/g)[1]==="<h2>" && code.match(/<([a-z0-9]){1,2}>/g)[2]==="<p>") , "Do not change the order of the <code>h1</code> <code>h2</code> or <code>p</code> in the code.");'
|
||||
testString: assert((code.match(/<([a-z0-9]){1,2}>/g)[0]==="<h1>" && code.match(/<([a-z0-9]){1,2}>/g)[1]==="<h2>" && code.match(/<([a-z0-9]){1,2}>/g)[2]==="<p>") , 'Do not change the order of the <code>h1</code> <code>h2</code> or <code>p</code> in the code.');
|
||||
|
||||
```
|
||||
|
||||
|
||||
@ -25,13 +25,13 @@ Remove the last two <code>p</code> elements and create an unordered list of thre
|
||||
```yml
|
||||
tests:
|
||||
- text: Create a <code>ul</code> element.
|
||||
testString: 'assert($("ul").length > 0, "Create a <code>ul</code> element.");'
|
||||
testString: assert($("ul").length > 0, 'Create a <code>ul</code> element.');
|
||||
- text: You should have three <code>li</code> elements within your <code>ul</code> element.
|
||||
testString: 'assert($("ul li").length > 2, "You should have three <code>li</code> elements within your <code>ul</code> element.");'
|
||||
testString: assert($("ul li").length > 2, 'You should have three <code>li</code> elements within your <code>ul</code> element.');
|
||||
- text: Make sure your <code>ul</code> element has a closing tag.
|
||||
testString: 'assert(code.match(/<\/ul>/gi) && code.match(/<ul/gi) && code.match(/<\/ul>/gi).length === code.match(/<ul/gi).length, "Make sure your <code>ul</code> element has a closing tag.");'
|
||||
testString: assert(code.match(/<\/ul>/gi) && code.match(/<ul/gi) && code.match(/<\/ul>/gi).length === code.match(/<ul/gi).length, 'Make sure your <code>ul</code> element has a closing tag.');
|
||||
- text: Make sure your <code>li</code> elements have closing tags.
|
||||
testString: 'assert(code.match(/<\/li>/gi) && code.match(/<li[\s>]/gi) && code.match(/<\/li>/gi).length === code.match(/<li[\s>]/gi).length, "Make sure your <code>li</code> elements have closing tags.");'
|
||||
testString: assert(code.match(/<\/li>/gi) && code.match(/<li[\s>]/gi) && code.match(/<\/li>/gi).length === code.match(/<li[\s>]/gi).length, 'Make sure your <code>li</code> elements have closing tags.');
|
||||
|
||||
```
|
||||
|
||||
|
||||
@ -23,11 +23,11 @@ Nest your text field inside a <code>form</code> element, and add the <code>actio
|
||||
```yml
|
||||
tests:
|
||||
- text: Nest your text input element within a <code>form</code> element.
|
||||
testString: 'assert($("form") && $("form").children("input") && $("form").children("input").length > 0, "Nest your text input element within a <code>form</code> element.");'
|
||||
testString: assert($("form") && $("form").children("input") && $("form").children("input").length > 0, 'Nest your text input element within a <code>form</code> element.');
|
||||
- text: Make sure your <code>form</code> has an <code>action</code> attribute which is set to <code>/submit-cat-photo</code>
|
||||
testString: 'assert($("form").attr("action") === "/submit-cat-photo", "Make sure your <code>form</code> has an <code>action</code> attribute which is set to <code>/submit-cat-photo</code>");'
|
||||
testString: assert($("form").attr("action") === "/submit-cat-photo", 'Make sure your <code>form</code> has an <code>action</code> attribute which is set to <code>/submit-cat-photo</code>');
|
||||
- text: Make sure your <code>form</code> element has well-formed open and close tags.
|
||||
testString: 'assert(code.match(/<\/form>/g) && code.match(/<form [^<]*>/g) && code.match(/<\/form>/g).length === code.match(/<form [^<]*>/g).length, "Make sure your <code>form</code> element has well-formed open and close tags.");'
|
||||
testString: assert(code.match(/<\/form>/g) && code.match(/<form [^<]*>/g) && code.match(/<\/form>/g).length === code.match(/<form [^<]*>/g).length, 'Make sure your <code>form</code> element has well-formed open and close tags.');
|
||||
|
||||
```
|
||||
|
||||
|
||||
@ -27,13 +27,13 @@ Add to your form a set of three checkboxes. Each checkbox should be nested withi
|
||||
```yml
|
||||
tests:
|
||||
- text: Your page should have three checkbox elements.
|
||||
testString: 'assert($("input[type="checkbox"]").length > 2, "Your page should have three checkbox elements.");'
|
||||
testString: assert($('input[type="checkbox"]').length > 2, 'Your page should have three checkbox elements.');
|
||||
- text: Each of your three checkbox elements should be nested in its own <code>label</code> element.
|
||||
testString: 'assert($("label > input[type="checkbox"]:only-child").length > 2, "Each of your three checkbox elements should be nested in its own <code>label</code> element.");'
|
||||
testString: assert($('label > input[type="checkbox"]:only-child').length > 2, 'Each of your three checkbox elements should be nested in its own <code>label</code> element.');
|
||||
- text: Make sure each of your <code>label</code> elements has a closing tag.
|
||||
testString: 'assert(code.match(/<\/label>/g) && code.match(/<label/g) && code.match(/<\/label>/g).length === code.match(/<label/g).length, "Make sure each of your <code>label</code> elements has a closing tag.");'
|
||||
testString: assert(code.match(/<\/label>/g) && code.match(/<label/g) && code.match(/<\/label>/g).length === code.match(/<label/g).length, 'Make sure each of your <code>label</code> elements has a closing tag.');
|
||||
- text: Give your checkboxes the <code>name</code> attribute of <code>personality</code>.
|
||||
testString: 'assert($("label > input[type="checkbox"]").filter("[name="personality"]").length > 2, "Give your checkboxes the <code>name</code> attribute of <code>personality</code>.");'
|
||||
testString: assert($('label > input[type="checkbox"]').filter("[name='personality']").length > 2, 'Give your checkboxes the <code>name</code> attribute of <code>personality</code>.');
|
||||
|
||||
```
|
||||
|
||||
|
||||
@ -28,19 +28,19 @@ Add a pair of radio buttons to your form, each nested in its own label element.
|
||||
```yml
|
||||
tests:
|
||||
- text: Your page should have two radio button elements.
|
||||
testString: 'assert($("input[type="radio"]").length > 1, "Your page should have two radio button elements.");'
|
||||
testString: assert($('input[type="radio"]').length > 1, 'Your page should have two radio button elements.');
|
||||
- text: Give your radio buttons the <code>name</code> attribute of <code>indoor-outdoor</code>.
|
||||
testString: 'assert($("label > input[type="radio"]").filter("[name="indoor-outdoor"]").length > 1, "Give your radio buttons the <code>name</code> attribute of <code>indoor-outdoor</code>.");'
|
||||
testString: assert($('label > input[type="radio"]').filter("[name='indoor-outdoor']").length > 1, 'Give your radio buttons the <code>name</code> attribute of <code>indoor-outdoor</code>.');
|
||||
- text: Each of your two radio button elements should be nested in its own <code>label</code> element.
|
||||
testString: 'assert($("label > input[type="radio"]:only-child").length > 1, "Each of your two radio button elements should be nested in its own <code>label</code> element.");'
|
||||
testString: assert($('label > input[type="radio"]:only-child').length > 1, 'Each of your two radio button elements should be nested in its own <code>label</code> element.');
|
||||
- text: Make sure each of your <code>label</code> elements has a closing tag.
|
||||
testString: 'assert((code.match(/<\/label>/g) && code.match(/<label/g) && code.match(/<\/label>/g).length === code.match(/<label/g).length), "Make sure each of your <code>label</code> elements has a closing tag.");'
|
||||
testString: assert((code.match(/<\/label>/g) && code.match(/<label/g) && code.match(/<\/label>/g).length === code.match(/<label/g).length), 'Make sure each of your <code>label</code> elements has a closing tag.');
|
||||
- text: One of your radio buttons should have the label <code>indoor</code>.
|
||||
testString: 'assert($("label").text().match(/indoor/gi), "One of your radio buttons should have the label <code>indoor</code>.");'
|
||||
testString: assert($("label").text().match(/indoor/gi), 'One of your radio buttons should have the label <code>indoor</code>.');
|
||||
- text: One of your radio buttons should have the label <code>outdoor</code>.
|
||||
testString: 'assert($("label").text().match(/outdoor/gi), "One of your radio buttons should have the label <code>outdoor</code>.");'
|
||||
testString: assert($("label").text().match(/outdoor/gi), 'One of your radio buttons should have the label <code>outdoor</code>.');
|
||||
- text: Each of your radio button elements should be added within the <code>form</code> tag.
|
||||
testString: 'assert($("label").parent().get(0).tagName.match("FORM"), "Each of your radio button elements should be added within the <code>form</code> tag.");'
|
||||
testString: assert($("label").parent().get(0).tagName.match('FORM'), 'Each of your radio button elements should be added within the <code>form</code> tag.');
|
||||
|
||||
```
|
||||
|
||||
|
||||
@ -25,7 +25,7 @@ Create an <code>input</code> element of type <code>text</code> below your lists.
|
||||
```yml
|
||||
tests:
|
||||
- text: Your app should have an <code>input</code> element of type <code>text</code>.
|
||||
testString: 'assert($("input[type=text]").length > 0, "Your app should have an <code>input</code> element of type <code>text</code>.");'
|
||||
testString: assert($("input[type=text]").length > 0, 'Your app should have an <code>input</code> element of type <code>text</code>.');
|
||||
|
||||
```
|
||||
|
||||
|
||||
@ -24,24 +24,24 @@ Create an ordered list of the top 3 things cats hate the most.
|
||||
|
||||
```yml
|
||||
tests:
|
||||
- text: 'You should have an ordered list for "Top 3 things cats hate:"'
|
||||
testString: 'assert((/Top 3 things cats hate:/i).test($("ol").prev().text()), "You should have an ordered list for "Top 3 things cats hate:"");'
|
||||
- text: 'You should have an unordered list for "Things cats love:"'
|
||||
testString: 'assert((/Things cats love:/i).test($("ul").prev().text()), "You should have an unordered list for "Things cats love:"");'
|
||||
- text: You should have an ordered list for "Top 3 things cats hate:"
|
||||
testString: assert((/Top 3 things cats hate:/i).test($("ol").prev().text()), 'You should have an ordered list for "Top 3 things cats hate:"');
|
||||
- text: You should have an unordered list for "Things cats love:"
|
||||
testString: assert((/Things cats love:/i).test($("ul").prev().text()), 'You should have an unordered list for "Things cats love:"');
|
||||
- text: You should have only one <code>ul</code> element.
|
||||
testString: 'assert.equal($("ul").length, 1, "You should have only one <code>ul</code> element.");'
|
||||
testString: assert.equal($("ul").length, 1, 'You should have only one <code>ul</code> element.');
|
||||
- text: You should have only one <code>ol</code> element.
|
||||
testString: 'assert.equal($("ol").length, 1, "You should have only one <code>ol</code> element.");'
|
||||
testString: assert.equal($("ol").length, 1, 'You should have only one <code>ol</code> element.');
|
||||
- text: You should have three <code>li</code> elements within your <code>ul</code> element.
|
||||
testString: 'assert.equal($("ul li").length, 3, "You should have three <code>li</code> elements within your <code>ul</code> element.");'
|
||||
testString: assert.equal($("ul li").length, 3, 'You should have three <code>li</code> elements within your <code>ul</code> element.');
|
||||
- text: You should have three <code>li</code> elements within your <code>ol</code> element.
|
||||
testString: 'assert.equal($("ol li").length, 3, "You should have three <code>li</code> elements within your <code>ol</code> element.");'
|
||||
testString: assert.equal($("ol li").length, 3, 'You should have three <code>li</code> elements within your <code>ol</code> element.');
|
||||
- text: Make sure your <code>ul</code> element has a closing tag.
|
||||
testString: 'assert(code.match(/<\/ul>/g) && code.match(/<\/ul>/g).length === code.match(/<ul>/g).length, "Make sure your <code>ul</code> element has a closing tag.");'
|
||||
testString: assert(code.match(/<\/ul>/g) && code.match(/<\/ul>/g).length === code.match(/<ul>/g).length, 'Make sure your <code>ul</code> element has a closing tag.');
|
||||
- text: Make sure your <code>ol</code> element has a closing tag.
|
||||
testString: 'assert(code.match(/<\/ol>/g) && code.match(/<\/ol>/g).length === code.match(/<ol>/g).length, "Make sure your <code>ol</code> element has a closing tag.");'
|
||||
testString: assert(code.match(/<\/ol>/g) && code.match(/<\/ol>/g).length === code.match(/<ol>/g).length, 'Make sure your <code>ol</code> element has a closing tag.');
|
||||
- text: Make sure your <code>li</code> element has a closing tag.
|
||||
testString: 'assert(code.match(/<\/li>/g) && code.match(/<li>/g) && code.match(/<\/li>/g).length === code.match(/<li>/g).length, "Make sure your <code>li</code> element has a closing tag.");'
|
||||
testString: assert(code.match(/<\/li>/g) && code.match(/<li>/g) && code.match(/<\/li>/g).length === code.match(/<li>/g).length, 'Make sure your <code>li</code> element has a closing tag.');
|
||||
|
||||
```
|
||||
|
||||
|
||||
@ -27,11 +27,11 @@ Add a <code>DOCTYPE</code> tag for HTML5 to the top of the blank HTML document i
|
||||
```yml
|
||||
tests:
|
||||
- text: Your code should include a <code><!DOCTYPE html></code> tag.
|
||||
testString: 'assert(code.match(/<!DOCTYPE\s+?html\s*?>/gi), "Your code should include a <code><!DOCTYPE html></code> tag.");'
|
||||
testString: assert(code.match(/<!DOCTYPE\s+?html\s*?>/gi), 'Your code should include a <code><!DOCTYPE html></code> tag.');
|
||||
- text: There should be one <code>html</code> element.
|
||||
testString: 'assert($("html").length == 1, "There should be one <code>html</code> element.");'
|
||||
testString: assert($('html').length == 1, 'There should be one <code>html</code> element.');
|
||||
- text: The <code>html</code> tags should wrap around one <code>h1</code> element.
|
||||
testString: 'assert(code.match(/<html>\s*?<h1>\s*?.*?\s*?<\/h1>\s*?<\/html>/gi), "The <code>html</code> tags should wrap around one <code>h1</code> element.");'
|
||||
testString: assert(code.match(/<html>\s*?<h1>\s*?.*?\s*?<\/h1>\s*?<\/html>/gi), 'The <code>html</code> tags should wrap around one <code>h1</code> element.');
|
||||
|
||||
```
|
||||
|
||||
|
||||
@ -24,17 +24,17 @@ Edit the markup so there's a <code>head</code> and a <code>body</code>. The <cod
|
||||
```yml
|
||||
tests:
|
||||
- text: There should be only one <code>head</code> element on the page.
|
||||
testString: 'assert($("head").length == 1, "There should be only one <code>head</code> element on the page.");'
|
||||
testString: assert($('head').length == 1, 'There should be only one <code>head</code> element on the page.');
|
||||
- text: There should be only one <code>body</code> element on the page.
|
||||
testString: 'assert($("body").length == 1, "There should be only one <code>body</code> element on the page.");'
|
||||
testString: assert($('body').length == 1, 'There should be only one <code>body</code> element on the page.');
|
||||
- text: The <code>head</code> element should be a child of the <code>html</code> element.
|
||||
testString: 'assert($("html").children("head").length == 1, "The <code>head</code> element should be a child of the <code>html</code> element.");'
|
||||
testString: assert($('html').children('head').length == 1, 'The <code>head</code> element should be a child of the <code>html</code> element.');
|
||||
- text: The <code>body</code> element should be a child of the <code>html</code> element.
|
||||
testString: 'assert($("html").children("body").length == 1, "The <code>body</code> element should be a child of the <code>html</code> element.");'
|
||||
testString: assert($('html').children('body').length == 1, 'The <code>body</code> element should be a child of the <code>html</code> element.');
|
||||
- text: The <code>head</code> element should wrap around the <code>title</code> element.
|
||||
testString: 'assert(code.match(/<head>\s*?<title>\s*?.*?\s*?<\/title>\s*?<\/head>/gi), "The <code>head</code> element should wrap around the <code>title</code> element.");'
|
||||
testString: assert(code.match(/<head>\s*?<title>\s*?.*?\s*?<\/title>\s*?<\/head>/gi), 'The <code>head</code> element should wrap around the <code>title</code> element.');
|
||||
- text: The <code>body</code> element should wrap around both the <code>h1</code> and <code>p</code> elements.
|
||||
testString: 'assert($("body").children("h1").length == 1 && $("body").children("p").length == 1, "The <code>body</code> element should wrap around both the <code>h1</code> and <code>p</code> elements.");'
|
||||
testString: assert($('body').children('h1').length == 1 && $('body').children('p').length == 1, 'The <code>body</code> element should wrap around both the <code>h1</code> and <code>p</code> elements.');
|
||||
|
||||
```
|
||||
|
||||
|
||||
@ -22,11 +22,11 @@ Delete your <code>h1</code> element so we can simplify our view.
|
||||
```yml
|
||||
tests:
|
||||
- text: Delete your <code>h1</code> element.
|
||||
testString: 'assert(!code.match(/<h1>/gi) && !code.match(/<\/h1>/gi), "Delete your <code>h1</code> element.");'
|
||||
testString: assert(!code.match(/<h1>/gi) && !code.match(/<\/h1>/gi), 'Delete your <code>h1</code> element.');
|
||||
- text: Leave your <code>h2</code> element on the page.
|
||||
testString: 'assert(code.match(/<h2>[\w\W]*<\/h2>/gi), "Leave your <code>h2</code> element on the page.");'
|
||||
testString: assert(code.match(/<h2>[\w\W]*<\/h2>/gi), 'Leave your <code>h2</code> element on the page.');
|
||||
- text: Leave your <code>p</code> element on the page.
|
||||
testString: 'assert(code.match(/<p>[\w\W]*<\/p>/gi), "Leave your <code>p</code> element on the page.");'
|
||||
testString: assert(code.match(/<p>[\w\W]*<\/p>/gi), 'Leave your <code>p</code> element on the page.');
|
||||
|
||||
```
|
||||
|
||||
|
||||
@ -23,7 +23,7 @@ Replace the text inside your <code>p</code> element with the first few words of
|
||||
```yml
|
||||
tests:
|
||||
- text: Your <code>p</code> element should contain the first few words of the provided <code>kitty ipsum text</code>.
|
||||
testString: 'assert.isTrue((/Kitty(\s)+ipsum/gi).test($("p").text()), "Your <code>p</code> element should contain the first few words of the provided <code>kitty ipsum text</code>.");'
|
||||
testString: assert.isTrue((/Kitty(\s)+ipsum/gi).test($("p").text()), 'Your <code>p</code> element should contain the first few words of the provided <code>kitty ipsum text</code>.');
|
||||
|
||||
```
|
||||
|
||||
|
||||
@ -23,13 +23,13 @@ Add an <code>h2</code> tag that says "CatPhotoApp" to create a second HTML <code
|
||||
```yml
|
||||
tests:
|
||||
- text: Create an <code>h2</code> element.
|
||||
testString: 'assert(($("h2").length > 0), "Create an <code>h2</code> element.");'
|
||||
testString: assert(($("h2").length > 0), 'Create an <code>h2</code> element.');
|
||||
- text: Make sure your <code>h2</code> element has a closing tag.
|
||||
testString: 'assert(code.match(/<\/h2>/g) && code.match(/<\/h2>/g).length === code.match(/<h2>/g).length, "Make sure your <code>h2</code> element has a closing tag.");'
|
||||
testString: assert(code.match(/<\/h2>/g) && code.match(/<\/h2>/g).length === code.match(/<h2>/g).length, 'Make sure your <code>h2</code> element has a closing tag.');
|
||||
- text: Your <code>h2</code> element should have the text "CatPhotoApp".
|
||||
testString: 'assert.isTrue((/cat(\s)?photo(\s)?app/gi).test($("h2").text()), "Your <code>h2</code> element should have the text "CatPhotoApp".");'
|
||||
testString: assert.isTrue((/cat(\s)?photo(\s)?app/gi).test($("h2").text()), 'Your <code>h2</code> element should have the text "CatPhotoApp".');
|
||||
- text: Your <code>h1</code> element should have the text "Hello World".
|
||||
testString: 'assert.isTrue((/hello(\s)+world/gi).test($("h1").text()), "Your <code>h1</code> element should have the text "Hello World".");'
|
||||
testString: assert.isTrue((/hello(\s)+world/gi).test($("h1").text()), 'Your <code>h1</code> element should have the text "Hello World".');
|
||||
|
||||
```
|
||||
|
||||
|
||||
@ -23,11 +23,11 @@ Create a <code>p</code> element below your <code>h2</code> element, and give it
|
||||
```yml
|
||||
tests:
|
||||
- text: Create a <code>p</code> element.
|
||||
testString: 'assert(($("p").length > 0), "Create a <code>p</code> element.");'
|
||||
testString: assert(($("p").length > 0), 'Create a <code>p</code> element.');
|
||||
- text: Your <code>p</code> element should have the text "Hello Paragraph".
|
||||
testString: 'assert.isTrue((/hello(\s)+paragraph/gi).test($("p").text()), "Your <code>p</code> element should have the text "Hello Paragraph".");'
|
||||
testString: assert.isTrue((/hello(\s)+paragraph/gi).test($("p").text()), 'Your <code>p</code> element should have the text "Hello Paragraph".');
|
||||
- text: Make sure your <code>p</code> element has a closing tag.
|
||||
testString: 'assert(code.match(/<\/p>/g) && code.match(/<\/p>/g).length === code.match(/<p/g).length, "Make sure your <code>p</code> element has a closing tag.");'
|
||||
testString: assert(code.match(/<\/p>/g) && code.match(/<\/p>/g).length === code.match(/<p/g).length, 'Make sure your <code>p</code> element has a closing tag.');
|
||||
|
||||
```
|
||||
|
||||
|
||||
@ -25,19 +25,19 @@ Wrap the paragraphs with an opening and closing <code>main</code> tag.
|
||||
```yml
|
||||
tests:
|
||||
- text: You need 2 <code>p</code> elements with Kitty Ipsum text.
|
||||
testString: 'assert($("p").length > 1, "You need 2 <code>p</code> elements with Kitty Ipsum text.");'
|
||||
testString: assert($("p").length > 1, 'You need 2 <code>p</code> elements with Kitty Ipsum text.');
|
||||
- text: Make sure each of your <code>p</code> elements has a closing tag.
|
||||
testString: 'assert(code.match(/<\/p>/g) && code.match(/<\/p>/g).length === code.match(/<p/g).length, "Make sure each of your <code>p</code> elements has a closing tag.");'
|
||||
testString: assert(code.match(/<\/p>/g) && code.match(/<\/p>/g).length === code.match(/<p/g).length, 'Make sure each of your <code>p</code> elements has a closing tag.');
|
||||
- text: Your <code>p</code> element should contain the first few words of the provided additional <code>kitty ipsum text</code>.
|
||||
testString: 'assert.isTrue((/Purr\s+jump\s+eat/gi).test($("p").text()), "Your <code>p</code> element should contain the first few words of the provided additional <code>kitty ipsum text</code>.");'
|
||||
testString: assert.isTrue((/Purr\s+jump\s+eat/gi).test($("p").text()), 'Your <code>p</code> element should contain the first few words of the provided additional <code>kitty ipsum text</code>.');
|
||||
- text: Your code should have one <code>main</code> element.
|
||||
testString: 'assert($("main").length === 1, "Your code should have one <code>main</code> element.");'
|
||||
testString: assert($('main').length === 1, 'Your code should have one <code>main</code> element.');
|
||||
- text: The <code>main</code> element should have two paragraph elements as children.
|
||||
testString: 'assert($("main").children("p").length === 2, "The <code>main</code> element should have two paragraph elements as children.");'
|
||||
testString: assert($("main").children("p").length === 2, 'The <code>main</code> element should have two paragraph elements as children.');
|
||||
- text: The opening <code>main</code> tag should come before the first paragraph tag.
|
||||
testString: 'assert(code.match(/<main>\s*?<p>/g), "The opening <code>main</code> tag should come before the first paragraph tag.");'
|
||||
testString: assert(code.match(/<main>\s*?<p>/g), 'The opening <code>main</code> tag should come before the first paragraph tag.');
|
||||
- text: The closing <code>main</code> tag should come after the second closing paragraph tag.
|
||||
testString: 'assert(code.match(/<\/p>\s*?<\/main>/g), "The closing <code>main</code> tag should come after the second closing paragraph tag.");'
|
||||
testString: assert(code.match(/<\/p>\s*?<\/main>/g), 'The closing <code>main</code> tag should come after the second closing paragraph tag.');
|
||||
|
||||
```
|
||||
|
||||
|
||||
@ -24,11 +24,11 @@ Create an <code>a</code> element that links to <code>http://freecatphotoapp.com<
|
||||
```yml
|
||||
tests:
|
||||
- text: Your <code>a</code> element should have the <code>anchor text</code> of "cat photos".
|
||||
testString: 'assert((/cat photos/gi).test($("a").text()), "Your <code>a</code> element should have the <code>anchor text</code> of "cat photos".");'
|
||||
- text: 'You need an <code>a</code> element that links to <code>http://freecatphotoapp<wbr>.com</code>'
|
||||
testString: 'assert(/http:\/\/(www\.)?freecatphotoapp\.com/gi.test($("a").attr("href")), "You need an <code>a</code> element that links to <code>http://freecatphotoapp<wbr>.com</code>");'
|
||||
testString: assert((/cat photos/gi).test($("a").text()), 'Your <code>a</code> element should have the <code>anchor text</code> of "cat photos".');
|
||||
- text: You need an <code>a</code> element that links to <code>http://freecatphotoapp<wbr>.com</code>
|
||||
testString: assert(/http:\/\/(www\.)?freecatphotoapp\.com/gi.test($("a").attr("href")), 'You need an <code>a</code> element that links to <code>http://freecatphotoapp<wbr>.com</code>');
|
||||
- text: Make sure your <code>a</code> element has a closing tag.
|
||||
testString: 'assert(code.match(/<\/a>/g) && code.match(/<\/a>/g).length === code.match(/<a/g).length, "Make sure your <code>a</code> element has a closing tag.");'
|
||||
testString: assert(code.match(/<\/a>/g) && code.match(/<\/a>/g).length === code.match(/<a/g).length, 'Make sure your <code>a</code> element has a closing tag.');
|
||||
|
||||
```
|
||||
|
||||
|
||||
@ -27,17 +27,17 @@ Then add an <code>id</code> attribute with a value of "footer" to the <code><
|
||||
```yml
|
||||
tests:
|
||||
- text: There should be only one anchor tag on your page.
|
||||
testString: 'assert($("a").length == 1, "There should be only one anchor tag on your page.");'
|
||||
testString: assert($('a').length == 1, 'There should be only one anchor tag on your page.');
|
||||
- text: There should be only one <code>footer</code> tag on your page.
|
||||
testString: 'assert($("footer").length == 1, "There should be only one <code>footer</code> tag on your page.");'
|
||||
- text: 'The <code>a</code> tag should have an <code>href</code> attribute set to "#footer".'
|
||||
testString: 'assert($("a").eq(0).attr("href") == "#footer", "The <code>a</code> tag should have an <code>href</code> attribute set to "#footer".");'
|
||||
testString: assert($('footer').length == 1, 'There should be only one <code>footer</code> tag on your page.');
|
||||
- text: The <code>a</code> tag should have an <code>href</code> attribute set to "#footer".
|
||||
testString: assert($('a').eq(0).attr('href') == "#footer", 'The <code>a</code> tag should have an <code>href</code> attribute set to "#footer".');
|
||||
- text: The <code>a</code> tag should not have a <code>target</code> attribute
|
||||
testString: 'assert(typeof $("a").eq(0).attr("target") == typeof undefined || $("a").eq(0).attr("target") == true, "The <code>a</code> tag should not have a <code>target</code> attribute");'
|
||||
testString: assert(typeof $('a').eq(0).attr('target') == typeof undefined || $('a').eq(0).attr('target') == true, 'The <code>a</code> tag should not have a <code>target</code> attribute');
|
||||
- text: The <code>a</code> text should be "Jump to Bottom".
|
||||
testString: 'assert($("a").eq(0).text().match(/Jump to Bottom/gi), "The <code>a</code> text should be "Jump to Bottom".");'
|
||||
testString: assert($('a').eq(0).text().match(/Jump to Bottom/gi), 'The <code>a</code> text should be "Jump to Bottom".');
|
||||
- text: The <code>footer</code> tag should have an <code>id</code> attribute set to "footer".
|
||||
testString: 'assert($("footer").eq(0).attr("id") == "footer", "The <code>footer</code> tag should have an <code>id</code> attribute set to "footer".");'
|
||||
testString: assert($('footer').eq(0).attr('id') == "footer", 'The <code>footer</code> tag should have an <code>id</code> attribute set to "footer".');
|
||||
|
||||
```
|
||||
|
||||
|
||||
@ -22,8 +22,8 @@ For example: <code>href="#"</code>
|
||||
|
||||
```yml
|
||||
tests:
|
||||
- text: 'Your <code>a</code> element should be a dead link with the value of the <code>href</code> attribute set to "#".'
|
||||
testString: 'assert($("a").attr("href") === "#", "Your <code>a</code> element should be a dead link with the value of the <code>href</code> attribute set to "#".");'
|
||||
- text: Your <code>a</code> element should be a dead link with the value of the <code>href</code> attribute set to "#".
|
||||
testString: assert($("a").attr("href") === "#", 'Your <code>a</code> element should be a dead link with the value of the <code>href</code> attribute set to "#".');
|
||||
|
||||
```
|
||||
|
||||
|
||||
@ -28,22 +28,22 @@ Now nest your existing <code>a</code> element within a new <code>p</code> elemen
|
||||
|
||||
```yml
|
||||
tests:
|
||||
- text: 'You need an <code>a</code> element that links to "http://freecatphotoapp.com".'
|
||||
testString: 'assert(($("a[href=\"http://freecatphotoapp.com\"]").length > 0 || $("a[href=\"http://www.freecatphotoapp.com\"]").length > 0), "You need an <code>a</code> element that links to "http://freecatphotoapp.com".");'
|
||||
- text: You need an <code>a</code> element that links to "http://freecatphotoapp.com".
|
||||
testString: assert(($("a[href=\"http://freecatphotoapp.com\"]").length > 0 || $("a[href=\"http://www.freecatphotoapp.com\"]").length > 0), 'You need an <code>a</code> element that links to "http://freecatphotoapp.com".');
|
||||
- text: Your <code>a</code> element should have the anchor text of "cat photos"
|
||||
testString: 'assert($("a").text().match(/cat\sphotos/gi), "Your <code>a</code> element should have the anchor text of "cat photos"");'
|
||||
testString: assert($("a").text().match(/cat\sphotos/gi), 'Your <code>a</code> element should have the anchor text of "cat photos"');
|
||||
- text: Create a new <code>p</code> element around your <code>a</code> element. There should be at least 3 total <code>p</code> tags in your HTML code.
|
||||
testString: 'assert($("p") && $("p").length > 2, "Create a new <code>p</code> element around your <code>a</code> element. There should be at least 3 total <code>p</code> tags in your HTML code.");'
|
||||
testString: assert($("p") && $("p").length > 2, 'Create a new <code>p</code> element around your <code>a</code> element. There should be at least 3 total <code>p</code> tags in your HTML code.');
|
||||
- text: Your <code>a</code> element should be nested within your new <code>p</code> element.
|
||||
testString: 'assert(($("a[href=\"http://freecatphotoapp.com\"]").parent().is("p") || $("a[href=\"http://www.freecatphotoapp.com\"]").parent().is("p")), "Your <code>a</code> element should be nested within your new <code>p</code> element.");'
|
||||
testString: assert(($("a[href=\"http://freecatphotoapp.com\"]").parent().is("p") || $("a[href=\"http://www.freecatphotoapp.com\"]").parent().is("p")), 'Your <code>a</code> element should be nested within your new <code>p</code> element.');
|
||||
- text: Your <code>p</code> element should have the text "View more " (with a space after it).
|
||||
testString: 'assert(($("a[href=\"http://freecatphotoapp.com\"]").parent().text().match(/View\smore\s/gi) || $("a[href=\"http://www.freecatphotoapp.com\"]").parent().text().match(/View\smore\s/gi)), "Your <code>p</code> element should have the text "View more " (with a space after it).");'
|
||||
testString: assert(($("a[href=\"http://freecatphotoapp.com\"]").parent().text().match(/View\smore\s/gi) || $("a[href=\"http://www.freecatphotoapp.com\"]").parent().text().match(/View\smore\s/gi)), 'Your <code>p</code> element should have the text "View more " (with a space after it).');
|
||||
- text: Your <code>a</code> element should <em>not</em> have the text "View more".
|
||||
testString: 'assert(!$("a").text().match(/View\smore/gi), "Your <code>a</code> element should <em>not</em> have the text "View more".");'
|
||||
testString: assert(!$("a").text().match(/View\smore/gi), 'Your <code>a</code> element should <em>not</em> have the text "View more".');
|
||||
- text: Make sure each of your <code>p</code> elements has a closing tag.
|
||||
testString: 'assert(code.match(/<\/p>/g) && code.match(/<p/g) && code.match(/<\/p>/g).length === code.match(/<p/g).length, "Make sure each of your <code>p</code> elements has a closing tag.");'
|
||||
testString: assert(code.match(/<\/p>/g) && code.match(/<p/g) && code.match(/<\/p>/g).length === code.match(/<p/g).length, 'Make sure each of your <code>p</code> elements has a closing tag.');
|
||||
- text: Make sure each of your <code>a</code> elements has a closing tag.
|
||||
testString: 'assert(code.match(/<\/a>/g) && code.match(/<a/g) && code.match(/<\/a>/g).length === code.match(/<a/g).length, "Make sure each of your <code>a</code> elements has a closing tag.");'
|
||||
testString: assert(code.match(/<\/a>/g) && code.match(/<a/g) && code.match(/<\/a>/g).length === code.match(/<a/g).length, 'Make sure each of your <code>a</code> elements has a closing tag.');
|
||||
|
||||
```
|
||||
|
||||
|
||||
@ -24,13 +24,13 @@ Hint: Try putting your opening <code>div</code> tag above your "Things cats love
|
||||
```yml
|
||||
tests:
|
||||
- text: Nest your <code>p</code> elements inside your <code>div</code> element.
|
||||
testString: 'assert($("div").children("p").length > 1, "Nest your <code>p</code> elements inside your <code>div</code> element.");'
|
||||
testString: assert($("div").children("p").length > 1, 'Nest your <code>p</code> elements inside your <code>div</code> element.');
|
||||
- text: Nest your <code>ul</code> element inside your <code>div</code> element.
|
||||
testString: 'assert($("div").children("ul").length > 0, "Nest your <code>ul</code> element inside your <code>div</code> element.");'
|
||||
testString: assert($("div").children("ul").length > 0, 'Nest your <code>ul</code> element inside your <code>div</code> element.');
|
||||
- text: Nest your <code>ol</code> element inside your <code>div</code> element.
|
||||
testString: 'assert($("div").children("ol").length > 0, "Nest your <code>ol</code> element inside your <code>div</code> element.");'
|
||||
testString: assert($("div").children("ol").length > 0, 'Nest your <code>ol</code> element inside your <code>div</code> element.');
|
||||
- text: Make sure your <code>div</code> element has a closing tag.
|
||||
testString: 'assert(code.match(/<\/div>/g) && code.match(/<\/div>/g).length === code.match(/<div>/g).length, "Make sure your <code>div</code> element has a closing tag.");'
|
||||
testString: assert(code.match(/<\/div>/g) && code.match(/<\/div>/g).length === code.match(/<div>/g).length, 'Make sure your <code>div</code> element has a closing tag.');
|
||||
|
||||
```
|
||||
|
||||
|
||||
@ -30,7 +30,7 @@ To pass the test on this challenge, change your <code>h1</code> element's text t
|
||||
```yml
|
||||
tests:
|
||||
- text: Your <code>h1</code> element should have the text "Hello World".
|
||||
testString: 'assert.isTrue((/hello(\s)+world/gi).test($("h1").text()), "Your <code>h1</code> element should have the text "Hello World".");'
|
||||
testString: assert.isTrue((/hello(\s)+world/gi).test($('h1').text()), 'Your <code>h1</code> element should have the text "Hello World".');
|
||||
|
||||
```
|
||||
|
||||
|
||||
@ -25,11 +25,11 @@ Once you've done this, hover over your image with your cursor. Your cursor's nor
|
||||
```yml
|
||||
tests:
|
||||
- text: Nest the existing <code>img</code> element within an <code>a</code> element.
|
||||
testString: 'assert($("a").children("img").length > 0, "Nest the existing <code>img</code> element within an <code>a</code> element.");'
|
||||
- text: 'Your <code>a</code> element should be a dead link with a <code>href</code> attribute set to <code>#</code>.'
|
||||
testString: 'assert(new RegExp("#").test($("a").children("img").parent().attr("href")), "Your <code>a</code> element should be a dead link with a <code>href</code> attribute set to <code>#</code>.");'
|
||||
testString: assert($("a").children("img").length > 0, 'Nest the existing <code>img</code> element within an <code>a</code> element.');
|
||||
- text: Your <code>a</code> element should be a dead link with a <code>href</code> attribute set to <code>#</code>.
|
||||
testString: assert(new RegExp("#").test($("a").children("img").parent().attr("href")), 'Your <code>a</code> element should be a dead link with a <code>href</code> attribute set to <code>#</code>.');
|
||||
- text: Make sure each of your <code>a</code> elements has a closing tag.
|
||||
testString: 'assert(code.match(/<\/a>/g) && code.match(/<a/g) && code.match(/<\/a>/g).length === code.match(/<a/g).length, "Make sure each of your <code>a</code> elements has a closing tag.");'
|
||||
testString: assert(code.match(/<\/a>/g) && code.match(/<a/g) && code.match(/<\/a>/g).length === code.match(/<a/g).length, 'Make sure each of your <code>a</code> elements has a closing tag.');
|
||||
|
||||
```
|
||||
|
||||
|
||||
@ -23,13 +23,13 @@ Uncomment your <code>h1</code>, <code>h2</code> and <code>p</code> elements.
|
||||
```yml
|
||||
tests:
|
||||
- text: Make your <code>h1</code> element visible on your page by uncommenting it.
|
||||
testString: 'assert($("h1").length > 0, "Make your <code>h1</code> element visible on your page by uncommenting it.");'
|
||||
testString: assert($("h1").length > 0, 'Make your <code>h1</code> element visible on your page by uncommenting it.');
|
||||
- text: Make your <code>h2</code> element visible on your page by uncommenting it.
|
||||
testString: 'assert($("h2").length > 0, "Make your <code>h2</code> element visible on your page by uncommenting it.");'
|
||||
testString: assert($("h2").length > 0, 'Make your <code>h2</code> element visible on your page by uncommenting it.');
|
||||
- text: Make your <code>p</code> element visible on your page by uncommenting it.
|
||||
testString: 'assert($("p").length > 0, "Make your <code>p</code> element visible on your page by uncommenting it.");'
|
||||
- text: 'Be sure to delete all trailing comment tags, i.e. <code>--></code>.'
|
||||
testString: 'assert(!/[^fc]-->/gi.test(code.replace(/ *<!--[^fc]*\n/g,"")), "Be sure to delete all trailing comment tags, i.e. <code>--></code>.");'
|
||||
testString: assert($("p").length > 0, 'Make your <code>p</code> element visible on your page by uncommenting it.');
|
||||
- text: Be sure to delete all trailing comment tags, i.e. <code>--></code>.
|
||||
testString: assert(!/[^fc]-->/gi.test(code.replace(/ *<!--[^fc]*\n/g,'')), 'Be sure to delete all trailing comment tags, i.e. <code>--></code>.');
|
||||
|
||||
```
|
||||
|
||||
|
||||
@ -23,7 +23,7 @@ Then try to submit the form without inputting any text. See how your HTML5 form
|
||||
```yml
|
||||
tests:
|
||||
- text: Your text <code>input</code> element should have the <code>required</code> attribute.
|
||||
testString: 'assert($("input").prop("required"), "Your text <code>input</code> element should have the <code>required</code> attribute.");'
|
||||
testString: assert($("input").prop("required"), 'Your text <code>input</code> element should have the <code>required</code> attribute.');
|
||||
|
||||
```
|
||||
|
||||
|
||||
Reference in New Issue
Block a user