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

fix(challenges): update pseudo-element selector syntax from CSS2 to CSS3

Browse Source
This commit is contained in:
Ankit Tiwari
2018-07-01 17:42:21 +05:30
committed by Kristofer Koishigawa
parent 362fc8afc6
commit 15675e8b42
1 changed files with 14 additions and 14 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@ -2622,27 +2622,27 @@
"id": "587d78a6367417b2b2512ade", "id": "587d78a6367417b2b2512ade",
"title": "Create a More Complex Shape Using CSS and HTML", "title": "Create a More Complex Shape Using CSS and HTML",
"description": [ "description": [
"One of the most popular shapes in the world is the heart shape, and this challenge creates it with raw CSS. But first, you need to understand the <code>:before</code> and <code>:after</code> selectors. These selectors are used to add something before or after a selected element. In the following example, a <code>:before</code> selector is used to add a rectangle to an element with the class <code>heart</code>:", "One of the most popular shapes in the world is the heart shape, and in this challenge you'll create one using pure CSS. But first, you need to understand the <code>::before</code> and <code>::after</code> pseudo-elements. These pseudo-elements are used to add something before or after a selected element. In the following example, a <code>::before</code> pseudo-element is used to add a rectangle to an element with the class <code>heart</code>:",
"<blockquote>.heart:before {<br>&nbsp;&nbsp;content: \"\";<br>&nbsp;&nbsp;background-color: yellow;<br>&nbsp;&nbsp;border-radius: 25%;<br>&nbsp;&nbsp;position: absolute;<br>&nbsp;&nbsp;height: 50px;<br>&nbsp;&nbsp;width: 70px;<br>&nbsp;&nbsp;top: -50px;<br>&nbsp;&nbsp;left: 5px;<br>}</blockquote>", "<blockquote>.heart::before {<br>&nbsp;&nbsp;content: \"\";<br>&nbsp;&nbsp;background-color: yellow;<br>&nbsp;&nbsp;border-radius: 25%;<br>&nbsp;&nbsp;position: absolute;<br>&nbsp;&nbsp;height: 50px;<br>&nbsp;&nbsp;width: 70px;<br>&nbsp;&nbsp;top: -50px;<br>&nbsp;&nbsp;left: 5px;<br>}</blockquote>",
"For the <code>:before</code> and <code>:after</code> selectors to function properly, they must have a defined <code>content</code> property. It usually has content such as a photo or text. When the <code>:before</code> and <code>:after</code> selectors add shapes, the <code>content</code> property is still required, but it's set to an empty string.", "For the <code>::before</code> and <code>::after</code> pseudo-elements to function properly, they must have a defined <code>content</code> property. This property is usually used to add things like a photo or text to the selected element. When the <code>::before</code> and <code>::after</code> pseudo-elements are used to make shapes, the <code>content</code> property is still required, but it's set to an empty string.",
"In the above example, the element with the class of <code>heart</code> has a <code>:before</code> selector that produces a yellow rectangle with <code>height</code> and <code>width</code> of 50px and 70px, respectively. This rectangle has round corners due to its 25% border radius and is positioned absolutely at 5px from the <code>left</code> and 50px above the <code>top</code> of the element.", "In the above example, the element with the class of <code>heart</code> has a <code>::before</code> pseudo-element that produces a yellow rectangle with <code>height</code> and <code>width</code> of 50px and 70px, respectively. This rectangle has round corners due to its 25% border radius and is positioned absolutely at 5px from the <code>left</code> and 50px above the <code>top</code> of the element.",
"<hr>", "<hr>",
"Transform the element on the screen to a heart. In the <code>heart:after</code> selector, change the <code>background-color</code> to pink and the <code>border-radius</code> to 50%.", "Transform the element on the screen to a heart. In the <code>heart::after</code> selector, change the <code>background-color</code> to pink and the <code>border-radius</code> to 50%.",
"Next, target the element with the class <code>heart</code> (just <code>heart</code>) and fill in the <code>transform</code> property. Use the <code>rotate()</code> function with -45 degrees. (<code>rotate()</code> works the same way that <code>skewX()</code> and <code>skewY()</code> do).", "Next, target the element with the class <code>heart</code> (just <code>heart</code>) and fill in the <code>transform</code> property. Use the <code>rotate()</code> function with -45 degrees. (<code>rotate()</code> works the same way that <code>skewX()</code> and <code>skewY()</code> do).",
"Finally, in the <code>heart:before</code> selector, set its <code>content</code> property to an empty string." "Finally, in the <code>heart::before</code> selector, set its <code>content</code> property to an empty string."
], ],
"tests": [ "tests": [
{ {
"text": "text":
"The <code>background-color</code> property of the <code>heart:after</code> selector should be pink.", "The <code>background-color</code> property of the <code>heart::after</code> selector should be pink.",
"testString": "testString":
"assert(code.match(/\\.heart:after\\s*?{\\s*?background-color\\s*?:\\s*?pink\\s*?;/gi), 'The <code>background-color</code> property of the <code>heart:after</code> selector should be pink.');" "assert(code.match(/\\.heart::after\\s*?{\\s*?background-color\\s*?:\\s*?pink\\s*?;/gi), 'The <code>background-color</code> property of the <code>heart::after</code> selector should be pink.');"
}, },
{ {
"text": "text":
"The <code>border-radius</code> of the <code>heart:after</code> selector should be 50%.", "The <code>border-radius</code> of the <code>heart::after</code> selector should be 50%.",
"testString": "testString":
"assert(code.match(/border-radius\\s*?:\\s*?50%/gi).length == 2, 'The <code>border-radius</code> of the <code>heart:after</code> selector should be 50%.');" "assert(code.match(/border-radius\\s*?:\\s*?50%/gi).length == 2, 'The <code>border-radius</code> of the <code>heart::after</code> selector should be 50%.');"
}, },
{ {
"text": "text":
@ -2652,9 +2652,9 @@
}, },
{ {
"text": "text":
"The <code>content</code> of the <code>heart:before</code> selector should be an empty string.", "The <code>content</code> of the <code>heart::before</code> selector should be an empty string.",
"testString": "testString":
"assert(code.match(/\\.heart:before\\s*?{\\s*?content\\s*?:\\s*?(\"|')\\1\\s*?;/gi), 'The <code>content</code> of the <code>heart:before</code> selector should be an empty string.');" "assert(code.match(/\\.heart::before\\s*?{\\s*?content\\s*?:\\s*?(\"|')\\1\\s*?;/gi), 'The <code>content</code> of the <code>heart::before</code> selector should be an empty string.');"
} }
], ],
"solutions": [], "solutions": [],
@ -2681,7 +2681,7 @@
" width: 50px;", " width: 50px;",
" transform: ;", " transform: ;",
"}", "}",
".heart:after {", ".heart::after {",
" background-color: blue;", " background-color: blue;",
" content: \"\";", " content: \"\";",
" border-radius: 25%;", " border-radius: 25%;",
@ -2691,7 +2691,7 @@
" top: 0px;", " top: 0px;",
" left: 25px;", " left: 25px;",
"}", "}",
".heart:before {", ".heart::before {",
" content: ;", " content: ;",
" background-color: pink;", " background-color: pink;",
" border-radius: 50%;", " border-radius: 50%;",