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

fix: update color hex values and description of orange (#35316) 

* fix: update color hex values and description of orange

* fix: Update curriculum/challenges/english/01-responsive-web-design/applied-visual-design/learn-about-tertiary-colors.english.md

Co-Authored-By: beaucarnes <beaucarnes@gmail.com>

* fix: add test that no color names are used
pull/35365/head
Beau Carnes 2019-02-22 13:37:57 -05:00 committed by Randell Dawson
parent fad914550f
commit 2bb171ef30
1 changed files with 6 additions and 4 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

10
curriculum/challenges/english/01-responsive-web-design/applied-visual-design/learn-about-tertiary-colors.english.md
View File

@ -11,12 +11,12 @@ Computer monitors and device screens create different colors by combining amount
Tertiary colors are the result of combining a primary color with one of its secondary color neighbors. For example, within the RGB color model, red (primary) and yellow (secondary) make orange (tertiary). 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. 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>
<table class="table table-striped"><thead><tr><th>Color</th><th>Hex Code</th></tr><thead><tbody><tr><td>orange</td><td>#FF7F00</td></tr><tr><td>cyan</td><td>#00FFFF</td></tr><tr><td>raspberry</td><td>#FF007F</td></tr></tbody></table>
</section>
## Instructions
<section id='instructions'>
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.
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 and not the color names.
</section>
## Tests
@ -25,11 +25,13 @@ Change the <code>background-color</code> property of the <code>orange</code>, <c
```yml
tests:
- 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, 125, 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)', '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>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.');
- 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, 125)', '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.');
- 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.');
```