finish the color section of the basic html section
Quincy Larson
parent
6682839263
commit
2059b24f5d
|
|
@ -3057,7 +3057,7 @@
|
|||
"We can do this by adding <code>body { background-color: blue; }</code> to our <code>style</code> element."
|
||||
],
|
||||
"tests": [
|
||||
"assert($('body').css('background-color') === 'rgb(0, 0, 0)', 'Give your <code>body</code> element the background-color of blue.')"
|
||||
"assert($('body').css('background-color') === 'rgb(0, 0, 0)', 'Give your <code>body</code> element the background-color of black.')"
|
||||
],
|
||||
"challengeSeed": [
|
||||
"<style>",
|
||||
|
|
@ -3296,45 +3296,324 @@
|
|||
"dashedName": "waypoint-use-hex-code-for-specific-colors",
|
||||
"difficulty": 0.054,
|
||||
"description": [
|
||||
""
|
||||
"Use hex code instead of a color."
|
||||
],
|
||||
"tests": [
|
||||
|
||||
"assert($('body').css('background-color') === 'rgb(0, 0, 0)', 'Give your <code>body</code> element the background-color of black.')",
|
||||
"assert(editor.match(/#000000/g) && editor.match(/#000000/g).length > 0, 'Use hex code the color black instead of the word \"black\". For example <code>body: { color: #000000; }</code>.')"
|
||||
],
|
||||
"challengeSeed": [
|
||||
"<style>",
|
||||
" .injected-text {",
|
||||
" margin-bottom: -25px;",
|
||||
" text-align: center;",
|
||||
" body {",
|
||||
" background-color: black;",
|
||||
" }",
|
||||
"",
|
||||
" .box {",
|
||||
" border-style: solid;",
|
||||
" border-color: black;",
|
||||
" border-width: 5px;",
|
||||
" text-align: center;",
|
||||
"</style>"
|
||||
],
|
||||
"challengeType": 0,
|
||||
"nameCn": "",
|
||||
"descriptionCn": [],
|
||||
"nameFr": "",
|
||||
"descriptionFr": [],
|
||||
"nameRu": "",
|
||||
"descriptionRu": [],
|
||||
"nameEs": "",
|
||||
"descriptionEs": [],
|
||||
"namePt": "",
|
||||
"descriptionPt": [],
|
||||
"nameDe": "",
|
||||
"descriptionDe": [
|
||||
]
|
||||
},
|
||||
{
|
||||
"id": "bad87fee1348bd9aedf08725",
|
||||
"name": "Waypoint: Use Hex Code to Color Elements White",
|
||||
"dashedName": "waypoint-use-hex-code-to-color-elements-white",
|
||||
"difficulty": 0.055,
|
||||
"description": [
|
||||
"Use hex code instead of a color."
|
||||
],
|
||||
"tests": [
|
||||
"assert($('body').css('background-color') === 'rgb(255, 255, 255)', 'Your <code>body</code> element should have the background-color of white.')",
|
||||
"assert(editor.match(/#FFFFFF/ig) && editor.match(/#FFFFFF/ig).length > 0, 'Use hex code the color white instead of the word \"white\". For example <code>body: { color: #FFFFFF; }</code>.')"
|
||||
],
|
||||
"challengeSeed": [
|
||||
"<style>",
|
||||
" body {",
|
||||
" background-color: #000000;",
|
||||
" }",
|
||||
"",
|
||||
" .yellow-box {",
|
||||
" background-color: yellow;",
|
||||
" padding: 20px 40px 20px 40px;",
|
||||
"</style>"
|
||||
],
|
||||
"challengeType": 0,
|
||||
"nameCn": "",
|
||||
"descriptionCn": [],
|
||||
"nameFr": "",
|
||||
"descriptionFr": [],
|
||||
"nameRu": "",
|
||||
"descriptionRu": [],
|
||||
"nameEs": "",
|
||||
"descriptionEs": [],
|
||||
"namePt": "",
|
||||
"descriptionPt": [],
|
||||
"nameDe": "",
|
||||
"descriptionDe": [
|
||||
]
|
||||
},
|
||||
{
|
||||
"id": "bad87fee1348bd9aedf08724",
|
||||
"name": "Waypoint: Use Hex Code to Color Elements Red",
|
||||
"dashedName": "waypoint-use-hex-code-to-color-elements-red",
|
||||
"difficulty": 0.056,
|
||||
"description": [
|
||||
"Use hex code instead of a color."
|
||||
],
|
||||
"tests": [
|
||||
"assert($('body').css('background-color') === 'rgb(255, 0, 0)', 'Give your <code>body</code> element the background-color of red.')",
|
||||
"assert(editor.match(/#FF0000/g) && editor.match(/#FF0000/g).length > 0, 'Use hex code the color red instead of the word \"red\". For example <code>body: { color: #FF0000; }</code>.')"
|
||||
],
|
||||
"challengeSeed": [
|
||||
"<style>",
|
||||
" body {",
|
||||
" background-color: #FFFFFF;",
|
||||
" }",
|
||||
" ",
|
||||
" .red-box {",
|
||||
" background-color:red;",
|
||||
" margin: 20px 40px 20px 40px;",
|
||||
"</style>"
|
||||
],
|
||||
"challengeType": 0,
|
||||
"nameCn": "",
|
||||
"descriptionCn": [],
|
||||
"nameFr": "",
|
||||
"descriptionFr": [],
|
||||
"nameRu": "",
|
||||
"descriptionRu": [],
|
||||
"nameEs": "",
|
||||
"descriptionEs": [],
|
||||
"namePt": "",
|
||||
"descriptionPt": [],
|
||||
"nameDe": "",
|
||||
"descriptionDe": [
|
||||
]
|
||||
},
|
||||
{
|
||||
"id": "bad87fee1348bd9aedf08723",
|
||||
"name": "Waypoint: Use Hex Code to Color Elements Green",
|
||||
"dashedName": "waypoint-use-hex-code-to-color-elements-green",
|
||||
"difficulty": 0.057,
|
||||
"description": [
|
||||
"Use hex code instead of a color."
|
||||
],
|
||||
"tests": [
|
||||
"assert($('body').css('background-color') === 'rgb(0, 255, 0)', 'Give your <code>body</code> element the background-color of green.')",
|
||||
"assert(editor.match(/#00FF00/g) && editor.match(/#00FF00/g).length > 0, 'Use hex code the color green instead of the word \"green\". For example <code>body: { color: #00FF00; }</code>.')"
|
||||
],
|
||||
"challengeSeed": [
|
||||
"<style>",
|
||||
" body {",
|
||||
" background-color: #FF0000;",
|
||||
" }",
|
||||
"",
|
||||
" .green-box {",
|
||||
" background-color: green;",
|
||||
"</style>"
|
||||
],
|
||||
"challengeType": 0,
|
||||
"nameCn": "",
|
||||
"descriptionCn": [],
|
||||
"nameFr": "",
|
||||
"descriptionFr": [],
|
||||
"nameRu": "",
|
||||
"descriptionRu": [],
|
||||
"nameEs": "",
|
||||
"descriptionEs": [],
|
||||
"namePt": "",
|
||||
"descriptionPt": [],
|
||||
"nameDe": "",
|
||||
"descriptionDe": [
|
||||
]
|
||||
},
|
||||
{
|
||||
"id": "bad87fee1348bd9aedf08722",
|
||||
"name": "Waypoint: Use Hex Code to Color Elements Blue",
|
||||
"dashedName": "waypoint-use-hex-code-to-color-elements-blue",
|
||||
"difficulty": 0.058,
|
||||
"description": [
|
||||
"Use hex code instead of a color."
|
||||
],
|
||||
"tests": [
|
||||
"assert($('body').css('background-color') === 'rgb(0, 0, 255)', 'Give your <code>body</code> element the background-color of blue.')",
|
||||
"assert(editor.match(/#0000FF/g) && editor.match(/#0000FF/g).length > 0, 'Use hex code the color blue instead of the word \"blue\". For example <code>body: { color: #0000FF; }</code>.')"
|
||||
],
|
||||
"challengeSeed": [
|
||||
"<style>",
|
||||
" body {",
|
||||
" background-color: #00FF00;",
|
||||
" }",
|
||||
"</style>",
|
||||
"<h5 class=\"injected-text\">margin</h5>",
|
||||
"",
|
||||
"<div class=\"box yellow-box\">",
|
||||
" <h5 class=\"box red-box\">padding</h5>",
|
||||
" <h5 class=\"box green-box\">padding</h5>",
|
||||
"</div>"
|
||||
"</style>"
|
||||
],
|
||||
"challengeType": 0,
|
||||
"nameCn": "",
|
||||
"descriptionCn": [],
|
||||
"nameFr": "",
|
||||
"descriptionFr": [],
|
||||
"nameRu": "",
|
||||
"descriptionRu": [],
|
||||
"nameEs": "",
|
||||
"descriptionEs": [],
|
||||
"namePt": "",
|
||||
"descriptionPt": [],
|
||||
"nameDe": "",
|
||||
"descriptionDe": [
|
||||
]
|
||||
},
|
||||
{
|
||||
"id": "bad87fee1348bd9aedf08721",
|
||||
"name": "Waypoint: Use Hex Code to Mix Colors",
|
||||
"dashedName": "waypoint-use-hex-code-to-mix-colors",
|
||||
"difficulty": 0.059,
|
||||
"description": [
|
||||
"Use hex code instead of a orange."
|
||||
],
|
||||
"tests": [
|
||||
"assert($('body').css('background-color') === 'rgb(255, 165, 0)', 'Give your <code>body</code> element the background-color of orange.')",
|
||||
"assert(editor.match(/#FFA500/g) && editor.match(/#FFA500/g).length > 0, 'Use hex code the color orange instead of the word \"orange\". For example <code>body: { color: #FFA500; }</code>.')"
|
||||
],
|
||||
"challengeSeed": [
|
||||
"<style>",
|
||||
" body {",
|
||||
" background-color: #0000FF;",
|
||||
" }",
|
||||
"</style>"
|
||||
],
|
||||
"challengeType": 0,
|
||||
"nameCn": "",
|
||||
"descriptionCn": [],
|
||||
"nameFr": "",
|
||||
"descriptionFr": [],
|
||||
"nameRu": "",
|
||||
"descriptionRu": [],
|
||||
"nameEs": "",
|
||||
"descriptionEs": [],
|
||||
"namePt": "",
|
||||
"descriptionPt": [],
|
||||
"nameDe": "",
|
||||
"descriptionDe": [
|
||||
]
|
||||
},
|
||||
{
|
||||
"id": "bad87fee1348bd9aede08720",
|
||||
"name": "Waypoint: Use Hex Code to Color Elements Gray",
|
||||
"dashedName": "waypoint-use-hex-code-to-color-elements-gray",
|
||||
"difficulty": 0.060,
|
||||
"description": [
|
||||
"Use hex code instead of a color."
|
||||
],
|
||||
"tests": [
|
||||
"assert($('body').css('background-color') === 'rgb(128, 128, 128)', 'Give your <code>body</code> element the background-color of gray.')",
|
||||
"assert(editor.match(/#808080/g) && editor.match(/#808080/g).length > 0, 'Use hex code the color gray instead of the word \"gray\". For example <code>body: { color: #808080; }</code>.')"
|
||||
],
|
||||
"challengeSeed": [
|
||||
"<style>",
|
||||
" body {",
|
||||
" background-color: FFA500;",
|
||||
" }",
|
||||
"</style>"
|
||||
],
|
||||
"challengeType": 0,
|
||||
"nameCn": "",
|
||||
"descriptionCn": [],
|
||||
"nameFr": "",
|
||||
"descriptionFr": [],
|
||||
"nameRu": "",
|
||||
"descriptionRu": [],
|
||||
"nameEs": "",
|
||||
"descriptionEs": [],
|
||||
"namePt": "",
|
||||
"descriptionPt": [],
|
||||
"nameDe": "",
|
||||
"descriptionDe": [
|
||||
]
|
||||
},
|
||||
{
|
||||
"id": "bad87fee1348bd9aedf08720",
|
||||
"name": "Waypoint: Use Hex Code for Specific Shades of Gray",
|
||||
"dashedName": "waypoint-use-hex-code-for-specific-shades-of-gray",
|
||||
"difficulty": 0.061,
|
||||
"description": [
|
||||
"Use hex code instead of a color."
|
||||
],
|
||||
"tests": [
|
||||
"assert($('body').css('background-color') === 'rgb(17, 17, 17)', 'Give your <code>body</code> element the background-color of a light gray.')",
|
||||
"assert(editor.match(/#111111/g) && editor.match(/#111111/g).length > 0, 'Use hex code to make a light gray. For example <code>body: { color: #111111; }</code>.')"
|
||||
],
|
||||
"challengeSeed": [
|
||||
"<style>",
|
||||
" body {",
|
||||
" background-color: #808080;",
|
||||
" }",
|
||||
"</style>"
|
||||
],
|
||||
"challengeType": 0,
|
||||
"nameCn": "",
|
||||
"descriptionCn": [],
|
||||
"nameFr": "",
|
||||
"descriptionFr": [],
|
||||
"nameRu": "",
|
||||
"descriptionRu": [],
|
||||
"nameEs": "",
|
||||
"descriptionEs": [],
|
||||
"namePt": "",
|
||||
"descriptionPt": [],
|
||||
"nameDe": "",
|
||||
"descriptionDe": [
|
||||
]
|
||||
},
|
||||
{
|
||||
"id": "bad87fee1348bd9aedf08719",
|
||||
"name": "Waypoint: Use Abbreviated Hex Code",
|
||||
"dashedName": "waypoint-use-abbreviated-hex-code",
|
||||
"difficulty": 0.062,
|
||||
"description": [
|
||||
"Use hex code instead of a color."
|
||||
],
|
||||
"tests": [
|
||||
"assert($('body').css('background-color') === 'rgb(255, 0, 0)', 'Give your <code>body</code> element the background-color of red.')",
|
||||
"assert(editor.match(/#F00/ig) && editor.match(/#F00/ig).length > 0, 'Use abbreviated hex code instead of a named color. For example <code>body: { color: #F00; }</code>.')"
|
||||
],
|
||||
"challengeSeed": [
|
||||
"<style>",
|
||||
" body {",
|
||||
" background-color: #111111;",
|
||||
" }",
|
||||
"</style>"
|
||||
],
|
||||
"challengeType": 0,
|
||||
"nameCn": "",
|
||||
"descriptionCn": [],
|
||||
"nameFr": "",
|
||||
"descriptionFr": [],
|
||||
"nameRu": "",
|
||||
"descriptionRu": [],
|
||||
"nameEs": "",
|
||||
"descriptionEs": [],
|
||||
"namePt": "",
|
||||
"descriptionPt": [],
|
||||
"nameDe": "",
|
||||
"descriptionDe": [
|
||||
]
|
||||
},
|
||||
{
|
||||
"id": "bad87fee1348bd9aedf08718",
|
||||
"name": "Waypoint: Use RGB code for Colors Instead of Hex Code",
|
||||
"dashedName": "waypoint-use-rgb-code-for-colors-instead-of-hex-code",
|
||||
"difficulty": 0.063,
|
||||
"description": [
|
||||
"Use hex code instead of a color."
|
||||
],
|
||||
"tests": [
|
||||
"assert($('body').css('background-color') === 'rgb(255, 0, 0)', 'Give your <code>body</code> element the background-color of red.')",
|
||||
"assert(editor.match(/rgb\\s?\\(\\s?255\\s?,\\s?0,\\s?0\\s?\\)/ig), 'Use RGB code instead of hex for the color red. For example <code>body: { color: rgb(255,0,0); }</code>.')"
|
||||
],
|
||||
"challengeSeed": [
|
||||
"<style>",
|
||||
" body {",
|
||||
" background-color: #F00;",
|
||||
" }",
|
||||
"</style>"
|
||||
],
|
||||
"challengeType": 0,
|
||||
"nameCn": "",
|
||||
|
|
|
|||
Loading…
Reference in New Issue