fix: removed assert msg argument (#36405)

This commit is contained in:
Randell Dawson
2019-07-24 02:42:26 -07:00
committed by Oliver Eyton-Williams
parent 1fa0dcb1e1
commit e763330fc3
69 changed files with 178 additions and 178 deletions

View File

@ -26,7 +26,7 @@ Camper Cat happens to be both a coding ninja and an actual ninja, who is buildin
```yml ```yml
tests: tests:
- text: Your <code>img</code> tag should have an <code>alt</code> attribute and it should not be empty. - text: Your <code>img</code> tag should have an <code>alt</code> attribute and it should not be empty.
testString: assert($('img').attr('alt'), 'Your <code>img</code> tag should have an <code>alt</code> attribute and it should not be empty.'); testString: assert($('img').attr('alt'));
``` ```

View File

@ -30,13 +30,13 @@ Camper Cat is setting up a Mortal Kombat tournament and wants to ask his competi
```yml ```yml
tests: tests:
- text: Your code should add one <code>input</code> tag for the date selector field. - text: Your code should add one <code>input</code> tag for the date selector field.
testString: assert($('input').length == 2, 'Your code should add one <code>input</code> tag for the date selector field.'); testString: assert($('input').length == 2);
- text: Your <code>input</code> tag should have a <code>type</code> attribute with a value of date. - text: Your <code>input</code> tag should have a <code>type</code> attribute with a value of date.
testString: assert($('input').attr('type') == 'date', 'Your <code>input</code> tag should have a <code>type</code> attribute with a value of date.'); testString: assert($('input').attr('type') == 'date');
- text: Your <code>input</code> tag should have an <code>id</code> attribute with a value of pickdate. - text: Your <code>input</code> tag should have an <code>id</code> attribute with a value of pickdate.
testString: assert($('input').attr('id') == 'pickdate', 'Your <code>input</code> tag should have an <code>id</code> attribute with a value of pickdate.'); testString: assert($('input').attr('id') == 'pickdate');
- text: Your <code>input</code> tag should have a <code>name</code> attribute with a value of date. - text: Your <code>input</code> tag should have a <code>name</code> attribute with a value of date.
testString: assert($('input').attr('name') == 'date', 'Your <code>input</code> tag should have a <code>name</code> attribute with a value of date.'); testString: assert($('input').attr('name') == 'date');
``` ```

View File

@ -23,7 +23,7 @@ Camper Cat is testing different styles for an important button, but the yellow (
```yml ```yml
tests: tests:
- text: Your code should change the text <code>color</code> for the <code>button</code> to the dark blue. - text: Your code should change the text <code>color</code> for the <code>button</code> to the dark blue.
testString: assert($('button').css('color') == 'rgb(0, 51, 102)', 'Your code should change the text <code>color</code> for the <code>button</code> to the dark blue.'); testString: assert($('button').css('color') == 'rgb(0, 51, 102)');
``` ```

View File

@ -24,9 +24,9 @@ Camper Cat is experimenting with using color for his blog text and background, b
```yml ```yml
tests: tests:
- text: Your code should only change the lightness value for the text <code>color</code> property to a value of 15%. - text: Your code should only change the lightness value for the text <code>color</code> property to a value of 15%.
testString: assert(code.match(/color:\s*?hsl\(0,\s*?55%,\s*?15%\)/gi), 'Your code should only change the lightness value for the text <code>color</code> property to a value of 15%.'); testString: assert(code.match(/color:\s*?hsl\(0,\s*?55%,\s*?15%\)/gi));
- text: Your code should only change the lightness value for the <code>background-color</code> property to a value of 55%. - text: Your code should only change the lightness value for the <code>background-color</code> property to a value of 55%.
testString: assert(code.match(/background-color:\s*?hsl\(120,\s*?25%,\s*?55%\)/gi), 'Your code should only change the lightness value for the <code>background-color</code> property to a value of 55%.'); testString: assert(code.match(/background-color:\s*?hsl\(120,\s*?25%,\s*?55%\)/gi));
``` ```

View File

@ -22,9 +22,9 @@ The link text that Camper Cat is using is not very descriptive without the surro
```yml ```yml
tests: tests:
- text: Your code should move the anchor <code>a</code> tags from around the words "Click here" to wrap around the words "information about batteries". - text: Your code should move the anchor <code>a</code> tags from around the words "Click here" to wrap around the words "information about batteries".
testString: assert($('a').text().match(/^(information about batteries)$/g), 'Your code should move the anchor <code>a</code> tags from around the words "Click here" to wrap around the words "information about batteries".'); testString: assert($('a').text().match(/^(information about batteries)$/g));
- text: Make sure your <code>a</code> element has a closing tag. - 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 href=(''|"")>/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 href=(''|"")>/g).length);
``` ```

View File

@ -33,19 +33,19 @@ Time to take a break from Camper Cat and meet fellow camper Zersiax (@zersiax),
```yml ```yml
tests: tests:
- text: Your code should have one <code>audio</code> tag. - text: Your code should have one <code>audio</code> tag.
testString: assert($('audio').length === 1, 'Your code should have one <code>audio</code> tag.'); testString: assert($('audio').length === 1);
- text: Make sure your <code>audio</code> element has a closing tag. - text: Make sure your <code>audio</code> element has a closing tag.
testString: assert(code.match(/<\/audio>/g).length === 1 && code.match(/<audio.*>[\s\S]*<\/audio>/g), 'Make sure your <code>audio</code> element has a closing tag.'); testString: assert(code.match(/<\/audio>/g).length === 1 && code.match(/<audio.*>[\s\S]*<\/audio>/g));
- text: The <code>audio</code> tag should have the <code>controls</code> attribute. - text: The <code>audio</code> tag should have the <code>controls</code> attribute.
testString: assert($('audio').attr('controls'), 'The <code>audio</code> tag should have the <code>controls</code> attribute.'); testString: assert($('audio').attr('controls'));
- text: Your code should have one <code>source</code> tag. - text: Your code should have one <code>source</code> tag.
testString: assert($('source').length === 1, 'Your code should have one <code>source</code> tag.'); testString: assert($('source').length === 1);
- text: Your <code>source</code> tag should be inside the <code>audio</code> tags. - text: Your <code>source</code> tag should be inside the <code>audio</code> tags.
testString: assert($('audio').children('source').length === 1, 'Your <code>source</code> tag should be inside the <code>audio</code> tags.'); testString: assert($('audio').children('source').length === 1);
- text: The value for the <code>src</code> attribute on the <code>source</code> tag should match the link in the instructions exactly. - text: The value for the <code>src</code> attribute on the <code>source</code> tag should match the link in the instructions exactly.
testString: assert($('source').attr('src') === 'https://s3.amazonaws.com/freecodecamp/screen-reader.mp3', 'The value for the <code>src</code> attribute on the <code>source</code> tag should match the link in the instructions exactly.'); testString: assert($('source').attr('src') === 'https://s3.amazonaws.com/freecodecamp/screen-reader.mp3');
- text: Your code should include a <code>type</code> attribute on the <code>source</code> tag with a value of audio/mpeg. - text: Your code should include a <code>type</code> attribute on the <code>source</code> tag with a value of audio/mpeg.
testString: assert($('source').attr('type') === 'audio/mpeg', 'Your code should include a <code>type</code> attribute on the <code>source</code> tag with a value of audio/mpeg.'); testString: assert($('source').attr('type') === 'audio/mpeg');
``` ```

View File

@ -34,17 +34,17 @@ Camper Cat is hard at work creating a stacked bar chart showing the amount of ti
```yml ```yml
tests: tests:
- text: Your code should have one <code>figure</code> tag. - text: Your code should have one <code>figure</code> tag.
testString: assert($('figure').length == 1, 'Your code should have one <code>figure</code> tag.'); testString: assert($('figure').length == 1);
- text: Your code should have one <code>figcaption</code> tag. - text: Your code should have one <code>figcaption</code> tag.
testString: assert($('figcaption').length == 1, 'Your code should have one <code>figcaption</code> tag.'); testString: assert($('figcaption').length == 1);
- text: Your code should not have any <code>div</code> tags. - text: Your code should not have any <code>div</code> tags.
testString: assert($('div').length == 0, 'Your code should not have any <code>div</code> tags.'); testString: assert($('div').length == 0);
- text: Your code should not have any <code>p</code> tags. - text: Your code should not have any <code>p</code> tags.
testString: assert($('p').length == 0, 'Your code should not have any <code>p</code> tags.'); testString: assert($('p').length == 0);
- text: The <code>figcaption</code> should be a child of the <code>figure</code> tag. - text: The <code>figcaption</code> should be a child of the <code>figure</code> tag.
testString: assert($('figure').children('figcaption').length == 1, 'The <code>figcaption</code> should be a child of the <code>figure</code> tag.'); testString: assert($('figure').children('figcaption').length == 1);
- text: Make sure your <code>figure</code> element has a closing tag. - text: Make sure your <code>figure</code> element has a closing tag.
testString: assert(code.match(/<\/figure>/g) && code.match(/<\/figure>/g).length === code.match(/<figure>/g).length, 'Make sure your <code>figure</code> element has a closing tag.'); testString: assert(code.match(/<\/figure>/g) && code.match(/<\/figure>/g).length === code.match(/<figure>/g).length);
``` ```

View File

@ -32,9 +32,9 @@ Camper Cat expects a lot of interest in his thoughtful blog posts and wants to i
```yml ```yml
tests: tests:
- text: Your code should have a <code>for</code> attribute on the <code>label</code> tag that is not empty. - text: Your code should have a <code>for</code> attribute on the <code>label</code> tag that is not empty.
testString: assert($('label').attr('for'), 'Your code should have a <code>for</code> attribute on the <code>label</code> tag that is not empty.'); testString: assert($('label').attr('for'));
- text: Your <code>for</code> attribute value should match the <code>id</code> value on the email <code>input</code>. - text: Your <code>for</code> attribute value should match the <code>id</code> value on the email <code>input</code>.
testString: assert($('label').attr('for') == 'email', 'Your <code>for</code> attribute value should match the <code>id</code> value on the email <code>input</code>.'); testString: assert($('label').attr('for') == 'email');
``` ```

View File

@ -22,9 +22,9 @@ Camper Cat's choice of light gray text on a white background for his recent blog
```yml ```yml
tests: tests:
- text: Your code should change the text <code>color</code> for the <code>body</code> to the darker gray. - text: Your code should change the text <code>color</code> for the <code>body</code> to the darker gray.
testString: assert($('body').css('color') == 'rgb(99, 99, 99)', 'Your code should change the text <code>color</code> for the <code>body</code> to the darker gray.'); testString: assert($('body').css('color') == 'rgb(99, 99, 99)');
- text: Your code should not change the <code>background-color</code> for the <code>body</code>. - text: Your code should not change the <code>background-color</code> for the <code>body</code>.
testString: assert($('body').css('background-color') == 'rgb(255, 255, 255)', 'Your code should not change the <code>background-color</code> for the <code>body</code>.'); testString: assert($('body').css('background-color') == 'rgb(255, 255, 255)');
``` ```

View File

@ -24,9 +24,9 @@ Camper Cat has some big ideas for his ninja weapons page. Help him set up his ma
```yml ```yml
tests: tests:
- text: Your code should have one <code>main</code> tag. - text: Your code should have one <code>main</code> tag.
testString: assert($('main').length == 1, 'Your code should have one <code>main</code> tag.'); testString: assert($('main').length == 1);
- text: The <code>main</code> tags should be between the closing <code>header</code> tag and the opening <code>footer</code> tag. - text: The <code>main</code> tags should be between the closing <code>header</code> tag and the opening <code>footer</code> tag.
testString: assert(code.match(/<\/header>\s*?<main>\s*?<\/main>/gi), 'The <code>main</code> tags should be between the closing <code>header</code> tag and the opening <code>footer</code> tag.'); testString: assert(code.match(/<\/header>\s*?<main>\s*?<\/main>/gi));
``` ```

View File

@ -25,9 +25,9 @@ Camper Cat has coded a skeleton page for the blog part of his website. He's plan
```yml ```yml
tests: tests:
- text: Your <code>img</code> tag should have an <code>alt</code> attribute. - text: Your <code>img</code> tag should have an <code>alt</code> attribute.
testString: assert(!($('img').attr('alt') == undefined), 'Your <code>img</code> tag should have an <code>alt</code> attribute.'); testString: assert(!($('img').attr('alt') == undefined));
- text: The <code>alt</code> attribute should be set to an empty string. - text: The <code>alt</code> attribute should be set to an empty string.
testString: assert($('img').attr('alt') == '', 'The <code>alt</code> attribute should be set to an empty string.'); testString: assert($('img').attr('alt') == '');
``` ```

View File

@ -40,13 +40,13 @@ Camper Cat created a really cool stacked bar chart for his training page, and pu
```yml ```yml
tests: tests:
- text: Your code should set the <code>position</code> property of the <code>sr-only</code> class to a value of absolute. - text: Your code should set the <code>position</code> property of the <code>sr-only</code> class to a value of absolute.
testString: assert($('.sr-only').css('position') == 'absolute', 'Your code should set the <code>position</code> property of the <code>sr-only</code> class to a value of absolute.'); testString: assert($('.sr-only').css('position') == 'absolute');
- text: Your code should set the <code>left</code> property of the <code>sr-only</code> class to a value of -10000px. - text: Your code should set the <code>left</code> property of the <code>sr-only</code> class to a value of -10000px.
testString: assert($('.sr-only').css('left') == '-10000px', 'Your code should set the <code>left</code> property of the <code>sr-only</code> class to a value of -10000px.'); testString: assert($('.sr-only').css('left') == '-10000px');
- text: Your code should set the <code>width</code> property of the <code>sr-only</code> class to a value of 1 pixel. - text: Your code should set the <code>width</code> property of the <code>sr-only</code> class to a value of 1 pixel.
testString: assert(code.match(/width:\s*?1px/gi), 'Your code should set the <code>width</code> property of the <code>sr-only</code> class to a value of 1 pixel.'); testString: assert(code.match(/width:\s*?1px/gi));
- text: Your code should set the <code>height</code> property of the <code>sr-only</code> class to a value of 1 pixel. - text: Your code should set the <code>height</code> property of the <code>sr-only</code> class to a value of 1 pixel.
testString: assert(code.match(/height:\s*?1px/gi), 'Your code should set the <code>height</code> property of the <code>sr-only</code> class to a value of 1 pixel.'); testString: assert(code.match(/height:\s*?1px/gi));
``` ```

View File

@ -24,13 +24,13 @@ Camper Cat wants the links around the two blog article titles to have keyboard s
```yml ```yml
tests: tests:
- text: Your code should add an <code>accesskey</code> attribute to the <code>a</code> tag with the <code>id</code> of "first". - text: Your code should add an <code>accesskey</code> attribute to the <code>a</code> tag with the <code>id</code> of "first".
testString: assert($('#first').attr('accesskey'), 'Your code should add an <code>accesskey</code> attribute to the <code>a</code> tag with the <code>id</code> of "first".'); testString: assert($('#first').attr('accesskey'));
- text: Your code should add an <code>accesskey</code> attribute to the <code>a</code> tag with the <code>id</code> of "second". - text: Your code should add an <code>accesskey</code> attribute to the <code>a</code> tag with the <code>id</code> of "second".
testString: assert($('#second').attr('accesskey'), 'Your code should add an <code>accesskey</code> attribute to the <code>a</code> tag with the <code>id</code> of "second".'); testString: assert($('#second').attr('accesskey'));
- text: Your code should set the <code>accesskey</code> attribute on the <code>a</code> tag with the <code>id</code> of "first" to "g". Note that case matters. - text: Your code should set the <code>accesskey</code> attribute on the <code>a</code> tag with the <code>id</code> of "first" to "g". Note that case matters.
testString: assert($('#first').attr('accesskey') == 'g', 'Your code should set the <code>accesskey</code> attribute on the <code>a</code> tag with the <code>id</code> of "first" to "g". Note that case matters.'); testString: assert($('#first').attr('accesskey') == 'g');
- text: Your code should set the <code>accesskey</code> attribute on the <code>a</code> tag with the <code>id</code> of "second" to "c". Note that case matters. - text: Your code should set the <code>accesskey</code> attribute on the <code>a</code> tag with the <code>id</code> of "second" to "c". Note that case matters.
testString: assert($('#second').attr('accesskey') == 'c', 'Your code should set the <code>accesskey</code> attribute on the <code>a</code> tag with the <code>id</code> of "second" to "c". Note that case matters.'); testString: assert($('#second').attr('accesskey') == 'c');
``` ```

View File

@ -21,11 +21,11 @@ Camper Cat's training page is making good progress. Change the <code>div</code>
```yml ```yml
tests: tests:
- text: Your code should have one <code>footer</code> tag. - text: Your code should have one <code>footer</code> tag.
testString: assert($('footer').length == 1, 'Your code should have one <code>footer</code> tag.'); testString: assert($('footer').length == 1);
- text: Your code should not have any <code>div</code> tags. - text: Your code should not have any <code>div</code> tags.
testString: assert($('div').length == 0, 'Your code should not have any <code>div</code> tags.'); testString: assert($('div').length == 0);
- text: Your code should have an opening and closing <code>footer</code> tag. - text: Your code should have an opening and closing <code>footer</code> tag.
testString: assert(code.match(/<footer>\s*&copy; 2018 Camper Cat\s*<\/footer>/g), 'Your code should have an opening and closing <code>footer</code> tag.'); testString: assert(code.match(/<footer>\s*&copy; 2018 Camper Cat\s*<\/footer>/g));
``` ```

View File

@ -23,13 +23,13 @@ Camper Cat is writing some great articles about ninja training, and wants to add
```yml ```yml
tests: tests:
- text: Your code should have one <code>header</code> tag. - text: Your code should have one <code>header</code> tag.
testString: assert($('header').length == 1, 'Your code should have one <code>header</code> tag.'); testString: assert($('header').length == 1);
- text: Your <code>header</code> tags should wrap around the <code>h1</code>. - text: Your <code>header</code> tags should wrap around the <code>h1</code>.
testString: assert($('header').children('h1').length == 1, 'Your <code>header</code> tags should wrap around the <code>h1</code>.'); testString: assert($('header').children('h1').length == 1);
- text: Your code should not have any <code>div</code> tags. - text: Your code should not have any <code>div</code> tags.
testString: assert($('div').length == 0, 'Your code should not have any <code>div</code> tags.'); testString: assert($('div').length == 0);
- text: Make sure your <code>header</code> element has a closing tag. - text: Make sure your <code>header</code> element has a closing tag.
testString: assert(code.match(/<\/header>/g) && code.match(/<\/header>/g).length === code.match(/<header>/g).length, 'Make sure your <code>header</code> element has a closing tag.'); testString: assert(code.match(/<\/header>/g) && code.match(/<\/header>/g).length === code.match(/<header>/g).length);
``` ```

View File

@ -22,13 +22,13 @@ Camper Cat included navigation links at the top of his training page, but wrappe
```yml ```yml
tests: tests:
- text: Your code should have one <code>nav</code> tag. - text: Your code should have one <code>nav</code> tag.
testString: assert($('nav').length == 1, 'Your code should have one <code>nav</code> tag.'); testString: assert($('nav').length == 1);
- text: Your <code>nav</code> tags should wrap around the <code>ul</code> and its list items. - text: Your <code>nav</code> tags should wrap around the <code>ul</code> and its list items.
testString: assert($('nav').children('ul').length == 1, 'Your <code>nav</code> tags should wrap around the <code>ul</code> and its list items.'); testString: assert($('nav').children('ul').length == 1);
- text: Your code should not have any <code>div</code> tags. - text: Your code should not have any <code>div</code> tags.
testString: assert($('div').length == 0, 'Your code should not have any <code>div</code> tags.'); testString: assert($('div').length == 0);
- text: Make sure your <code>nav</code> element has a closing tag. - text: Make sure your <code>nav</code> element has a closing tag.
testString: assert(code.match(/<\/nav>/g) && code.match(/<\/nav>/g).length === code.match(/<nav>/g).length, 'Make sure your <code>nav</code> element has a closing tag.'); testString: assert(code.match(/<\/nav>/g) && code.match(/<\/nav>/g).length === code.match(/<nav>/g).length);
``` ```

View File

@ -26,13 +26,13 @@ Camper Cat wants a page on his site dedicated to becoming a ninja. Help him fix
```yml ```yml
tests: tests:
- text: Your code should have 6 <code>h3</code> tags. - text: Your code should have 6 <code>h3</code> tags.
testString: assert($("h3").length === 6, 'Your code should have 6 <code>h3</code> tags.'); testString: assert($("h3").length === 6);
- text: Your code should have 6 <code>h3</code> closing tags. - text: Your code should have 6 <code>h3</code> closing tags.
testString: assert((code.match(/\/h3/g) || []).length===6,'Your code should have 6 <code>h3</code> closing tags.'); testString: assert((code.match(/\/h3/g) || []).length===6);
- text: Your code should not have any <code>h5</code> tags. - text: Your code should not have any <code>h5</code> tags.
testString: assert($("h5").length === 0, "Your code should not have any <code>h5</code> tags."); testString: assert($("h5").length === 0, "Your code should not have any <code>h5</code> tags.");
- text: Your code should not have any <code>h5</code> closing tags. - text: Your code should not have any <code>h5</code> closing tags.
testString: assert(/\/h5/.test(code)===false, 'Your code should not have any <code>h5</code> closing tags'); testString: assert(/\/h5/.test(code)===false);
``` ```
</section> </section>

View File

@ -24,9 +24,9 @@ Camper Cat created a new survey to collect information about his users. He knows
```yml ```yml
tests: tests:
- text: Your code should add a <code>tabindex</code> attribute to the <code>p</code> tag that holds the form instructions. - text: Your code should add a <code>tabindex</code> attribute to the <code>p</code> tag that holds the form instructions.
testString: assert($('p').attr('tabindex'), 'Your code should add a <code>tabindex</code> attribute to the <code>p</code> tag that holds the form instructions.'); testString: assert($('p').attr('tabindex'));
- text: Your code should set the <code>tabindex</code> attribute on the <code>p</code> tag to a value of 0. - text: Your code should set the <code>tabindex</code> attribute on the <code>p</code> tag to a value of 0.
testString: assert($('p').attr('tabindex') == '0', 'Your code should set the <code>tabindex</code> attribute on the <code>p</code> tag to a value of 0.'); testString: assert($('p').attr('tabindex') == '0');
``` ```

View File

@ -26,13 +26,13 @@ Camper Cat has a search field on his Inspirational Quotes page that he plans to
```yml ```yml
tests: tests:
- text: Your code should add a <code>tabindex</code> attribute to the search <code>input</code> tag. - text: Your code should add a <code>tabindex</code> attribute to the search <code>input</code> tag.
testString: assert($('#search').attr('tabindex'), 'Your code should add a <code>tabindex</code> attribute to the search <code>input</code> tag.'); testString: assert($('#search').attr('tabindex'));
- text: Your code should add a <code>tabindex</code> attribute to the submit <code>input</code> tag. - text: Your code should add a <code>tabindex</code> attribute to the submit <code>input</code> tag.
testString: assert($('#submit').attr('tabindex'), 'Your code should add a <code>tabindex</code> attribute to the submit <code>input</code> tag.'); testString: assert($('#submit').attr('tabindex'));
- text: Your code should set the <code>tabindex</code> attribute on the search <code>input</code> tag to a value of 1. - text: Your code should set the <code>tabindex</code> attribute on the search <code>input</code> tag to a value of 1.
testString: assert($('#search').attr('tabindex') == '1', 'Your code should set the <code>tabindex</code> attribute on the search <code>input</code> tag to a value of 1.'); testString: assert($('#search').attr('tabindex') == '1');
- text: Your code should set the <code>tabindex</code> attribute on the submit <code>input</code> tag to a value of 2. - text: Your code should set the <code>tabindex</code> attribute on the submit <code>input</code> tag to a value of 2.
testString: assert($('#submit').attr('tabindex') == '2', 'Your code should set the <code>tabindex</code> attribute on the submit <code>input</code> tag to a value of 2.'); testString: assert($('#submit').attr('tabindex') == '2');
``` ```

View File

@ -31,9 +31,9 @@ Camper Cat used <code>article</code> tags to wrap the posts on his blog page, bu
```yml ```yml
tests: tests:
- text: Your code should have three <code>article</code> tags. - text: Your code should have three <code>article</code> tags.
testString: assert($('article').length == 3, 'Your code should have three <code>article</code> tags.'); testString: assert($('article').length == 3);
- text: Your code should not have any <code>div</code> tags. - text: Your code should not have any <code>div</code> tags.
testString: assert($('div').length == 0, 'Your code should not have any <code>div</code> tags.'); testString: assert($('div').length == 0);
``` ```

View File

@ -39,15 +39,15 @@ Camper Cat wants information about the ninja level of his users when they sign u
```yml ```yml
tests: tests:
- text: Your code should have a <code>fieldset</code> tag around the radio button set. - text: Your code should have a <code>fieldset</code> tag around the radio button set.
testString: assert($('fieldset').length == 1, 'Your code should have a <code>fieldset</code> tag around the radio button set.'); testString: assert($('fieldset').length == 1);
- text: Make sure your <code>fieldset</code> element has a closing tag. - text: Make sure your <code>fieldset</code> element has a closing tag.
testString: assert(code.match(/<\/fieldset>/g) && code.match(/<\/fieldset>/g).length === code.match(/<fieldset>/g).length, 'Make sure your <code>fieldset</code> element has a closing tag.'); testString: assert(code.match(/<\/fieldset>/g) && code.match(/<\/fieldset>/g).length === code.match(/<fieldset>/g).length);
- text: Your code should have a <code>legend</code> tag around the text asking what level ninja a user is. - text: Your code should have a <code>legend</code> tag around the text asking what level ninja a user is.
testString: assert($('legend').length == 1, 'Your code should have a <code>legend</code> tag around the text asking what level ninja a user is.'); testString: assert($('legend').length == 1);
- text: Your code should not have any <code>div</code> tags. - text: Your code should not have any <code>div</code> tags.
testString: assert($('div').length == 0, 'Your code should not have any <code>div</code> tags.'); testString: assert($('div').length == 0);
- text: Your code should no longer have a <code>p</code> tag around the text asking what level ninja a user is. - text: Your code should no longer have a <code>p</code> tag around the text asking what level ninja a user is.
testString: assert($('p').length == 4, 'Your code should no longer have a <code>p</code> tag around the text asking what level ninja a user is.'); testString: assert($('p').length == 4);
``` ```

View File

@ -37,9 +37,9 @@ The element now has an id of <code>thumbnail</code>. With this selector, use the
```yml ```yml
tests: tests:
- text: Your code should add a <code>box-shadow</code> property for the <code>thumbnail</code> id. - text: Your code should add a <code>box-shadow</code> property for the <code>thumbnail</code> id.
testString: assert(code.match(/#thumbnail\s*?{\s*?box-shadow/g), 'Your code should add a <code>box-shadow</code> property for the <code>thumbnail</code> id.'); testString: assert(code.match(/#thumbnail\s*?{\s*?box-shadow/g));
- text: You should use the given CSS for the <code>box-shadow</code> value. - text: You should use the given CSS for the <code>box-shadow</code> value.
testString: assert(code.match(/box-shadow:\s*?0\s+?10px\s+?20px\s+?rgba\(\s*?0\s*?,\s*?0\s*?,\s*?0\s*?,\s*?0?\.19\)\s*?,\s*?0\s+?6px\s+?6px\s+?rgba\(\s*?0\s*?,\s*?0\s*?,\s*?0\s*?,\s*?0?\.23\)/gi), 'You should use the given CSS for the <code>box-shadow</code> value.'); testString: assert(code.match(/box-shadow:\s*?0\s+?10px\s+?20px\s+?rgba\(\s*?0\s*?,\s*?0\s*?,\s*?0\s*?,\s*?0?\.19\)\s*?,\s*?0\s+?6px\s+?6px\s+?rgba\(\s*?0\s*?,\s*?0\s*?,\s*?0\s*?,\s*?0?\.23\)/gi));
``` ```

View File

@ -27,9 +27,9 @@ tests:
- text: Your code should add a <code>background-color</code> property to the <code>h4</code> element set to <code>rgba(45, 45, 45, 0.1)</code>. - text: Your code should add a <code>background-color</code> property to the <code>h4</code> element set to <code>rgba(45, 45, 45, 0.1)</code>.
testString: assert(code.match(/(background-color|background):\s*?rgba\(\s*?45\s*?,\s*?45\s*?,\s*?45\s*?,\s*?0?\.1\s*?\);/gi), 'Your code should add a <code>background-color</code> property to the <code>h4</code> element set to <code>rgba(45, 45, 45, 0.1)</code>. Be sure to use a <code>;</code> after your property declaration.'); testString: assert(code.match(/(background-color|background):\s*?rgba\(\s*?45\s*?,\s*?45\s*?,\s*?45\s*?,\s*?0?\.1\s*?\);/gi), 'Your code should add a <code>background-color</code> property to the <code>h4</code> element set to <code>rgba(45, 45, 45, 0.1)</code>. Be sure to use a <code>;</code> after your property declaration.');
- text: Your code should add a <code>padding</code> property to the <code>h4</code> element and set it to 10 pixels. - text: Your code should add a <code>padding</code> property to the <code>h4</code> element and set it to 10 pixels.
testString: assert($('h4').css('padding-top') == '10px' && $('h4').css('padding-right') == '10px' && $('h4').css('padding-bottom') == '10px' && $('h4').css('padding-left') == '10px', 'Your code should add a <code>padding</code> property to the <code>h4</code> element and set it to 10 pixels.'); testString: assert($('h4').css('padding-top') == '10px' && $('h4').css('padding-right') == '10px' && $('h4').css('padding-bottom') == '10px' && $('h4').css('padding-left') == '10px');
- text: The <code>height</code> property on the <code>h4</code> element should be removed. - text: The <code>height</code> property on the <code>h4</code> element should be removed.
testString: assert(!($('h4').css('height') == '25px'), 'The <code>height</code> property on the <code>h4</code> element should be removed.'); testString: assert(!($('h4').css('height') == '25px'));
``` ```

View File

@ -21,13 +21,13 @@ This page will use a shade of teal (<code>#09A7A1</code>) as the dominant color,
```yml ```yml
tests: tests:
- text: 'The <code>header</code> element should have a <code>background-color</code> of #09A7A1.' - text: 'The <code>header</code> element should have a <code>background-color</code> of #09A7A1.'
testString: "assert($('header').css('background-color') == 'rgb(9, 167, 161)', 'The <code>header</code> element should have a <code>background-color</code> of #09A7A1.');" testString: "assert($('header').css('background-color') == 'rgb(9, 167, 161)');"
- text: 'The <code>footer</code> element should have a <code>background-color</code> of #09A7A1.' - text: 'The <code>footer</code> element should have a <code>background-color</code> of #09A7A1.'
testString: "assert($('footer').css('background-color') == 'rgb(9, 167, 161)', 'The <code>footer</code> element should have a <code>background-color</code> of #09A7A1.');" testString: "assert($('footer').css('background-color') == 'rgb(9, 167, 161)');"
- text: 'The <code>h2</code> element should have a <code>color</code> of #09A7A1.' - text: 'The <code>h2</code> element should have a <code>color</code> of #09A7A1.'
testString: "assert($('h2').css('color') == 'rgb(9, 167, 161)', 'The <code>h2</code> element should have a <code>color</code> of #09A7A1.');" testString: "assert($('h2').css('color') == 'rgb(9, 167, 161)');"
- text: 'The <code>button</code> element should have a <code>background-color</code> of #FF790E.' - text: 'The <code>button</code> element should have a <code>background-color</code> of #FF790E.'
testString: "assert($('button').css('background-color') == 'rgb(255, 121, 14)', 'The <code>button</code> element should have a <code>background-color</code> of #FF790E.');" testString: "assert($('button').css('background-color') == 'rgb(255, 121, 14)');"
``` ```

View File

@ -29,9 +29,9 @@ The code editor has a CSS rule to style all <code>a</code> tags black. Add a rul
```yml ```yml
tests: tests:
- text: The anchor tag <code>color</code> should remain black, only add CSS rules for the <code>:hover</code> state. - text: The anchor tag <code>color</code> should remain black, only add CSS rules for the <code>:hover</code> state.
testString: assert($('a').css('color') == 'rgb(0, 0, 0)', 'The anchor tag <code>color</code> should remain black, only add CSS rules for the <code>:hover</code> state.'); testString: assert($('a').css('color') == 'rgb(0, 0, 0)');
- text: The anchor tag should have a <code>color</code> of blue on hover. - text: The anchor tag should have a <code>color</code> of blue on hover.
testString: assert(code.match(/a:hover\s*?{\s*?color:\s*?(blue|rgba\(\s*?0\s*?,\s*?0\s*?,\s*?255\s*?,\s*?1\s*?\)|#00F|rgb\(\s*?0\s*?,\s*?0\s*?,\s*?255\s*?\))\s*?;\s*?}/gi), 'The anchor tag should have a <code>color</code> of blue on hover.'); testString: assert(code.match(/a:hover\s*?{\s*?color:\s*?(blue|rgba\(\s*?0\s*?,\s*?0\s*?,\s*?255\s*?,\s*?1\s*?\)|#00F|rgb\(\s*?0\s*?,\s*?0\s*?,\s*?255\s*?\))\s*?;\s*?}/gi));
``` ```

View File

@ -26,17 +26,17 @@ Change the <code>background-color</code> of each <code>div</code> element based
```yml ```yml
tests: tests:
- text: Your code should use the <code>hsl()</code> property to declare the color green. - text: Your code should use the <code>hsl()</code> property to declare the color green.
testString: assert(code.match(/\.green\s*?{\s*?background-color:\s*?hsl/gi), 'Your code should use the <code>hsl()</code> property to declare the color green.'); testString: assert(code.match(/\.green\s*?{\s*?background-color:\s*?hsl/gi));
- text: Your code should use the <code>hsl()</code> property to declare the color cyan. - text: Your code should use the <code>hsl()</code> property to declare the color cyan.
testString: assert(code.match(/\.cyan\s*?{\s*?background-color:\s*?hsl/gi), 'Your code should use the <code>hsl()</code> property to declare the color cyan.'); testString: assert(code.match(/\.cyan\s*?{\s*?background-color:\s*?hsl/gi));
- text: Your code should use the <code>hsl()</code> property to declare the color blue. - text: Your code should use the <code>hsl()</code> property to declare the color blue.
testString: assert(code.match(/\.blue\s*?{\s*?background-color:\s*?hsl/gi), 'Your code should use the <code>hsl()</code> property to declare the color blue.'); testString: assert(code.match(/\.blue\s*?{\s*?background-color:\s*?hsl/gi));
- text: The <code>div</code> element with class <code>green</code> should have a <code>background-color</code> of green. - text: The <code>div</code> element with class <code>green</code> should have a <code>background-color</code> of green.
testString: assert($('.green').css('background-color') == 'rgb(0, 255, 0)', 'The <code>div</code> element with class <code>green</code> should have a <code>background-color</code> of green.'); testString: assert($('.green').css('background-color') == 'rgb(0, 255, 0)');
- text: The <code>div</code> element with class <code>cyan</code> should have a <code>background-color</code> of cyan. - text: The <code>div</code> element with class <code>cyan</code> should have a <code>background-color</code> of cyan.
testString: assert($('.cyan').css('background-color') == 'rgb(0, 255, 255)', 'The <code>div</code> element with class <code>cyan</code> should have a <code>background-color</code> of cyan.'); testString: assert($('.cyan').css('background-color') == 'rgb(0, 255, 255)');
- text: The <code>div</code> element with class <code>blue</code> should have a <code>background-color</code> of blue. - text: The <code>div</code> element with class <code>blue</code> should have a <code>background-color</code> of blue.
testString: assert($('.blue').css('background-color') == 'rgb(0, 0, 255)', 'The <code>div</code> element with class <code>blue</code> should have a <code>background-color</code> of blue.'); testString: assert($('.blue').css('background-color') == 'rgb(0, 0, 255)');
``` ```

View File

@ -21,7 +21,7 @@ To make the heading significantly larger than the paragraph, change the <code>fo
```yml ```yml
tests: tests:
- text: Your code should add a <code>font-size</code> property to the <code>h4</code> element set to 27 pixels. - text: Your code should add a <code>font-size</code> property to the <code>h4</code> element set to 27 pixels.
testString: assert($('h4').css('font-size') == '27px', 'Your code should add a <code>font-size</code> property to the <code>h4</code> element set to 27 pixels.'); testString: assert($('h4').css('font-size') == '27px');
``` ```

View File

@ -21,7 +21,7 @@ All elements have a default <code>background-color</code> of <code>transparent</
```yml ```yml
tests: tests:
- text: The <code>nav</code> element should have a <code>background-color</code> of the adjusted cyan tone using the <code>hsl()</code> property. - text: The <code>nav</code> element should have a <code>background-color</code> of the adjusted cyan tone using the <code>hsl()</code> property.
testString: assert(code.match(/nav\s*?{\s*?background-color:\s*?hsl\(180,\s*?80%,\s*?25%\)/gi), 'The <code>nav</code> element should have a <code>background-color</code> of the adjusted cyan tone using the <code>hsl()</code> property.'); testString: assert(code.match(/nav\s*?{\s*?background-color:\s*?hsl\(180,\s*?80%,\s*?25%\)/gi));
``` ```

View File

@ -22,7 +22,7 @@ Alter the animation rate for the element with the class name of <code>star-1</co
```yml ```yml
tests: tests:
- text: The <code>@keyframes</code> rule for the <code>star-1</code> class should be 50%. - text: The <code>@keyframes</code> rule for the <code>star-1</code> class should be 50%.
testString: assert(code.match(/twinkle-1\s*?{\s*?50%/g), 'The <code>@keyframes</code> rule for the <code>star-1</code> class should be 50%.'); testString: assert(code.match(/twinkle-1\s*?{\s*?50%/g));
``` ```

View File

@ -23,7 +23,7 @@ To keep the ball bouncing on the right on a continuous loop, change the <code>an
```yml ```yml
tests: tests:
- text: The <code>animation-iteration-count</code> property should have a value of infinite. - text: The <code>animation-iteration-count</code> property should have a value of infinite.
testString: assert($('#ball').css('animation-iteration-count') == 'infinite', 'The <code>animation-iteration-count</code> property should have a value of infinite.'); testString: assert($('#ball').css('animation-iteration-count') == 'infinite');
``` ```

View File

@ -22,11 +22,11 @@ Set the <code>animation-duration</code> of the elements with the classes <code>s
```yml ```yml
tests: tests:
- text: The <code>animation-duration</code> property for the star with class <code>star-1</code> should remain at 1s. - text: The <code>animation-duration</code> property for the star with class <code>star-1</code> should remain at 1s.
testString: assert($('.star-1').css('animation-duration') == '1s', 'The <code>animation-duration</code> property for the star with class <code>star-1</code> should remain at 1s.'); testString: assert($('.star-1').css('animation-duration') == '1s');
- text: The <code>animation-duration</code> property for the star with class <code>star-2</code> should be 0.9s. - text: The <code>animation-duration</code> property for the star with class <code>star-2</code> should be 0.9s.
testString: assert($('.star-2').css('animation-duration') == '0.9s', 'The <code>animation-duration</code> property for the star with class <code>star-2</code> should be 0.9s.'); testString: assert($('.star-2').css('animation-duration') == '0.9s');
- text: The <code>animation-duration</code> property for the star with class <code>star-3</code> should be 1.1s. - text: The <code>animation-duration</code> property for the star with class <code>star-3</code> should be 1.1s.
testString: assert($('.star-3').css('animation-duration') == '1.1s', 'The <code>animation-duration</code> property for the star with class <code>star-3</code> should be 1.1s.'); testString: assert($('.star-3').css('animation-duration') == '1.1s');
``` ```

View File

@ -22,7 +22,7 @@ Center the <code>div</code> on the page by adding a <code>margin</code> property
```yml ```yml
tests: tests:
- text: The <code>div</code> should have a <code>margin</code> set to auto. - text: The <code>div</code> should have a <code>margin</code> set to auto.
testString: assert(code.match(/margin:\s*?auto;/g), 'The <code>div</code> should have a <code>margin</code> set to auto.'); testString: assert(code.match(/margin:\s*?auto;/g));
``` ```

View File

@ -32,9 +32,9 @@ Change the <code>position</code> of the <code>h2</code> to <code>relative</code>
```yml ```yml
tests: tests:
- text: The <code>h2</code> element should have a <code>position</code> property set to <code>relative</code>. - text: The <code>h2</code> element should have a <code>position</code> property set to <code>relative</code>.
testString: assert($('h2').css('position') == 'relative', 'The <code>h2</code> element should have a <code>position</code> property set to <code>relative</code>.'); testString: assert($('h2').css('position') == 'relative');
- text: Your code should use a CSS offset to relatively position the <code>h2</code> 15px away from the <code>top</code> of where it normally sits. - text: Your code should use a CSS offset to relatively position the <code>h2</code> 15px away from the <code>top</code> of where it normally sits.
testString: assert($('h2').css('top') == '15px', 'Your code should use a CSS offset to relatively position the <code>h2</code> 15px away from the <code>top</code> of where it normally sits.'); testString: assert($('h2').css('top') == '15px');
``` ```

View File

@ -22,9 +22,9 @@ For the elements with id of <code>ball1</code> and <code>ball2</code>, add an <c
```yml ```yml
tests: tests:
- text: The value of the <code>animation-timing-function</code> property for the element with the id <code>ball1</code> should be linear. - text: The value of the <code>animation-timing-function</code> property for the element with the id <code>ball1</code> should be linear.
testString: assert($('#ball1').css('animation-timing-function') == 'linear', 'The value of the <code>animation-timing-function</code> property for the element with the id <code>ball1</code> should be linear.'); testString: assert($('#ball1').css('animation-timing-function') == 'linear');
- text: The value of the <code>animation-timing-function</code> property for the element with the id <code>ball2</code> should be ease-out. - text: The value of the <code>animation-timing-function</code> property for the element with the id <code>ball2</code> should be ease-out.
testString: assert($('#ball2').css('animation-timing-function') == 'ease-out', 'The value of the <code>animation-timing-function</code> property for the element with the id <code>ball2</code> should be ease-out.'); testString: assert($('#ball2').css('animation-timing-function') == 'ease-out');
``` ```

View File

@ -21,7 +21,7 @@ Add a <code>z-index</code> property to the element with the class name of <code>
```yml ```yml
tests: tests:
- text: The element with class <code>first</code> should have a <code>z-index</code> value of 2. - text: The element with class <code>first</code> should have a <code>z-index</code> value of 2.
testString: assert($('.first').css('z-index') == '2', 'The element with class <code>first</code> should have a <code>z-index</code> value of 2.'); testString: assert($('.first').css('z-index') == '2');
``` ```

View File

@ -24,11 +24,11 @@ Manipulate the square element in the editor to create the moon shape. First, cha
```yml ```yml
tests: tests:
- text: The value of the <code>background-color</code> property should be set to <code>transparent</code>. - text: The value of the <code>background-color</code> property should be set to <code>transparent</code>.
testString: assert(code.match(/background-color:\s*?transparent;/gi), 'The value of the <code>background-color</code> property should be set to <code>transparent</code>.'); testString: assert(code.match(/background-color:\s*?transparent;/gi));
- text: The value of the <code>border-radius</code> property should be set to <code>50%</code>. - text: The value of the <code>border-radius</code> property should be set to <code>50%</code>.
testString: assert(code.match(/border-radius:\s*?50%;/gi), 'The value of the <code>border-radius</code> property should be set to <code>50%</code>.'); testString: assert(code.match(/border-radius:\s*?50%;/gi));
- text: The value of the <code>box-shadow</code> property should be set to 25px for <code>offset-x</code>, 10px for <code>offset-y</code>, 0 for <code>blur-radius</code>, 0 for <code>spread-radius</code>, and finally blue for the color. - text: The value of the <code>box-shadow</code> property should be set to 25px for <code>offset-x</code>, 10px for <code>offset-y</code>, 0 for <code>blur-radius</code>, 0 for <code>spread-radius</code>, and finally blue for the color.
testString: assert(code.match(/box-shadow:\s*?25px\s+?10px\s+?0(px)?\s+?0(px)?\s+?blue\s*?;/gi), 'The value of the <code>box-shadow</code> property should be set to 25px for <code>offset-x</code>, 10px for <code>offset-y</code>, 0 for <code>blur-radius</code>, 0 for <code>spread-radius</code>, and finally blue for the color.'); testString: assert(code.match(/box-shadow:\s*?25px\s+?10px\s+?0(px)?\s+?0(px)?\s+?blue\s*?;/gi));
``` ```

View File

@ -22,9 +22,9 @@ Add an <code>hr</code> tag underneath the <code>h4</code> which contains the car
```yml ```yml
tests: tests:
- text: Your code should add an <code>hr</code> tag to the markup. - text: Your code should add an <code>hr</code> tag to the markup.
testString: assert($('hr').length == 1, 'Your code should add an <code>hr</code> tag to the markup.'); testString: assert($('hr').length == 1);
- text: The <code>hr</code> tag should come between the title and the paragraph. - text: The <code>hr</code> tag should come between the title and the paragraph.
testString: assert(code.match(/<\/h4>\s*?<hr(>|\s*?\/>)\s*?<p>/gi), 'The <code>hr</code> tag should come between the title and the paragraph.'); testString: assert(code.match(/<\/h4>\s*?<hr(>|\s*?\/>)\s*?<p>/gi));
``` ```

View File

@ -39,13 +39,13 @@ Finally, in the <code>heart::before</code> selector, set its <code>content</code
```yml ```yml
tests: tests:
- text: The <code>background-color</code> property of the <code>heart::after</code> selector should be pink. - text: The <code>background-color</code> property of the <code>heart::after</code> selector should be pink.
testString: assert(code.match(/\.heart::after\s*?{\s*?background-color\s*?:\s*?pink\s*?;/gi), 'The <code>background-color</code> property of the <code>heart::after</code> selector should be pink.'); testString: assert(code.match(/\.heart::after\s*?{\s*?background-color\s*?:\s*?pink\s*?;/gi));
- text: The <code>border-radius</code> of the <code>heart::after</code> selector should be 50%. - text: The <code>border-radius</code> of the <code>heart::after</code> selector should be 50%.
testString: assert(code.match(/border-radius\s*?:\s*?50%/gi).length == 2, 'The <code>border-radius</code> of the <code>heart::after</code> selector should be 50%.'); testString: assert(code.match(/border-radius\s*?:\s*?50%/gi).length == 2);
- text: The <code>transform</code> property for the <code>heart</code> class should use a <code>rotate()</code> function set to -45 degrees. - text: The <code>transform</code> property for the <code>heart</code> class should use a <code>rotate()</code> function set to -45 degrees.
testString: assert(code.match(/transform\s*?:\s*?rotate\(\s*?-45deg\s*?\)/gi), 'The <code>transform</code> property for the <code>heart</code> class should use a <code>rotate()</code> function set to -45 degrees.'); testString: assert(code.match(/transform\s*?:\s*?rotate\(\s*?-45deg\s*?\)/gi));
- text: The <code>content</code> of the <code>heart::before</code> selector should be an empty string. - text: The <code>content</code> of the <code>heart::before</code> selector should be an empty string.
testString: assert(code.match(/\.heart::before\s*?{\s*?content\s*?:\s*?("|')\1\s*?;/gi), 'The <code>content</code> of the <code>heart::before</code> selector should be an empty string.'); testString: assert(code.match(/\.heart::before\s*?{\s*?content\s*?:\s*?("|')\1\s*?;/gi));
``` ```

View File

@ -40,11 +40,11 @@ Add a horizontal motion to the <code>div</code> animation. Using the <code>left<
```yml ```yml
tests: tests:
- text: The <code>@keyframes</code> rule for <code>0%</code> should use the <code>left</code> offset of 0px. - text: The <code>@keyframes</code> rule for <code>0%</code> should use the <code>left</code> offset of 0px.
testString: assert(code.match(/0%\s*?{\s*?background-color:\s*?blue;\s*?top:\s*?0(px)?;\s*?left:\s*?0(px)?;\s*?}/gi), 'The <code>@keyframes</code> rule for <code>0%</code> should use the <code>left</code> offset of 0px.'); testString: assert(code.match(/0%\s*?{\s*?background-color:\s*?blue;\s*?top:\s*?0(px)?;\s*?left:\s*?0(px)?;\s*?}/gi));
- text: The <code>@keyframes</code> rule for <code>50%</code> should use the <code>left</code> offset of 25px. - text: The <code>@keyframes</code> rule for <code>50%</code> should use the <code>left</code> offset of 25px.
testString: assert(code.match(/50%\s*?{\s*?background-color:\s*?green;\s*?top:\s*?50px;\s*?left:\s*?25px;\s*?}/gi), 'The <code>@keyframes</code> rule for <code>50%</code> should use the <code>left</code> offset of 25px.'); testString: assert(code.match(/50%\s*?{\s*?background-color:\s*?green;\s*?top:\s*?50px;\s*?left:\s*?25px;\s*?}/gi));
- text: The <code>@keyframes</code> rule for <code>100%</code> should use the <code>left</code> offset of -25px. - text: The <code>@keyframes</code> rule for <code>100%</code> should use the <code>left</code> offset of -25px.
testString: assert(code.match(/100%\s*?{\s*?background-color:\s*?yellow;\s*?top:\s*?0(px)?;\s*?left:\s*?-25px;\s*?}/gi), 'The <code>@keyframes</code> rule for <code>100%</code> should use the <code>left</code> offset of -25px.'); testString: assert(code.match(/100%\s*?{\s*?background-color:\s*?yellow;\s*?top:\s*?0(px)?;\s*?left:\s*?-25px;\s*?}/gi));
``` ```

View File

@ -21,7 +21,7 @@ Using the url of <code>https://cdn-media-1.freecodecamp.org/imgr/MJAkxbh.png</co
```yml ```yml
tests: tests:
- text: Your <code>body</code> element should have a <code>background</code> property set to a <code>url()</code> with the given link. - text: Your <code>body</code> element should have a <code>background</code> property set to a <code>url()</code> with the given link.
testString: assert(code.match(/background:\s*?url\(\s*("|'|)https:\/\/cdn-media-1\.freecodecamp\.org\/imgr\/MJAkxbh\.png\1\s*\)/gi), 'Your <code>body</code> element should have a <code>background</code> property set to a <code>url()</code> with the given link.'); testString: assert(code.match(/background:\s*?url\(\s*("|'|)https:\/\/cdn-media-1\.freecodecamp\.org\/imgr\/MJAkxbh\.png\1\s*\)/gi));
``` ```

View File

@ -26,9 +26,9 @@ Align the <code>h4</code> tag's text, which says "Google", to the center. Then j
```yml ```yml
tests: tests:
- text: Your code should use the text-align property on the <code>h4</code> tag to set it to center. - text: Your code should use the text-align property on the <code>h4</code> tag to set it to center.
testString: assert($('h4').css('text-align') == 'center', 'Your code should use the text-align property on the <code>h4</code> tag to set it to center.'); testString: assert($('h4').css('text-align') == 'center');
- text: Your code should use the text-align property on the <code>p</code> tag to set it to justify. - text: Your code should use the text-align property on the <code>p</code> tag to set it to justify.
testString: assert($('p').css('text-align') == 'justify', 'Your code should use the text-align property on the <code>p</code> tag to set it to justify.'); testString: assert($('p').css('text-align') == 'justify');
``` ```

View File

@ -22,7 +22,7 @@ Target the element with the id of <code>ball</code> and add the <code>opacity</c
```yml ```yml
tests: tests:
- text: The <code>keyframes</code> rule for fade should set the <code>opacity</code> property to 0.1 at 50%. - text: The <code>keyframes</code> rule for fade should set the <code>opacity</code> property to 0.1 at 50%.
testString: assert(code.match(/@keyframes fade\s*?{\s*?50%\s*?{\s*?(?:left:\s*?60%;\s*?opacity:\s*?0?\.1;|opacity:\s*?0?\.1;\s*?left:\s*?60%;)/gi), 'The <code>keyframes</code> rule for fade should set the <code>opacity</code> property to 0.1 at 50%.'); testString: assert(code.match(/@keyframes fade\s*?{\s*?50%\s*?{\s*?(?:left:\s*?60%;\s*?opacity:\s*?0?\.1;|opacity:\s*?0?\.1;\s*?left:\s*?60%;)/gi));
``` ```

View File

@ -23,7 +23,7 @@ Set the <code>opacity</code> of the anchor tags to 0.7 using <code>links</code>
```yml ```yml
tests: tests:
- text: Your code should set the <code>opacity</code> property to 0.7 on the anchor tags by selecting the class of <code>links</code>. - text: Your code should set the <code>opacity</code> property to 0.7 on the anchor tags by selecting the class of <code>links</code>.
testString: assert(/\.links\s*\{[^}]+opacity\s*:\s*0.7;/.test(code), 'Your code should set the <code>opacity</code> property to 0.7 on the anchor tags by selecting the class of <code>links</code>.'); testString: assert(/\.links\s*\{[^}]+opacity\s*:\s*0.7;/.test(code));
``` ```

View File

@ -27,9 +27,9 @@ Change the <code>background-color</code> property of the <code>blue</code> and <
```yml ```yml
tests: tests:
- text: The <code>div</code> element with class <code>blue</code> should have a <code>background-color</code> of blue. - text: The <code>div</code> element with class <code>blue</code> should have a <code>background-color</code> of blue.
testString: assert($('.blue').css('background-color') == 'rgb(0, 0, 255)', 'The <code>div</code> element with class <code>blue</code> should have a <code>background-color</code> of blue.'); testString: assert($('.blue').css('background-color') == 'rgb(0, 0, 255)');
- text: The <code>div</code> element with class <code>yellow</code> should have a <code>background-color</code> of yellow. - text: The <code>div</code> element with class <code>yellow</code> should have a <code>background-color</code> of yellow.
testString: assert($('.yellow').css('background-color') == 'rgb(255, 255, 0)', 'The <code>div</code> element with class <code>yellow</code> should have a <code>background-color</code> of yellow.'); testString: assert($('.yellow').css('background-color') == 'rgb(255, 255, 0)');
``` ```

View File

@ -25,13 +25,13 @@ Change the <code>background-color</code> property of the <code>orange</code>, <c
```yml ```yml
tests: tests:
- text: The <code>div</code> element with class <code>orange</code> should have a <code>background-color</code> of orange. - text: The <code>div</code> element with class <code>orange</code> should have a <code>background-color</code> of orange.
testString: assert($('.orange').css('background-color') == 'rgb(255, 127, 0)', 'The <code>div</code> element with class <code>orange</code> should have a <code>background-color</code> of orange.'); testString: assert($('.orange').css('background-color') == 'rgb(255, 127, 0)');
- text: The <code>div</code> element with class <code>cyan</code> should have a <code>background-color</code> of cyan. - text: The <code>div</code> element with class <code>cyan</code> should have a <code>background-color</code> of cyan.
testString: assert($('.cyan').css('background-color') == 'rgb(0, 255, 255)', 'The <code>div</code> element with class <code>cyan</code> should have a <code>background-color</code> of cyan.'); testString: assert($('.cyan').css('background-color') == 'rgb(0, 255, 255)');
- text: The <code>div</code> element with class <code>raspberry</code> should have a <code>background-color</code> of raspberry. - text: The <code>div</code> element with class <code>raspberry</code> should have a <code>background-color</code> of raspberry.
testString: assert($('.raspberry').css('background-color') == 'rgb(255, 0, 127)', 'The <code>div</code> element with class <code>raspberry</code> should have a <code>background-color</code> of raspberry.'); testString: assert($('.raspberry').css('background-color') == 'rgb(255, 0, 127)');
- text: All <code>background-color</code> values for the color classes should be hex codes and not color names. - text: All <code>background-color</code> values for the color classes should be hex codes and not color names.
testString: assert(!/background-color:\s(orange|cyan|raspberry)/.test(code), 'All <code>background-color</code> values for the color classes should be hex codes and not color names.'); testString: assert(!/background-color:\s(orange|cyan|raspberry)/.test(code));
``` ```

View File

@ -25,9 +25,9 @@ For the element with the id of <code>ball1</code>, change the value of the <code
```yml ```yml
tests: tests:
- text: The value of the <code>animation-timing-function</code> property for the element with the id <code>ball1</code> should be the linear-equivalent cubic-bezier function. - text: The value of the <code>animation-timing-function</code> property for the element with the id <code>ball1</code> should be the linear-equivalent cubic-bezier function.
testString: assert($('#ball1').css('animation-timing-function') == 'cubic-bezier(0.25, 0.25, 0.75, 0.75)', 'The value of the <code>animation-timing-function</code> property for the element with the id <code>ball1</code> should be the linear-equivalent cubic-bezier function.'); testString: assert($('#ball1').css('animation-timing-function') == 'cubic-bezier(0.25, 0.25, 0.75, 0.75)');
- text: The value of the <code>animation-timing-function</code> property for the element with the id <code>ball2</code> should not change. - text: The value of the <code>animation-timing-function</code> property for the element with the id <code>ball2</code> should not change.
testString: assert($('#ball2').css('animation-timing-function') == 'ease-out', 'The value of the <code>animation-timing-function</code> property for the element with the id <code>ball2</code> should not change.'); testString: assert($('#ball2').css('animation-timing-function') == 'ease-out');
``` ```

View File

@ -42,17 +42,17 @@ Create an animation for the element with the id <code>rect</code>, by setting th
```yml ```yml
tests: tests:
- text: The element with id of <code>rect</code> should have an <code>animation-name</code> property with a value of rainbow. - text: The element with id of <code>rect</code> should have an <code>animation-name</code> property with a value of rainbow.
testString: assert($('#rect').css('animation-name') == 'rainbow', 'The element with id of <code>rect</code> should have an <code>animation-name</code> property with a value of rainbow.'); testString: assert($('#rect').css('animation-name') == 'rainbow');
- text: The element with id of <code>rect</code> should have an <code>animation-duration</code> property with a value of 4s. - text: The element with id of <code>rect</code> should have an <code>animation-duration</code> property with a value of 4s.
testString: assert($('#rect').css('animation-duration') == '4s', 'The element with id of <code>rect</code> should have an <code>animation-duration</code> property with a value of 4s.'); testString: assert($('#rect').css('animation-duration') == '4s');
- text: The <code>@keyframes</code> rule should use the <code>animation-name</code> of rainbow. - text: The <code>@keyframes</code> rule should use the <code>animation-name</code> of rainbow.
testString: assert(code.match(/@keyframes\s+?rainbow\s*?{/g), 'The <code>@keyframes</code> rule should use the <code>animation-name</code> of rainbow.'); testString: assert(code.match(/@keyframes\s+?rainbow\s*?{/g));
- text: The <code>@keyframes</code> rule for rainbow should use a <code>background-color</code> of blue at 0%. - text: The <code>@keyframes</code> rule for rainbow should use a <code>background-color</code> of blue at 0%.
testString: assert(code.match(/0%\s*?{\s*?background-color:\s*?blue;\s*?}/gi), 'The <code>@keyframes</code> rule for rainbow should use a <code>background-color</code> of blue at 0%.'); testString: assert(code.match(/0%\s*?{\s*?background-color:\s*?blue;\s*?}/gi));
- text: The <code>@keyframes</code> rule for rainbow should use a <code>background-color</code> of green at 50%. - text: The <code>@keyframes</code> rule for rainbow should use a <code>background-color</code> of green at 50%.
testString: assert(code.match(/50%\s*?{\s*?background-color:\s*?green;\s*?}/gi), 'The <code>@keyframes</code> rule for rainbow should use a <code>background-color</code> of green at 50%.'); testString: assert(code.match(/50%\s*?{\s*?background-color:\s*?green;\s*?}/gi));
- text: The <code>@keyframes</code> rule for rainbow should use a <code>background-color</code> of yellow at 100%. - text: The <code>@keyframes</code> rule for rainbow should use a <code>background-color</code> of yellow at 100%.
testString: assert(code.match(/100%\s*?{\s*?background-color:\s*?yellow;\s*?}/gi), 'The <code>@keyframes</code> rule for rainbow should use a <code>background-color</code> of yellow at 100%.'); testString: assert(code.match(/100%\s*?{\s*?background-color:\s*?yellow;\s*?}/gi));
``` ```

View File

@ -22,11 +22,11 @@ Lock the <code>#searchbar</code> element to the top-right of its <code>section</
```yml ```yml
tests: tests:
- text: The <code>#searchbar</code> element should have a <code>position</code> set to <code>absolute</code>. - text: The <code>#searchbar</code> element should have a <code>position</code> set to <code>absolute</code>.
testString: assert($('#searchbar').css('position') == 'absolute', 'The <code>#searchbar</code> element should have a <code>position</code> set to <code>absolute</code>.'); testString: assert($('#searchbar').css('position') == 'absolute');
- text: Your code should use the <code>top</code> CSS offset of 50 pixels on the <code>#searchbar</code> element. - text: Your code should use the <code>top</code> CSS offset of 50 pixels on the <code>#searchbar</code> element.
testString: assert($('#searchbar').css('top') == '50px', 'Your code should use the <code>top</code> CSS offset of 50 pixels on the <code>#searchbar</code> element.'); testString: assert($('#searchbar').css('top') == '50px');
- text: Your code should use the <code>right</code> CSS offset of 50 pixels on the <code>#searchbar</code> element. - text: Your code should use the <code>right</code> CSS offset of 50 pixels on the <code>#searchbar</code> element.
testString: assert($('#searchbar').css('right') == '50px', 'Your code should use the <code>right</code> CSS offset of 50 pixels on the <code>#searchbar</code> element.'); testString: assert($('#searchbar').css('right') == '50px');
``` ```

View File

@ -22,11 +22,11 @@ The navigation bar in the code is labeled with an id of <code>navbar</code>. Cha
```yml ```yml
tests: tests:
- text: The <code>#navbar</code> element should have a <code>position</code> set to <code>fixed</code>. - text: The <code>#navbar</code> element should have a <code>position</code> set to <code>fixed</code>.
testString: assert($('#navbar').css('position') == 'fixed', 'The <code>#navbar</code> element should have a <code>position</code> set to <code>fixed</code>.'); testString: assert($('#navbar').css('position') == 'fixed');
- text: Your code should use the <code>top</code> CSS offset of 0 pixels on the <code>#navbar</code> element. - text: Your code should use the <code>top</code> CSS offset of 0 pixels on the <code>#navbar</code> element.
testString: assert($('#navbar').css('top') == '0px', 'Your code should use the <code>top</code> CSS offset of 0 pixels on the <code>#navbar</code> element.'); testString: assert($('#navbar').css('top') == '0px');
- text: Your code should use the <code>left</code> CSS offset of 0 pixels on the <code>#navbar</code> element. - text: Your code should use the <code>left</code> CSS offset of 0 pixels on the <code>#navbar</code> element.
testString: assert($('#navbar').css('left') == '0px', 'Your code should use the <code>left</code> CSS offset of 0 pixels on the <code>#navbar</code> element.'); testString: assert($('#navbar').css('left') == '0px');
``` ```

View File

@ -22,9 +22,9 @@ Keep the heart beating by adding the <code>animation-iteration-count</code> prop
```yml ```yml
tests: tests:
- text: The <code>animation-iteration-count</code> property for the <code>heart</code> class should have a value of infinite. - text: The <code>animation-iteration-count</code> property for the <code>heart</code> class should have a value of infinite.
testString: assert($('.heart').css('animation-iteration-count') == 'infinite', 'The <code>animation-iteration-count</code> property for the <code>heart</code> class should have a value of infinite.'); testString: assert($('.heart').css('animation-iteration-count') == 'infinite');
- text: The <code>animation-iteration-count</code> property for the <code>back</code> class should have a value of infinite. - text: The <code>animation-iteration-count</code> property for the <code>back</code> class should have a value of infinite.
testString: assert($('.back').css('animation-iteration-count') == 'infinite', 'The <code>animation-iteration-count</code> property for the <code>back</code> class should have a value of infinite.'); testString: assert($('.back').css('animation-iteration-count') == 'infinite');
``` ```

View File

@ -25,7 +25,7 @@ Change value of the <code>animation-timing-function</code> of the element with t
```yml ```yml
tests: tests:
- text: The value of the <code>animation-timing-function</code> property for the element with the id <code>green</code> should be a <code>cubic-bezier</code> function with x1, y1, x2, y2 values as specified. - text: The value of the <code>animation-timing-function</code> property for the element with the id <code>green</code> should be a <code>cubic-bezier</code> function with x1, y1, x2, y2 values as specified.
testString: assert($('#green').css('animation-timing-function') == 'cubic-bezier(0.311, 0.441, 0.444, 1.649)', 'The value of the <code>animation-timing-function</code> property for the element with the id <code>green</code> should be a <code>cubic-bezier</code> function with x1, y1, x2, y2 values as specified.'); testString: assert($('#green').css('animation-timing-function') == 'cubic-bezier(0.311, 0.441, 0.444, 1.649)');
``` ```

View File

@ -23,7 +23,7 @@ Set the <code>animation-fill-mode</code> property of <code>button:hover</code> t
```yml ```yml
tests: tests:
- text: <code>button:hover</code> should have a <code>animation-fill-mode</code> property with a value of <code>forwards</code>. - text: <code>button:hover</code> should have a <code>animation-fill-mode</code> property with a value of <code>forwards</code>.
testString: assert(code.match(/button\s*?:\s*?hover\s*?{[\s\S]*animation-fill-mode\s*?:\s*?forwards\s*?;[\s\S]*}/gi) && code.match(/button\s*?:\s*?hover\s*?{[\s\S]*animation-name\s*?:\s*?background-color\s*?;[\s\S]*}/gi) && code.match(/button\s*?:\s*?hover\s*?{[\s\S]*animation-duration\s*?:\s*?500ms\s*?;[\s\S]*}/gi), '<code>button:hover</code> should have a <code>animation-fill-mode</code> property with a value of <code>forwards</code>.'); testString: assert(code.match(/button\s*?:\s*?hover\s*?{[\s\S]*animation-fill-mode\s*?:\s*?forwards\s*?;[\s\S]*}/gi) && code.match(/button\s*?:\s*?hover\s*?{[\s\S]*animation-name\s*?:\s*?background-color\s*?;[\s\S]*}/gi) && code.match(/button\s*?:\s*?hover\s*?{[\s\S]*animation-duration\s*?:\s*?500ms\s*?;[\s\S]*}/gi));
``` ```

View File

@ -22,9 +22,9 @@ Use CSS offsets to move the <code>h2</code> 15 pixels to the right and 10 pixels
```yml ```yml
tests: tests:
- text: Your code should use a CSS offset to relatively position the <code>h2</code> 10px upwards. In other words, move it 10px away from the <code>bottom</code> of where it normally sits. - text: Your code should use a CSS offset to relatively position the <code>h2</code> 10px upwards. In other words, move it 10px away from the <code>bottom</code> of where it normally sits.
testString: assert($('h2').css('bottom') == '10px', 'Your code should use a CSS offset to relatively position the <code>h2</code> 10px upwards. In other words, move it 10px away from the <code>bottom</code> of where it normally sits.'); testString: assert($('h2').css('bottom') == '10px');
- text: Your code should use a CSS offset to relatively position the <code>h2</code> 15px towards the right. In other words, move it 15px away from the <code>left</code> of where it normally sits. - text: Your code should use a CSS offset to relatively position the <code>h2</code> 15px towards the right. In other words, move it 15px away from the <code>left</code> of where it normally sits.
testString: assert($('h2').css('left') == '15px', 'Your code should use a CSS offset to relatively position the <code>h2</code> 15px towards the right. In other words, move it 15px away from the <code>left</code> of where it normally sits.'); testString: assert($('h2').css('left') == '15px');
``` ```

View File

@ -21,9 +21,9 @@ The given markup would work well as a two-column layout, with the <code>section<
```yml ```yml
tests: tests:
- text: The element with id <code>left</code> should have a <code>float</code> value of <code>left</code>. - text: The element with id <code>left</code> should have a <code>float</code> value of <code>left</code>.
testString: assert($('#left').css('float') == 'left', 'The element with id <code>left</code> should have a <code>float</code> value of <code>left</code>.'); testString: assert($('#left').css('float') == 'left');
- text: The element with id <code>right</code> should have a <code>float</code> value of <code>right</code>. - text: The element with id <code>right</code> should have a <code>float</code> value of <code>right</code>.
testString: assert($('#right').css('float') == 'right', 'The element with id <code>right</code> should have a <code>float</code> value of <code>right</code>.'); testString: assert($('#right').css('float') == 'right');
``` ```

View File

@ -21,17 +21,17 @@ The <code>font-size</code> property is used to specify how large the text is in
```yml ```yml
tests: tests:
- text: Your code should set the <code>font-size</code> property for the <code>h1</code> tag to 68 pixels. - text: Your code should set the <code>font-size</code> property for the <code>h1</code> tag to 68 pixels.
testString: assert($('h1').css('font-size') == '68px', 'Your code should set the <code>font-size</code> property for the <code>h1</code> tag to 68 pixels.'); testString: assert($('h1').css('font-size') == '68px');
- text: Your code should set the <code>font-size</code> property for the <code>h2</code> tag to 52 pixels. - text: Your code should set the <code>font-size</code> property for the <code>h2</code> tag to 52 pixels.
testString: assert($('h2').css('font-size') == '52px', 'Your code should set the <code>font-size</code> property for the <code>h2</code> tag to 52 pixels.'); testString: assert($('h2').css('font-size') == '52px');
- text: Your code should set the <code>font-size</code> property for the <code>h3</code> tag to 40 pixels. - text: Your code should set the <code>font-size</code> property for the <code>h3</code> tag to 40 pixels.
testString: assert($('h3').css('font-size') == '40px', 'Your code should set the <code>font-size</code> property for the <code>h3</code> tag to 40 pixels.'); testString: assert($('h3').css('font-size') == '40px');
- text: Your code should set the <code>font-size</code> property for the <code>h4</code> tag to 32 pixels. - text: Your code should set the <code>font-size</code> property for the <code>h4</code> tag to 32 pixels.
testString: assert($('h4').css('font-size') == '32px', 'Your code should set the <code>font-size</code> property for the <code>h4</code> tag to 32 pixels.'); testString: assert($('h4').css('font-size') == '32px');
- text: Your code should set the <code>font-size</code> property for the <code>h5</code> tag to 21 pixels. - text: Your code should set the <code>font-size</code> property for the <code>h5</code> tag to 21 pixels.
testString: assert($('h5').css('font-size') == '21px', 'Your code should set the <code>font-size</code> property for the <code>h5</code> tag to 21 pixels.'); testString: assert($('h5').css('font-size') == '21px');
- text: Your code should set the <code>font-size</code> property for the <code>h6</code> tag to 14 pixels. - text: Your code should set the <code>font-size</code> property for the <code>h6</code> tag to 14 pixels.
testString: assert($('h6').css('font-size') == '14px', 'Your code should set the <code>font-size</code> property for the <code>h6</code> tag to 14 pixels.'); testString: assert($('h6').css('font-size') == '14px');
``` ```

View File

@ -21,7 +21,7 @@ Change the value of the <code>font-size</code> property for the paragraph to 16p
```yml ```yml
tests: tests:
- text: Your <code>p</code> tag should have a <code>font-size</code> of 16 pixels. - text: Your <code>p</code> tag should have a <code>font-size</code> of 16 pixels.
testString: assert($('p').css('font-size') == '16px', 'Your <code>p</code> tag should have a <code>font-size</code> of 16 pixels.'); testString: assert($('p').css('font-size') == '16px');
``` ```

View File

@ -22,17 +22,17 @@ The <code>font-weight</code> property sets how thick or thin characters are in a
```yml ```yml
tests: tests:
- text: Your code should set the <code>font-weight</code> property for the <code>h1</code> tag to 800. - text: Your code should set the <code>font-weight</code> property for the <code>h1</code> tag to 800.
testString: assert($('h1').css('font-weight') == '800', 'Your code should set the <code>font-weight</code> property for the <code>h1</code> tag to 800.'); testString: assert($('h1').css('font-weight') == '800');
- text: Your code should set the <code>font-weight</code> property for the <code>h2</code> tag to 600. - text: Your code should set the <code>font-weight</code> property for the <code>h2</code> tag to 600.
testString: assert($('h2').css('font-weight') == '600', 'Your code should set the <code>font-weight</code> property for the <code>h2</code> tag to 600.'); testString: assert($('h2').css('font-weight') == '600');
- text: Your code should set the <code>font-weight</code> property for the <code>h3</code> tag to 500. - text: Your code should set the <code>font-weight</code> property for the <code>h3</code> tag to 500.
testString: assert($('h3').css('font-weight') == '500', 'Your code should set the <code>font-weight</code> property for the <code>h3</code> tag to 500.'); testString: assert($('h3').css('font-weight') == '500');
- text: Your code should set the <code>font-weight</code> property for the <code>h4</code> tag to 400. - text: Your code should set the <code>font-weight</code> property for the <code>h4</code> tag to 400.
testString: assert($('h4').css('font-weight') == '400', 'Your code should set the <code>font-weight</code> property for the <code>h4</code> tag to 400.'); testString: assert($('h4').css('font-weight') == '400');
- text: Your code should set the <code>font-weight</code> property for the <code>h5</code> tag to 300. - text: Your code should set the <code>font-weight</code> property for the <code>h5</code> tag to 300.
testString: assert($('h5').css('font-weight') == '300', 'Your code should set the <code>font-weight</code> property for the <code>h5</code> tag to 300.'); testString: assert($('h5').css('font-weight') == '300');
- text: Your code should set the <code>font-weight</code> property for the <code>h6</code> tag to 200. - text: Your code should set the <code>font-weight</code> property for the <code>h6</code> tag to 200.
testString: assert($('h6').css('font-weight') == '200', 'Your code should set the <code>font-weight</code> property for the <code>h6</code> tag to 200.'); testString: assert($('h6').css('font-weight') == '200');
``` ```

View File

@ -21,7 +21,7 @@ Add a <code>line-height</code> property to the <code>p</code> tag and set it to
```yml ```yml
tests: tests:
- text: Your code should set the <code>line-height</code> of the <code>p</code> tag to 25 pixels. - text: Your code should set the <code>line-height</code> of the <code>p</code> tag to 25 pixels.
testString: assert($('p').css('line-height') == '25px', 'Your code should set the <code>line-height</code> of the <code>p</code> tag to 25 pixels.'); testString: assert($('p').css('line-height') == '25px');
``` ```

View File

@ -24,11 +24,11 @@ To see the effect of this Bezier curve in action, change the <code>animation-tim
```yml ```yml
tests: tests:
- text: The value of the <code>animation-timing-function</code> property of the element with the id <code>red</code> should be a <code>cubic-bezier</code> function with x1, y1, x2, y2 values set respectively to 0, 0, 0.58, 1 . - text: The value of the <code>animation-timing-function</code> property of the element with the id <code>red</code> should be a <code>cubic-bezier</code> function with x1, y1, x2, y2 values set respectively to 0, 0, 0.58, 1 .
testString: assert($('#red').css('animation-timing-function') == 'cubic-bezier(0, 0, 0.58, 1)', 'The value of the <code>animation-timing-function</code> property of the element with the id <code>red</code> should be a <code>cubic-bezier</code> function with x1, y1, x2, y2 values set respectively to 0, 0, 0.58, 1 .'); testString: assert($('#red').css('animation-timing-function') == 'cubic-bezier(0, 0, 0.58, 1)');
- text: The element with the id <code>red</code> should no longer have the <code>animation-timing-function</code> property of linear. - text: The element with the id <code>red</code> should no longer have the <code>animation-timing-function</code> property of linear.
testString: assert($('#red').css('animation-timing-function') !== 'linear', 'The element with the id <code>red</code> should no longer have the <code>animation-timing-function</code> property of linear.'); testString: assert($('#red').css('animation-timing-function') !== 'linear');
- text: The value of the <code>animation-timing-function</code> property for the element with the id <code>blue</code> should not change. - text: The value of the <code>animation-timing-function</code> property for the element with the id <code>blue</code> should not change.
testString: assert($('#blue').css('animation-timing-function') == 'ease-out', 'The value of the <code>animation-timing-function</code> property for the element with the id <code>blue</code> should not change.'); testString: assert($('#blue').css('animation-timing-function') == 'ease-out');
``` ```

View File

@ -26,17 +26,17 @@ Make stripes by changing the <code>repeating-linear-gradient()</code> to use a g
```yml ```yml
tests: tests:
- text: The angle of the <code>repeating-linear-gradient()</code> should be 45deg. - text: The angle of the <code>repeating-linear-gradient()</code> should be 45deg.
testString: assert(code.match(/background:\s*?repeating-linear-gradient\(\s*?45deg/gi), 'The angle of the <code>repeating-linear-gradient()</code> should be 45deg.'); testString: assert(code.match(/background:\s*?repeating-linear-gradient\(\s*?45deg/gi));
- text: The angle of the <code>repeating-linear-gradient()</code> should no longer be 90deg - text: The angle of the <code>repeating-linear-gradient()</code> should no longer be 90deg
testString: assert(!code.match(/90deg/gi), 'The angle of the <code>repeating-linear-gradient()</code> should no longer be 90deg'); testString: assert(!code.match(/90deg/gi));
- text: The color stop at 0 pixels should be <code>yellow</code>. - text: The color stop at 0 pixels should be <code>yellow</code>.
testString: assert(code.match(/yellow\s+?0(px)?/gi), 'The color stop at 0 pixels should be <code>yellow</code>.'); testString: assert(code.match(/yellow\s+?0(px)?/gi));
- text: One color stop at 40 pixels should be <code>yellow</code>. - text: One color stop at 40 pixels should be <code>yellow</code>.
testString: assert(code.match(/yellow\s+?40px/gi), 'One color stop at 40 pixels should be <code>yellow</code>.'); testString: assert(code.match(/yellow\s+?40px/gi));
- text: The second color stop at 40 pixels should be <code>black</code>. - text: The second color stop at 40 pixels should be <code>black</code>.
testString: assert(code.match(/yellow\s+?40px,\s*?black\s+?40px/gi), 'The second color stop at 40 pixels should be <code>black</code>.'); testString: assert(code.match(/yellow\s+?40px,\s*?black\s+?40px/gi));
- text: The last color stop at 80 pixels should be <code>black</code>. - text: The last color stop at 80 pixels should be <code>black</code>.
testString: assert(code.match(/black\s+?80px/gi), 'The last color stop at 80 pixels should be <code>black</code>.'); testString: assert(code.match(/black\s+?80px/gi));
``` ```

View File

@ -41,9 +41,9 @@ Use CSS <code>@keyframes</code> to change the <code>background-color</code> of t
```yml ```yml
tests: tests:
- text: The @keyframes rule should use the <code>animation-name</code> background-color. - text: The @keyframes rule should use the <code>animation-name</code> background-color.
testString: assert(code.match(/@keyframes\s+?background-color\s*?{/g), 'The @keyframes rule should use the <code>animation-name</code> background-color.'); testString: assert(code.match(/@keyframes\s+?background-color\s*?{/g));
- text: There should be one rule under <code>@keyframes</code> that changes the <code>background-color</code> to <code>#4791d0</code> at 100%. - text: There should be one rule under <code>@keyframes</code> that changes the <code>background-color</code> to <code>#4791d0</code> at 100%.
testString: assert(code.match(/100%\s*?{\s*?background-color:\s*?#4791d0;\s*?}/gi), 'There should be one rule under <code>@keyframes</code> that changes the <code>background-color</code> to <code>#4791d0</code> at 100%.'); testString: assert(code.match(/100%\s*?{\s*?background-color:\s*?#4791d0;\s*?}/gi));
``` ```

View File

@ -29,7 +29,7 @@ Skew the element with the id of <code>bottom</code> by 24 degrees along the X-ax
```yml ```yml
tests: tests:
- text: The element with id <code>bottom</code> should be skewed by 24 degrees along its X-axis. - text: The element with id <code>bottom</code> should be skewed by 24 degrees along its X-axis.
testString: assert(code.match(/#bottom\s*?{\s*?.*?\s*?transform:\s*?skewX\(24deg\);/g), 'The element with id <code>bottom</code> should be skewed by 24 degrees along its X-axis.'); testString: assert(code.match(/#bottom\s*?{\s*?.*?\s*?transform:\s*?skewX\(24deg\);/g));
``` ```

View File

@ -21,7 +21,7 @@ Skew the element with the id of <code>top</code> -10 degrees along the Y-axis by
```yml ```yml
tests: tests:
- text: The element with id <code>top</code> should be skewed by -10 degrees along its Y-axis. - text: The element with id <code>top</code> should be skewed by -10 degrees along its Y-axis.
testString: assert(code.match(/#top\s*?{\s*?.*?\s*?transform:\s*?skewY\(-10deg\);/g), 'The element with id <code>top</code> should be skewed by -10 degrees along its Y-axis.'); testString: assert(code.match(/#top\s*?{\s*?.*?\s*?transform:\s*?skewY\(-10deg\);/g));
``` ```

View File

@ -28,7 +28,7 @@ Increase the size of the element with the id of <code>ball2</code> to 1.5 times
```yml ```yml
tests: tests:
- text: Set the <code>transform</code> property for <code>#ball2</code> to scale it 1.5 times its size. - text: Set the <code>transform</code> property for <code>#ball2</code> to scale it 1.5 times its size.
testString: assert(code.match(/#ball2\s*?{\s*?left:\s*?65%;\s*?transform:\s*?scale\(1\.5\);\s*?}|#ball2\s*?{\s*?transform:\s*?scale\(1\.5\);\s*?left:\s*?65%;\s*?}/gi), 'Set the <code>transform</code> property for <code>#ball2</code> to scale it 1.5 times its size.'); testString: assert(code.match(/#ball2\s*?{\s*?left:\s*?65%;\s*?transform:\s*?scale\(1\.5\);\s*?}|#ball2\s*?{\s*?transform:\s*?scale\(1\.5\);\s*?left:\s*?65%;\s*?}/gi));
``` ```

View File

@ -31,7 +31,7 @@ Add a CSS rule for the <code>hover</code> state of the <code>div</code> and use
```yml ```yml
tests: tests:
- text: The size of the <code>div</code> element should scale 1.1 times when the user hovers over it. - text: The size of the <code>div</code> element should scale 1.1 times when the user hovers over it.
testString: assert(code.match(/div:hover\s*?{\s*?transform:\s*?scale\(1\.1\);/gi), 'The size of the <code>div</code> element should scale 1.1 times when the user hovers over it.'); testString: assert(code.match(/div:hover\s*?{\s*?transform:\s*?scale\(1\.1\);/gi));
``` ```

View File

@ -21,9 +21,9 @@ Wrap an <code>em</code> tag around the contents of the paragraph tag to give it
```yml ```yml
tests: tests:
- text: Your code should add an <code>em</code> tag to the markup. - text: Your code should add an <code>em</code> tag to the markup.
testString: assert($('em').length == 1, 'Your code should add an <code>em</code> tag to the markup.'); testString: assert($('em').length == 1);
- text: The <code>em</code> tag should wrap around the contents of the <code>p</code> tag but not the <code>p</code> tag itself. - text: The <code>em</code> tag should wrap around the contents of the <code>p</code> tag but not the <code>p</code> tag itself.
testString: assert($('p').children().length == 1 && $('em').children().length == 2, 'The <code>em</code> tag should wrap around the contents of the <code>p</code> tag but not the <code>p</code> tag itself.'); testString: assert($('p').children().length == 1 && $('em').children().length == 2);
``` ```

View File

@ -21,11 +21,11 @@ Wrap a <code>strong</code> tag around "Stanford University" inside the <code>p</
```yml ```yml
tests: tests:
- text: Your code should add one <code>strong</code> tag to the markup. - text: Your code should add one <code>strong</code> tag to the markup.
testString: assert($('strong').length == 1, 'Your code should add one <code>strong</code> tag to the markup.'); testString: assert($('strong').length == 1);
- text: The <code>strong</code> tag should be inside the <code>p</code> tag. - text: The <code>strong</code> tag should be inside the <code>p</code> tag.
testString: assert($('p').children('strong').length == 1, 'The <code>strong</code> tag should be inside the <code>p</code> tag.'); testString: assert($('p').children('strong').length == 1);
- text: The <code>strong</code> tag should wrap around the words "Stanford University". - text: The <code>strong</code> tag should wrap around the words "Stanford University".
testString: assert($('strong').text().match(/^Stanford University$/gi), 'The <code>strong</code> tag should wrap around the words "Stanford University".'); testString: assert($('strong').text().match(/^Stanford University$/gi));
``` ```

View File

@ -23,9 +23,9 @@ Transform the text of the <code>h4</code> to be uppercase using the <code>text-t
```yml ```yml
tests: tests:
- text: The <code>h4</code> text should be uppercase. - text: The <code>h4</code> text should be uppercase.
testString: assert($('h4').css('text-transform') === 'uppercase', 'The <code>h4</code> text should be uppercase.'); testString: assert($('h4').css('text-transform') === 'uppercase');
- text: The original text of the h4 should not be changed. - text: The original text of the h4 should not be changed.
testString: assert(($('h4').text() !== $('h4').text().toUpperCase()), 'The original text of the h4 should not be changed.'); testString: assert(($('h4').text() !== $('h4').text().toUpperCase()));
``` ```

View File

@ -22,9 +22,9 @@ Wrap the <code>u</code> tag only around the text "Ph.D. students".
```yml ```yml
tests: tests:
- text: Your code should add a <code>u</code> tag to the markup. - text: Your code should add a <code>u</code> tag to the markup.
testString: assert($('u').length === 1, 'Your code should add a <code>u</code> tag to the markup.'); testString: assert($('u').length === 1);
- text: The <code>u</code> tag should wrap around the text "Ph.D. students". - text: The <code>u</code> tag should wrap around the text "Ph.D. students".
testString: assert($('u').text() === 'Ph.D. students', 'The <code>u</code> tag should wrap around the text "Ph.D. students".'); testString: assert($('u').text() === 'Ph.D. students');
``` ```