gaspersic/freeCodeCamp
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

changed instances of teal to cyan

Browse Source
This commit is contained in:
cdrainxv
2017-03-16 00:26:19 -06:00
parent 792b95d14b
commit b8963ff921
1 changed files with 17 additions and 7 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@ -1633,7 +1633,7 @@
"<b>Saturation</b> is the amount of gray in a color. A fully saturated color has no gray in it, and a minimally saturated color is almost completely gray. This is given as a percentage with 100% being fully saturated.",
"<b>Lightness</b> is the amount of white or black in a color. A percentage is given ranging from 0% (black) to 100% (white), where 50% is the normal color.",
"Here are a few examples of using <code>hsl()</code> with fully-saturated, normal lightness colors:",
"<blockquote>/* Red */<br>hsl(0, 100%, 50%) (Red can also have a hue of 360)<br><br>/* Yellow */<br>hsl(60, 100%, 50%)<br><br>/* Green */<br>hsl(120, 100%, 50%)<br><br>/* Cyan */<br>hsl(180, 100%, 50%)<br><br>/* Blue */<br>hsl(240, 100%, 50%)<br><br>/* Magenta */<br>hsl(300, 100%, 50%)</blockquote>",
"<table class=\"table table-striped\"><thead><tr><th>Color</th><th>HSL</th></tr></thead><tbody><tr><td>red</td><td>hsl(0, 100%, 50%)</td></tr><tr><td>yellow</td><td>hsl(60, 100%, 50%)</td></tr><tr><td>green</td><td>hsl(120, 100%, 50%)</td></tr><tr><td>cyan</td><td>hsl(180, 100%, 50%)</td></tr><tr><td>blue</td><td>hsl(240, 100%, 50%)</td></tr><tr><td>magenta</td><td>hsl(300, 100%, 50%)</td></tr></tbody></table>",
"<hr>",
"Change the <code>background-color</code> of each <code>div</code> element based on the class names (<code>green</code>, <code>cyan</code>, or <code>blue</code>) using <code>hsl()</code>. All three should have full saturation and normal lightness."
],
@ -1642,22 +1642,26 @@
" body {",
" background-color: #FFFFFF;",
" }",
" ",
" .green {",
" background-color: #000000;",
" }",
" ",
" .cyan {",
" background-color: #000000;",
" }",
" ",
" .blue {",
" background-color: #000000;",
" }",
"",
" ",
" div {",
" display: inline-block;",
" height: 100px;",
" width: 100px;",
" }",
"</style>",
" ",
"<div class=\"green\"></div>",
"<div class=\"cyan\"></div>",
"<div class=\"blue\"></div>"
@ -1668,7 +1672,7 @@
"assert(code.match(/\\.blue\\s*?{\\s*?background-color:\\s*?hsl/gi), 'message: Your code should use the <code>hsl()</code> property to declare the color blue.');",
"assert($('.green').css('background-color') == 'rgb(0, 255, 0)', 'message: The <code>div</code> element with class <code>green</code> should have a <code>background-color</code> of green.');",
"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($('.blue').css('background-color') == 'rgb(0, 0, 255)', 'message: The <code>div</code> element with class <code>blue</code> should have a <code>background-color</code> blue.');"
"assert($('.blue').css('background-color') == 'rgb(0, 0, 255)', 'message: The <code>div</code> element with class <code>blue</code> should have a <code>background-color</code> of blue.');"
],
"solutions": [],
"hints": [],
@ -1683,34 +1687,40 @@
"description": [
"The <code>hsl()</code> option in CSS also makes it easy to adjust the tone of a color. Mixing white with a pure hue creates a tint of that color, and adding black will make a shade. Alternatively, a tone is produced by adding gray or by both tinting and shading. Recall that the 's' and 'l' of <code>hsl()</code> stand for saturation and lightness, respectively. The saturation percent changes the amount of gray and the lightness percent determines how much white or black is in the color. This is useful when you have a base hue you like, but need different variations of it.",
"<hr>",
"The navigation bar on this site currently inherits its <code>background-color</code> from the <code>header</code> element. Starting with that color as a base, add a <code>background-color</code> to the <code>nav</code> element so it uses the same teal hue, but has 80% saturation and 25% lightness values to change its tone and shade."
"The navigation bar on this site currently inherits its <code>background-color</code> from the <code>header</code> element. Starting with that color as a base, add a <code>background-color</code> to the <code>nav</code> element so it uses the same cyan hue, but has 80% saturation and 25% lightness values to change its tone and shade."
],
"challengeSeed": [
"<style>",
" header {",
" background-color: hsl(178, 90%, 35%);",
" background-color: hsl(180, 90%, 35%);",
" color: #FFFFFF;",
" }",
" ",
" nav {",
"",
" ",
" }",
" ",
" h1 {",
" text-indent: 10px;",
" padding-top: 10px;",
" }",
" ",
" nav ul {",
" margin: 0px;",
" padding: 5px 0px 5px 30px;",
" }",
" ",
" nav li {",
" display: inline;",
" margin-right: 20px;",
" }",
" ",
" a {",
" text-decoration: none;",
" color: inherit;",
" }",
"</style>",
" ",
"<header>",
" <h1>Cooking with FCC!</h1>",
" <nav>",
@ -1723,7 +1733,7 @@
"</header>"
],
"tests": [
"assert(code.match(/nav\\s*?{\\s*?background-color:\\s*?hsl\\(178,\\s*?80%,\\s*?25%\\)/gi), 'message: The <code>nav</code> element should have a <code>background-color</code> of the adjusted teal and make sure to use the <code>hsl()</code> property.');"
"assert(code.match(/nav\\s*?{\\s*?background-color:\\s*?hsl\\(180,\\s*?80%,\\s*?25%\\)/gi), 'message: The <code>nav</code> element should have a <code>background-color</code> of the adjusted cyan tone using the <code>hsl()</code> property.');"
],
"solutions": [],
"hints": [],