fix(curriculum): changed challenge test text to use the word should for Responsive Web Design (#36860)
* fix: changed challenge test text to use should * fix: changed have to be used in Co-Authored-By: Tom <20648924+moT01@users.noreply.github.com> * fix: reworded test verbiage Co-Authored-By: Tom <20648924+moT01@users.noreply.github.com> * fix: improved test verbiage Co-Authored-By: Tom <20648924+moT01@users.noreply.github.com> * fix: improved test verbiage Co-Authored-By: Tom <20648924+moT01@users.noreply.github.com> * fix: corrected typo Co-Authored-By: Tom <20648924+moT01@users.noreply.github.com> * fix: corrected typo Co-Authored-By: Tom <20648924+moT01@users.noreply.github.com> * fix: changed have the to be used in Co-Authored-By: Tom <20648924+moT01@users.noreply.github.com> * fix: corrected verbiage Co-Authored-By: Parth Parth <34807532+thecodingaviator@users.noreply.github.com>
This commit is contained in:
committed by
Parth Parth
parent
b663c39901
commit
9bf3fdbf38
@ -39,9 +39,9 @@ tests:
|
||||
testString: assert($("img").hasClass("smaller-image"));
|
||||
- text: Your <code>img</code> element should have the class <code>thick-green-border</code>.
|
||||
testString: assert($("img").hasClass("thick-green-border"));
|
||||
- text: Give your image a border width of <code>10px</code>.
|
||||
- text: Your image should have a border width of <code>10px</code>.
|
||||
testString: assert($("img").hasClass("thick-green-border") && parseInt($("img").css("border-top-width"), 10) >= 8 && parseInt($("img").css("border-top-width"), 10) <= 12);
|
||||
- text: Give your image a border style of <code>solid</code>.
|
||||
- text: Your image should have a border style of <code>solid</code>.
|
||||
testString: assert($("img").css("border-right-style") === "solid");
|
||||
- text: The border around your <code>img</code> element should be green.
|
||||
testString: assert($("img").css("border-left-color") === "rgb(0, 128, 0)");
|
||||
|
@ -30,9 +30,9 @@ It looks like there is a problem with the variables supplied to the <code>.pengu
|
||||
|
||||
```yml
|
||||
tests:
|
||||
- text: Apply the fallback value of <code>black</code> to the <code>background</code> property of the <code>penguin-top</code> class.
|
||||
- text: The fallback value of <code>black</code> should be used in the <code>background</code> property of the <code>penguin-top</code> class.
|
||||
testString: assert(code.match(/.penguin-top\s*?{[\s\S]*background\s*?:\s*?var\(\s*?--pengiun-skin\s*?,\s*?black\s*?\)\s*?;[\s\S]*}[\s\S]*.penguin-bottom\s{/gi));
|
||||
- text: Apply the fallback value of <code>black</code> to the <code>background</code> property of the <code>penguin-bottom</code> class.
|
||||
- text: The fallback value of <code>black</code> should be used in <code>background</code> property of the <code>penguin-bottom</code> class.
|
||||
testString: assert(code.match(/.penguin-bottom\s*?{[\s\S]*background\s*?:\s*?var\(\s*?--pengiun-skin\s*?,\s*?black\s*?\)\s*?;[\s\S]*}/gi));
|
||||
|
||||
```
|
||||
|
@ -29,11 +29,11 @@ Create a class called <code>silver-background</code> with the <code>background-c
|
||||
|
||||
```yml
|
||||
tests:
|
||||
- text: Give your <code>div</code> element the class <code>silver-background</code>.
|
||||
- text: Your<code>div</code> element should have the class <code>silver-background</code>.
|
||||
testString: assert($("div").hasClass("silver-background"));
|
||||
- text: Your <code>div</code> element should have a silver background.
|
||||
testString: assert($("div").css("background-color") === "rgb(192, 192, 192)");
|
||||
- text: Define a class named <code>silver-background</code> within the <code>style</code> element and assign the value of <code>silver</code> to the <code>background-color</code> property.
|
||||
- text: A class named <code>silver-background</code> should be defined within the <code>style</code> element and the value of <code>silver</code> should be assigned to the <code>background-color</code> property.
|
||||
testString: assert(code.match(/\.silver-background\s*{\s*background-color:\s*silver;\s*}/));
|
||||
|
||||
```
|
||||
|
@ -28,11 +28,11 @@ Create a <code>font-family</code> CSS rule that uses the <code>Lobster</code> fo
|
||||
|
||||
```yml
|
||||
tests:
|
||||
- text: Import the <code>Lobster</code> font.
|
||||
- text: You should import the <code>Lobster</code> font.
|
||||
testString: assert(new RegExp("googleapis", "gi").test(code));
|
||||
- text: Your <code>h2</code> element should use the font <code>Lobster</code>.
|
||||
testString: assert($("h2").css("font-family").match(/lobster/i));
|
||||
- text: Use an <code>h2</code> CSS selector to change the font.
|
||||
- text: You should use an <code>h2</code> CSS selector to change the font.
|
||||
testString: 'assert(/\s*h2\s*\{\s*font-family\:\s*(\"|")?Lobster(\"|")?(.{0,})\s*;\s*\}/gi.test(code));'
|
||||
- text: Your <code>p</code> element should still use the font <code>monospace</code>.
|
||||
testString: assert($("p").css("font-family").match(/monospace/i));
|
||||
|
@ -23,7 +23,7 @@ Define a variable named <code>--penguin-belly</code> in the <code>:root</code> s
|
||||
|
||||
```yml
|
||||
tests:
|
||||
- text: Declare the <code>--penguin-belly</code> variable in the <code>:root</code> and assign it to <code>pink</code>.
|
||||
- text: The <code>--penguin-belly</code> variable should be declared in the <code>:root</code> and assigned the value <code>pink</code>.
|
||||
testString: assert(code.match(/:root\s*?{[\s\S]*--penguin-belly\s*?:\s*?pink\s*?;[\s\S]*}/gi));
|
||||
|
||||
```
|
||||
|
@ -24,15 +24,15 @@ Finally, give your <code>body</code> element the font-family of <code>monospace<
|
||||
|
||||
```yml
|
||||
tests:
|
||||
- text: Create an <code>h1</code> element.
|
||||
- text: You should create an <code>h1</code> element.
|
||||
testString: assert(($("h1").length > 0));
|
||||
- text: Your <code>h1</code> element should have the text <code>Hello World</code>.
|
||||
testString: assert(($("h1").length > 0 && $("h1").text().match(/hello world/i)));
|
||||
- text: Make sure your <code>h1</code> element has a closing tag.
|
||||
- text: Your <code>h1</code> element should have a closing tag.
|
||||
testString: assert(code.match(/<\/h1>/g) && code.match(/<h1/g) && code.match(/<\/h1>/g).length === code.match(/<h1/g).length);
|
||||
- text: Give your <code>body</code> element the <code>color</code> property of <code>green</code>.
|
||||
- text: Your <code>body</code> element should have the <code>color</code> property of <code>green</code>.
|
||||
testString: assert(($("body").css("color") === "rgb(0, 128, 0)"));
|
||||
- text: Give your <code>body</code> element the <code>font-family</code> property of <code>monospace</code>.
|
||||
- text: Your <code>body</code> element should have the <code>font-family</code> property of <code>monospace</code>.
|
||||
testString: assert(($("body").css("font-family").match(/monospace/i)));
|
||||
- text: Your <code>h1</code> element should inherit the font <code>monospace</code> from your <code>body</code> element.
|
||||
testString: assert(($("h1").length > 0 && $("h1").css("font-family").match(/monospace/i)));
|
||||
|
@ -23,7 +23,7 @@ Give your cat photo a <code>border-radius</code> of <code>50%</code>.
|
||||
tests:
|
||||
- text: Your image should have a border radius of <code>50%</code>, making it perfectly circular.
|
||||
testString: assert(parseInt($("img").css("border-top-left-radius")) > 48);
|
||||
- text: Be sure to use a percentage value of <code>50%</code>.
|
||||
- text: The <code>border-radius</code> value should use a percentage value of <code>50%</code>.
|
||||
testString: assert(code.match(/50%/g));
|
||||
|
||||
```
|
||||
|
@ -38,13 +38,13 @@ tests:
|
||||
testString: assert($("h1").hasClass("pink-text"));
|
||||
- text: Your <code>h1</code> element should have the class <code>blue-text</code>.
|
||||
testString: assert($("h1").hasClass("blue-text"));
|
||||
- text: Give your <code>h1</code> element the id of <code>orange-text</code>.
|
||||
- text: Your <code>h1</code> element should have the id of <code>orange-text</code>.
|
||||
testString: assert($("h1").attr("id") === "orange-text");
|
||||
- text: There should be only one <code>h1</code> element.
|
||||
testString: assert(($("h1").length === 1));
|
||||
- text: Create a CSS declaration for your <code>orange-text</code> id
|
||||
- text: Your <code>orange-text</code> id should have a CSS declaration.
|
||||
testString: assert(code.match(/#orange-text\s*{/gi));
|
||||
- text: Do not give your <code>h1</code> any <code>style</code> attributes.
|
||||
- text: Your <code>h1</code> should not have any <code>style</code> attributes.
|
||||
testString: assert(!code.match(/<h1.*style.*>/gi));
|
||||
- text: Your <code>h1</code> element should be orange.
|
||||
testString: assert($("h1").css("color") === "rgb(255, 165, 0)");
|
||||
|
@ -30,7 +30,7 @@ tests:
|
||||
testString: assert($("h1").hasClass("blue-text"));
|
||||
- text: Your <code>h1</code> element should have the id of <code>orange-text</code>.
|
||||
testString: assert($("h1").attr("id") === "orange-text");
|
||||
- text: Give your <code>h1</code> element an inline style.
|
||||
- text: Your <code>h1</code> element should have an inline style.
|
||||
testString: assert(document.querySelector('h1[style]'));
|
||||
- text: Your <code>h1</code> element should be white.
|
||||
testString: assert($("h1").css("color") === "rgb(255, 255, 255)");
|
||||
|
@ -25,7 +25,7 @@ Give your <code>form</code> element the id <code>cat-photo-form</code>.
|
||||
|
||||
```yml
|
||||
tests:
|
||||
- text: Give your <code>form</code> element the id of <code>cat-photo-form</code>.
|
||||
- text: Your <code>form</code> element should have the id of <code>cat-photo-form</code>.
|
||||
testString: assert($("form").attr("id") === "cat-photo-form");
|
||||
|
||||
```
|
||||
|
@ -30,11 +30,11 @@ body {
|
||||
|
||||
```yml
|
||||
tests:
|
||||
- text: Give your <code>body</code> element the <code>background-color</code> of black.
|
||||
- text: Your <code>body</code> element should have the <code>background-color</code> of black.
|
||||
testString: assert($("body").css("background-color") === "rgb(0, 0, 0)");
|
||||
- text: Make sure your CSS rule is properly formatted with both opening and closing curly brackets.
|
||||
- text: Your CSS rule should be properly formatted with both opening and closing curly brackets.
|
||||
testString: assert(code.match(/<style>\s*body\s*\{\s*background.*\s*:\s*.*;\s*\}\s*<\/style>/i));
|
||||
- text: Make sure your CSS rule ends with a semi-colon.
|
||||
- text: Your CSS rule should end with a semi-colon.
|
||||
testString: assert(code.match(/<style>\s*body\s*\{\s*background.*\s*:\s*.*;\s*\}\s*<\/style>/i));
|
||||
|
||||
```
|
||||
|
@ -42,7 +42,7 @@ tests:
|
||||
testString: assert($("h2").hasClass("red-text"));
|
||||
- text: Your stylesheet should declare a <code>red-text</code> class and have its color set to red.
|
||||
testString: assert(code.match(/\.red-text\s*\{\s*color\s*:\s*red;\s*\}/g));
|
||||
- text: Do not use inline style declarations like <code>style="color: red"</code> in your <code>h2</code> element.
|
||||
- text: You should not use inline style declarations like <code>style="color: red"</code> in your <code>h2</code> element.
|
||||
testString: assert($("h2").attr("style") === undefined);
|
||||
|
||||
```
|
||||
|
@ -28,13 +28,13 @@ Apply the <code>--penguin-skin</code> variable to the <code>background</code> pr
|
||||
|
||||
```yml
|
||||
tests:
|
||||
- text: Apply the <code>--penguin-skin</code> variable to the <code>background</code> property of the <code>penguin-top</code> class.
|
||||
- text: The <code>--penguin-skin</code> variable should be applied to the <code>background</code> property of the <code>penguin-top</code> class.
|
||||
testString: assert(code.match(/.penguin-top\s*?{[\s\S]*background\s*?:\s*?var\s*?\(\s*?--penguin-skin\s*?\)\s*?;[\s\S]*}[\s\S]*.penguin-bottom\s{/gi));
|
||||
- text: Apply the <code>--penguin-skin</code> variable to the <code>background</code> property of the <code>penguin-bottom</code> class.
|
||||
- text: The <code>--penguin-skin</code> variable should be applied to the <code>background</code> property of the <code>penguin-bottom</code> class.
|
||||
testString: assert(code.match(/.penguin-bottom\s*?{[\s\S]*background\s*?:\s*?var\s*?\(\s*?--penguin-skin\s*?\)\s*?;[\s\S]*}[\s\S]*.right-hand\s{/gi));
|
||||
- text: Apply the <code>--penguin-skin</code> variable to the <code>background</code> property of the <code>right-hand</code> class.
|
||||
- text: The <code>--penguin-skin</code> variable should be applied to the <code>background</code> property of the <code>right-hand</code> class.
|
||||
testString: assert(code.match(/.right-hand\s*?{[\s\S]*background\s*?:\s*?var\s*?\(\s*?--penguin-skin\s*?\)\s*?;[\s\S]*}[\s\S]*.left-hand\s{/gi));
|
||||
- text: Apply the <code>--penguin-skin</code> variable to the <code>background</code> property of the <code>left-hand</code> class.
|
||||
- text: The <code>--penguin-skin</code> variable should be applied to the <code>background</code> property of the <code>left-hand</code> class.
|
||||
testString: assert(code.match(/.left-hand\s*?{[\s\S]*background\s*?:\s*?var\s*?\(\s*?--penguin-skin\s*?\)\s*?;[\s\S]*}/gi));
|
||||
|
||||
```
|
||||
|
@ -24,21 +24,21 @@ Go ahead, try using the abbreviated hex codes to color the correct elements.
|
||||
|
||||
```yml
|
||||
tests:
|
||||
- text: Give your <code>h1</code> element with the text <code>I am red!</code> the <code>color</code> red.
|
||||
- text: Your <code>h1</code> element with the text <code>I am red!</code> should be given the <code>color</code> red.
|
||||
testString: assert($('.red-text').css('color') === 'rgb(255, 0, 0)');
|
||||
- text: Use the abbreviate <code>hex code</code> for the color red instead of the hex code <code>#FF0000</code>.
|
||||
- text: The abbreviated <code>hex code</code> for the color red should be used instead of the hex code <code>#FF0000</code>.
|
||||
testString: assert(code.match(/\.red-text\s*?{\s*?color:\s*?#F00\s*?;\s*?}/gi));
|
||||
- text: Give your <code>h1</code> element with the text <code>I am green!</code> the <code>color</code> green.
|
||||
- text: Your <code>h1</code> element with the text <code>I am green!</code> should be given the <code>color</code> green.
|
||||
testString: assert($('.green-text').css('color') === 'rgb(0, 255, 0)');
|
||||
- text: Use the abbreviated <code>hex code</code> for the color green instead of the hex code <code>#00FF00</code>.
|
||||
- text: The abbreviated <code>hex code</code> for the color green should be used instead of the hex code <code>#00FF00</code>.
|
||||
testString: assert(code.match(/\.green-text\s*?{\s*?color:\s*?#0F0\s*?;\s*?}/gi));
|
||||
- text: Give your <code>h1</code> element with the text <code>I am cyan!</code> the <code>color</code> cyan.
|
||||
- text: Your <code>h1</code> element with the text <code>I am cyan!</code> should be given the <code>color</code> cyan.
|
||||
testString: assert($('.cyan-text').css('color') === 'rgb(0, 255, 255)');
|
||||
- text: Use the abbreviated <code>hex code</code> for the color cyan instead of the hex code <code>#00FFFF</code>.
|
||||
- text: The abbreviated <code>hex code</code> for the color cyan should be used instead of the hex code <code>#00FFFF</code>.
|
||||
testString: assert(code.match(/\.cyan-text\s*?{\s*?color:\s*?#0FF\s*?;\s*?}/gi));
|
||||
- text: Give your <code>h1</code> element with the text <code>I am fuchsia!</code> the <code>color</code> fuchsia.
|
||||
- text: Your <code>h1</code> element with the text <code>I am fuchsia!</code> should be given the <code>color</code> fuchsia.
|
||||
testString: assert($('.fuchsia-text').css('color') === 'rgb(255, 0, 255)');
|
||||
- text: Use the abbreviated <code>hex code</code> for the color fuchsia instead of the hex code <code>#FF00FF</code>.
|
||||
- text: The abbreviated <code>hex code</code> for the color fuchsia should be used instead of the hex code <code>#FF00FF</code>.
|
||||
testString: assert(code.match(/\.fuchsia-text\s*?{\s*?color:\s*?#F0F\s*?;\s*?}/gi));
|
||||
|
||||
```
|
||||
|
@ -31,13 +31,13 @@ Try giving your form, which now has the <code>id</code> attribute of <code>cat-p
|
||||
|
||||
```yml
|
||||
tests:
|
||||
- text: Give your <code>form</code> element the id of <code>cat-photo-form</code>.
|
||||
- text: Your <code>form</code> element should have the id of <code>cat-photo-form</code>.
|
||||
testString: assert($("form").attr("id") === "cat-photo-form");
|
||||
- text: Your <code>form</code> element should have the <code>background-color</code> of green.
|
||||
testString: assert($("#cat-photo-form").css("background-color") === "rgb(0, 128, 0)");
|
||||
- text: Make sure your <code>form</code> element has an <code>id</code> attribute.
|
||||
- text: Your <code>form</code> element should have an <code>id</code> attribute.
|
||||
testString: assert(code.match(/<form.*cat-photo-form.*>/gi) && code.match(/<form.*cat-photo-form.*>/gi).length > 0);
|
||||
- text: Do not give your <code>form</code> any <code>class</code> or <code>style</code> attributes.
|
||||
- text: You should not give your <code>form</code> any <code>class</code> or <code>style</code> attributes.
|
||||
testString: assert(!code.match(/<form.*style.*>/gi) && !code.match(/<form.*class.*>/gi));
|
||||
|
||||
```
|
||||
|
@ -41,15 +41,15 @@ Delete your <code>h2</code> element's style attribute, and instead create a CSS
|
||||
|
||||
```yml
|
||||
tests:
|
||||
- text: Remove the style attribute from your <code>h2</code> element.
|
||||
- text: The style attribute should be removed from your <code>h2</code> element.
|
||||
testString: assert(!$("h2").attr("style"));
|
||||
- text: Create a <code>style</code> element.
|
||||
- text: You should create a <code>style</code> element.
|
||||
testString: assert($("style") && $("style").length >= 1);
|
||||
- text: Your <code>h2</code> element should be blue.
|
||||
testString: assert($("h2").css("color") === "rgb(0, 0, 255)");
|
||||
- text: Ensure that your stylesheet <code>h2</code> declaration is valid with a semicolon and closing brace.
|
||||
- text: Your stylesheet <code>h2</code> declaration should be valid with a semicolon and closing brace.
|
||||
testString: assert(code.match(/h2\s*\{\s*color\s*:.*;\s*\}/g));
|
||||
- text: Make sure all your <code>style</code> elements are valid and have a closing tag.
|
||||
- text: All your <code>style</code> elements should be valid and have closing tags.
|
||||
testString: assert(code.match(/<\/style>/g) && code.match(/<\/style>/g).length === (code.match(/<style((\s)*((type|media|scoped|title|disabled)="[^"]*")?(\s)*)*>/g) || []).length);
|
||||
|
||||
```
|
||||
|
@ -30,9 +30,9 @@ Replace the word <code>black</code> in our <code>body</code> element's backgroun
|
||||
|
||||
```yml
|
||||
tests:
|
||||
- text: Give your <code>body</code> element the background-color of black.
|
||||
- text: Your <code>body</code> element should have the background-color of black.
|
||||
testString: assert($("body").css("background-color") === "rgb(0, 0, 0)");
|
||||
- text: Use the <code>hex code</code> for the color black instead of the word <code>black</code>.
|
||||
- text: The <code>hex code</code> for the color black should be used instead of the word <code>black</code>.
|
||||
testString: assert(code.match(/body\s*{(([\s\S]*;\s*?)|\s*?)background.*\s*:\s*?#000(000)?((\s*})|(;[\s\S]*?}))/gi));
|
||||
|
||||
```
|
||||
|
@ -26,21 +26,21 @@ Replace the color words in our <code>style</code> element with their correct hex
|
||||
|
||||
```yml
|
||||
tests:
|
||||
- text: Give your <code>h1</code> element with the text <code>I am red!</code> the <code>color</code> red.
|
||||
- text: Your <code>h1</code> element with the text <code>I am red!</code> should be given the <code>color</code> red.
|
||||
testString: assert($('.red-text').css('color') === 'rgb(255, 0, 0)');
|
||||
- text: Use the <code>hex code</code> for the color red instead of the word <code>red</code>.
|
||||
- text: The <code>hex code</code> for the color red should be used instead of the word <code>red</code>.
|
||||
testString: assert(code.match(/\.red-text\s*?{\s*?color:\s*?#FF0000\s*?;\s*?}/gi));
|
||||
- text: Give your <code>h1</code> element with the text <code>I am green!</code> the <code>color</code> green.
|
||||
- text: Your <code>h1</code> element with the text <code>I am green!</code> should be given the <code>color</code> green.
|
||||
testString: assert($('.green-text').css('color') === 'rgb(0, 255, 0)');
|
||||
- text: Use the <code>hex code</code> for the color green instead of the word <code>green</code>.
|
||||
- text: The <code>hex code</code> for the color green should be used instead of the word <code>green</code>.
|
||||
testString: assert(code.match(/\.green-text\s*?{\s*?color:\s*?#00FF00\s*?;\s*?}/gi));
|
||||
- text: Give your <code>h1</code> element with the text <code>I am dodger blue!</code> the <code>color</code> dodger blue.
|
||||
- text: Your <code>h1</code> element with the text <code>I am dodger blue!</code> should be given the <code>color</code> dodger blue.
|
||||
testString: assert($('.dodger-blue-text').css('color') === 'rgb(30, 144, 255)');
|
||||
- text: Use the <code>hex code</code> for the color dodger blue instead of the word <code>dodgerblue</code>.
|
||||
- text: The <code>hex code</code> for the color dodger blue should be used instead of the word <code>dodgerblue</code>.
|
||||
testString: assert(code.match(/\.dodger-blue-text\s*?{\s*?color:\s*?#1E90FF\s*?;\s*?}/gi));
|
||||
- text: Give your <code>h1</code> element with the text <code>I am orange!</code> the <code>color</code> orange.
|
||||
- text: Your <code>h1</code> element with the text <code>I am orange!</code> should be given the <code>color</code> orange.
|
||||
testString: assert($('.orange-text').css('color') === 'rgb(255, 165, 0)');
|
||||
- text: Use the <code>hex code</code> for the color orange instead of the word <code>orange</code>.
|
||||
- text: The <code>hex code</code> for the color orange should be used instead of the word <code>orange</code>.
|
||||
testString: assert(code.match(/\.orange-text\s*?{\s*?color:\s*?#FFA500\s*?;\s*?}/gi));
|
||||
|
||||
```
|
||||
|
@ -22,21 +22,21 @@ Replace the hex codes in our <code>style</code> element with their correct RGB v
|
||||
|
||||
```yml
|
||||
tests:
|
||||
- text: Give your <code>h1</code> element with the text <code>I am red!</code> the <code>color</code> red.
|
||||
- text: Your <code>h1</code> element with the text <code>I am red!</code> should have the <code>color</code> red.
|
||||
testString: assert($('.red-text').css('color') === 'rgb(255, 0, 0)');
|
||||
- text: Use <code>rgb</code> for the color red.
|
||||
- text: You should use <code>rgb</code> for the color red.
|
||||
testString: assert(code.match(/\.red-text\s*?{\s*?color:\s*?rgb\(\s*?255\s*?,\s*?0\s*?,\s*?0\s*?\)\s*?;\s*?}/gi));
|
||||
- text: Give your <code>h1</code> element with the text <code>I am orchid!</code> the <code>color</code> orchid.
|
||||
- text: Your <code>h1</code> element with the text <code>I am orchid!</code> should have the <code>color</code> orchid.
|
||||
testString: assert($('.orchid-text').css('color') === 'rgb(218, 112, 214)');
|
||||
- text: Use <code>rgb</code> for the color orchid.
|
||||
- text: You should use <code>rgb</code> for the color orchid.
|
||||
testString: assert(code.match(/\.orchid-text\s*?{\s*?color:\s*?rgb\(\s*?218\s*?,\s*?112\s*?,\s*?214\s*?\)\s*?;\s*?}/gi));
|
||||
- text: Give your <code>h1</code> element with the text <code>I am blue!</code> the <code>color</code> blue.
|
||||
- text: Your <code>h1</code> element with the text <code>I am blue!</code> should have the <code>color</code> blue.
|
||||
testString: assert($('.blue-text').css('color') === 'rgb(0, 0, 255)');
|
||||
- text: Use <code>rgb</code> for the color blue.
|
||||
- text: You should use <code>rgb</code> for the color blue.
|
||||
testString: assert(code.match(/\.blue-text\s*?{\s*?color:\s*?rgb\(\s*?0\s*?,\s*?0\s*?,\s*?255\s*?\)\s*?;\s*?}/gi));
|
||||
- text: Give your <code>h1</code> element with the text <code>I am sienna!</code> the <code>color</code> sienna.
|
||||
- text: Your <code>h1</code> element with the text <code>I am sienna!</code> should have the <code>color</code> sienna.
|
||||
testString: assert($('.sienna-text').css('color') === 'rgb(160, 82, 45)');
|
||||
- text: Use <code>rgb</code> for the color sienna.
|
||||
- text: You should use <code>rgb</code> for the color sienna.
|
||||
testString: assert(code.match(/\.sienna-text\s*?{\s*?color:\s*?rgb\(\s*?160\s*?,\s*?82\s*?,\s*?45\s*?\)\s*?;\s*?}/gi));
|
||||
|
||||
```
|
||||
|
@ -37,7 +37,7 @@ Let's replace the hex code in our <code>body</code> element's background color w
|
||||
tests:
|
||||
- text: Your <code>body</code> element should have a black background.
|
||||
testString: assert($("body").css("background-color") === "rgb(0, 0, 0)");
|
||||
- text: Use <code>rgb</code> to give your <code>body</code> element a color of black.
|
||||
- text: You should use <code>rgb</code> to give your <code>body</code> element a color of black.
|
||||
testString: assert(code.match(/rgb\s*\(\s*0\s*,\s*0\s*,\s*0\s*\)/ig));
|
||||
|
||||
```
|
||||
|
Reference in New Issue
Block a user