greatbody
/
freeCodeCamp
mirror of https://github.com/freeCodeCamp/freeCodeCamp.git
1
0
Fork 0
Code Issues Projects Releases Wiki Activity

Merge pull request #13491 from cdrainxv/fix/tertiary-colors-test 

modified the tests to work on firefox
pull/18182/head
Dylan 2017-02-21 07:55:37 -06:00 committed by GitHub
parent 3bf2e9be5a a8aadb4a60
commit 722c9aee8b
1 changed files with 14 additions and 9 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

23
challenges/01-responsive-web-design/applied-visual-design.json
View File

@ -1530,40 +1530,45 @@
"description": [
"Computer monitors and device screens create different colors by combining amounts of red, green, and blue light. This is known as the RGB additive color model in modern color theory. Red (R), green (G), and blue (B) are called primary colors. Mixing two primary colors creates the secondary colors cyan (G + B), magenta (R + B) and yellow (R + G). You saw these colors in the Complementary Colors challenge. These secondary colors happen to be the complement to the primary color not used in their creation, and are opposite to that primary color on the color wheel. For example, magenta is made with red and blue, and is the complement to green.",
"Tertiary colors are the result of combining a primary color with one of its secondary color neighbors. For example, red (primary) and yellow (secondary) make orange. This adds six more colors to a simple color wheel for a total of twelve.",
"There are various methods of selecting different colors that result in a harmonious combination in design. One example that can use tertiary colors is called the split-complementary color scheme. It starts with a base color, then pairs it with the two colors that are adjacent to its complement. The three colors provide strong visual contrast in a design, but is more subtle than using two complementary colors.",
"Here are three colors using the split-complement scheme:",
"<blockquote>cyan (#00FFFF)<br>orange (#FF7D00)<br>raspberry (#FF007D)</blockquote>",
"There are various methods of selecting different colors that result in a harmonious combination in design. One example that can use tertiary colors is called the split-complementary color scheme. This scheme starts with a base color, then pairs it with the two colors that are adjacent to its complement. The three colors provide strong visual contrast in a design, but are more subtle than using two complementary colors.",
"Here are three colors created using the split-complement scheme:",
"<table class=\"table table-striped\"><thead><tr><th>Color</th><th>Hex Code</th></tr><thead><tbody><tr><td>orange</td><td>#FF7D00</td></tr><tr><td>cyan</td><td>#00FFFF</td></tr><tr><td>raspberry</td><td>#FF007D</td></tr></tbody></table>",
"<hr>",
"Change the <code>background-color</code> property of the <code>orange</code>, <code>cyan</code>, and <code>raspberry</code> classes to their respective colors. Make sure to use the hex codes because the orange and raspberry in the example above are not browser-recognized color names."
"Change the <code>background-color</code> property of the <code>orange</code>, <code>cyan</code>, and <code>raspberry</code> classes to their respective colors. Make sure to use the hex codes as orange and raspberry are not browser-recognized color names."
],
"challengeSeed": [
"<style>",
" body {",
" background-color: #FFFFFF;",
" }",
" ",
" .orange {",
" background-color: #000000;",
" }",
" ",
" .cyan {",
" background-color: #000000;",
" }",
" ",
" .raspberry {",
" background-color: #000000;",
" } ",
" }",
" ",
" div {",
" height: 100px;",
" width: 100px;",
" margin-bottom: 5px;",
" }",
"</style>",
" ",
"<div class=\"orange\"></div>",
"<div class=\"cyan\"></div>",
"<div class=\"raspberry\"></div>"
],
"tests": [
"assert($('.orange').css('background-color') == 'rgb(255, 125, 0)', 'message: The <code>div</code> element with class <code>orange</code> should have a <code>background-color</code> of orange.');",
"assert($('.cyan').css('background-color') == 'rgb(0, 255, 255)', 'message: The <code>div</code> element with class <code>cyan</code> should have a <code>background-color</code> of cyan.');",
"assert($('.raspberry').css('background-color') == 'rgb(255, 0, 125)', 'message: The <code>div</code> element with class <code>raspberry</code> should have a <code>background-color</code> of raspberry.');"
"assert(code.match(/.orange\\s*\\{\\s*background-color:\\s*#FF7D00;?\\s*\\}/g), 'message: The <code>div</code> element with class <code>orange</code> should have a <code>background-color</code> of orange.');",
"assert(code.match(/.cyan\\s*\\{\\s*background-color:\\s*#00FFFF;?\\s*\\}/g), 'message: The <code>div</code> element with class <code>cyan</code> should have a <code>background-color</code> of cyan.');",
"assert(code.match(/.raspberry\\s*\\{\\s*background-color:\\s*#FF007D;?\\s*\\}/g), 'message: The <code>div</code> element with class <code>raspberry</code> should have a <code>background-color</code> of raspberry.');"
],
"solutions": [],
"hints": [],
@ -2910,4 +2915,4 @@
"translations": {}
}
]
}
}