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

test(challenges): add solutions to be tested

Browse Source 
ISSUES CLOSED: #206
This commit is contained in:
Josh Alling
2018-08-02 08:09:38 -06:00
committed by Kristofer Koishigawa
parent 037990c47f
commit 1f06d45bbd
6 changed files with 466 additions and 750 deletions
Download Patch File Download Diff File Expand all files Collapse all files

4
challenges/01-responsive-web-design/applied-accessibility.json
View File

@ -1251,7 +1251,9 @@
"assert(code.match(/background-color:\\s*?hsl\\(120,\\s*?25%,\\s*?55%\\)/gi), 'Your code should only change the lightness value for the <code>background-color</code> property to a value of 55%.');" "assert(code.match(/background-color:\\s*?hsl\\(120,\\s*?25%,\\s*?55%\\)/gi), 'Your code should only change the lightness value for the <code>background-color</code> property to a value of 55%.');"
} }
], ],
"solutions": [], "solutions": [
"var code = \"body {color: hsl(0, 55%, 15%); background-color: hsl(120, 25%, 55%);}\""
],
"hints": [], "hints": [],
"releasedOn": "Feb 17, 2017", "releasedOn": "Feb 17, 2017",
"challengeType": 0, "challengeType": 0,

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

@ -98,7 +98,9 @@
"assert(code.match(/.fullCard\\s*{[\\s\\S][^}]*\\n*^\\s*width\\s*:\\s*245px\\s*;/gm), 'Your code should change the <code>width</code> property of the card to 245 pixels by using the <code>fullCard</code> class selector.');" "assert(code.match(/.fullCard\\s*{[\\s\\S][^}]*\\n*^\\s*width\\s*:\\s*245px\\s*;/gm), 'Your code should change the <code>width</code> property of the card to 245 pixels by using the <code>fullCard</code> class selector.');"
} }
], ],
"solutions": [], "solutions": [
"var code = \".fullCard {\\nwidth: 245px; border: 1px solid #ccc; border-radius: 5px; margin: 10px 5px; padding: 4px;}\""
],
"hints": [], "hints": [],
"releasedOn": "Feb 17, 2017", "releasedOn": "Feb 17, 2017",
"challengeType": 0, "challengeType": 0,
@ -809,7 +811,9 @@
"assert(code.match(/box-shadow:\\s*?0\\s+?10px\\s+?20px\\s+?rgba\\(\\s*?0\\s*?,\\s*?0\\s*?,\\s*?0\\s*?,\\s*?0?\\.19\\),\\s*?0\\s+?6px\\s+?6px\\s+?rgba\\(\\s*?0\\s*?,\\s*?0\\s*?,\\s*?0\\s*?,\\s*?0?\\.23\\)/gi), 'You should use the given CSS for the <code>box-shadow</code> value.');" "assert(code.match(/box-shadow:\\s*?0\\s+?10px\\s+?20px\\s+?rgba\\(\\s*?0\\s*?,\\s*?0\\s*?,\\s*?0\\s*?,\\s*?0?\\.19\\),\\s*?0\\s+?6px\\s+?6px\\s+?rgba\\(\\s*?0\\s*?,\\s*?0\\s*?,\\s*?0\\s*?,\\s*?0?\\.23\\)/gi), 'You should use the given CSS for the <code>box-shadow</code> value.');"
} }
], ],
"solutions": [], "solutions": [
"var code = \"#thumbnail {box-shadow: 0 10px 20px rgba(0,0,0,0.19), 0 6px 6px rgba(0,0,0,0.23);}\""
],
"hints": [], "hints": [],
"releasedOn": "Feb 17, 2017", "releasedOn": "Feb 17, 2017",
"challengeType": 0, "challengeType": 0,
@ -1735,7 +1739,9 @@
"assert(code.match(/margin:\\s*?auto;/g), 'The <code>div</code> should have a <code>margin</code> set to auto.');" "assert(code.match(/margin:\\s*?auto;/g), 'The <code>div</code> should have a <code>margin</code> set to auto.');"
} }
], ],
"solutions": [], "solutions": [
"var code = \"div {background-color: blue; height: 100px; width: 100px; margin: auto;}\""
],
"hints": [], "hints": [],
"releasedOn": "Feb 17, 2017", "releasedOn": "Feb 17, 2017",
"challengeType": 0, "challengeType": 0,
@ -2099,7 +2105,9 @@
"assert(code.match(/nav\\s*?{\\s*?background-color:\\s*?hsl\\(180,\\s*?80%,\\s*?25%\\)/gi), 'The <code>nav</code> element should have a <code>background-color</code> of the adjusted cyan tone using the <code>hsl()</code> property.');" "assert(code.match(/nav\\s*?{\\s*?background-color:\\s*?hsl\\(180,\\s*?80%,\\s*?25%\\)/gi), 'The <code>nav</code> element should have a <code>background-color</code> of the adjusted cyan tone using the <code>hsl()</code> property.');"
} }
], ],
"solutions": [], "solutions": [
"var code = \"nav {background-color: hsl(180, 80%, 25%);}\""
],
"hints": [], "hints": [],
"releasedOn": "Feb 17, 2017", "releasedOn": "Feb 17, 2017",
"challengeType": 0, "challengeType": 0,
@ -2178,7 +2186,9 @@
"assert(code.match(/background:\\s*?linear-gradient\\(35deg,\\s*?(#CCFFFF|#CFF),\\s*?(#FFCCCC|#FCC)\\);/gi), 'The <code>div</code> element should have a <code>linear-gradient</code> <code>background</code> with the specified direction and colors.');" "assert(code.match(/background:\\s*?linear-gradient\\(35deg,\\s*?(#CCFFFF|#CFF),\\s*?(#FFCCCC|#FCC)\\);/gi), 'The <code>div</code> element should have a <code>linear-gradient</code> <code>background</code> with the specified direction and colors.');"
} }
], ],
"solutions": [], "solutions": [
"var code = \"<style> div{border-radius: 20px; width: 70%; height: 400px; margin: 50px auto; background: linear-gradient(35deg, #cff, #fcc);}</style><div></div>\""
],
"hints": [], "hints": [],
"releasedOn": "Feb 17, 2017", "releasedOn": "Feb 17, 2017",
"challengeType": 0, "challengeType": 0,
@ -2257,7 +2267,9 @@
"assert(code.match(/black\\s+?80px/gi), 'The last color stop at 80 pixels should be <code>black</code>.');" "assert(code.match(/black\\s+?80px/gi), 'The last color stop at 80 pixels should be <code>black</code>.');"
} }
], ],
"solutions": [], "solutions": [
"var code = \"background: repeating-linear-gradient(45deg, yellow 0px, yellow 40px, black 40px, black 80px);\""
],
"hints": [], "hints": [],
"releasedOn": "Feb 17, 2017", "releasedOn": "Feb 17, 2017",
"challengeType": 0, "challengeType": 0,
@ -2310,7 +2322,9 @@
"assert(code.match(/background:\\s*?url\\(\\s*(\"|'|)https:\\/\\/i\\.imgur\\.com\\/MJAkxbh\\.png\\1\\s*\\)/gi), 'Your <code>body</code> element should have a <code>background</code> property set to a <code>url()</code> with the given link.');" "assert(code.match(/background:\\s*?url\\(\\s*(\"|'|)https:\\/\\/i\\.imgur\\.com\\/MJAkxbh\\.png\\1\\s*\\)/gi), 'Your <code>body</code> element should have a <code>background</code> property set to a <code>url()</code> with the given link.');"
} }
], ],
"solutions": [], "solutions": [
"var code = \"body {background: url('https://i.imgur.com/MJAkxbh.png')}\""
],
"hints": [ "hints": [
"Remember to wrap the address in quotes within the url() function." "Remember to wrap the address in quotes within the url() function."
], ],
@ -2346,7 +2360,9 @@
"assert(code.match(/#ball2\\s*?{\\s*?left:\\s*?65%;\\s*?transform:\\s*?scale\\(1\\.5\\);\\s*?}|#ball2\\s*?{\\s*?transform:\\s*?scale\\(1\\.5\\);\\s*?left:\\s*?65%;\\s*?}/gi), 'Set the <code>transform</code> property for <code>#ball2</code> to scale it 1.5 times its size.');" "assert(code.match(/#ball2\\s*?{\\s*?left:\\s*?65%;\\s*?transform:\\s*?scale\\(1\\.5\\);\\s*?}|#ball2\\s*?{\\s*?transform:\\s*?scale\\(1\\.5\\);\\s*?left:\\s*?65%;\\s*?}/gi), 'Set the <code>transform</code> property for <code>#ball2</code> to scale it 1.5 times its size.');"
} }
], ],
"solutions": [], "solutions": [
"var code = \"#ball2 {left: 65%; transform: scale(1.5);}\""
],
"hints": [], "hints": [],
"releasedOn": "Feb 17, 2017", "releasedOn": "Feb 17, 2017",
"challengeType": 0, "challengeType": 0,
@ -2408,7 +2424,7 @@
"assert(code.match(/div:hover\\s*?{\\s*?transform:\\s*?scale\\(1\\.1\\);/gi), 'The size of the <code>div</code> element should scale 1.1 times when the user hovers over it.');" "assert(code.match(/div:hover\\s*?{\\s*?transform:\\s*?scale\\(1\\.1\\);/gi), 'The size of the <code>div</code> element should scale 1.1 times when the user hovers over it.');"
} }
], ],
"solutions": [], "solutions": ["var code = \"div:hover {transform: scale(1.1);}\""],
"hints": [ "hints": [
"Make sure to apply the CSS rule to the hover state of the div, using div:hover" "Make sure to apply the CSS rule to the hover state of the div, using div:hover"
], ],
@ -2463,7 +2479,9 @@
"assert(code.match(/#bottom\\s*?{\\s*?.*?\\s*?transform:\\s*?skewX\\(24deg\\);/g), 'The element with id <code>bottom</code> should be skewed by 24 degrees along its X-axis.');" "assert(code.match(/#bottom\\s*?{\\s*?.*?\\s*?transform:\\s*?skewX\\(24deg\\);/g), 'The element with id <code>bottom</code> should be skewed by 24 degrees along its X-axis.');"
} }
], ],
"solutions": [], "solutions": [
"var code = \"#bottom {background-color: blue; transform: skewX(24deg);}\""
],
"hints": [ "hints": [
"Notice that there is no space between the number and \"deg\" (-32deg) when declaring the degrees value." "Notice that there is no space between the number and \"deg\" (-32deg) when declaring the degrees value."
], ],
@ -2516,7 +2534,9 @@
"assert(code.match(/#top\\s*?{\\s*?.*?\\s*?transform:\\s*?skewY\\(-10deg\\);/g), 'The element with id <code>top</code> should be skewed by -10 degrees along its Y-axis.');" "assert(code.match(/#top\\s*?{\\s*?.*?\\s*?transform:\\s*?skewY\\(-10deg\\);/g), 'The element with id <code>top</code> should be skewed by -10 degrees along its Y-axis.');"
} }
], ],
"solutions": [], "solutions": [
"var code = \"#top {background-color: red; transform: skewY(-10deg);}\""
],
"hints": [], "hints": [],
"releasedOn": "Feb 17, 2017", "releasedOn": "Feb 17, 2017",
"challengeType": 0, "challengeType": 0,
@ -2582,7 +2602,9 @@
"assert(code.match(/box-shadow:\\s*?25px\\s+?10px\\s+?0(px)?\\s+?0(px)?\\s+?blue\\s*?;/gi), 'The value of the <code>box-shadow</code> property should be set to 25px for <code>offset-x</code>, 10px for <code>offset-y</code>, 0 for <code>blur-radius</code>, 0 for <code>spread-radius</code>, and finally blue for the color.');" "assert(code.match(/box-shadow:\\s*?25px\\s+?10px\\s+?0(px)?\\s+?0(px)?\\s+?blue\\s*?;/gi), 'The value of the <code>box-shadow</code> property should be set to 25px for <code>offset-x</code>, 10px for <code>offset-y</code>, 0 for <code>blur-radius</code>, 0 for <code>spread-radius</code>, and finally blue for the color.');"
} }
], ],
"solutions": [], "solutions": [
"var code = \".center {background-color: transparent; border-radius: 50%; box-shadow: 25px 10px 0px 0 blue;}\""
],
"hints": [], "hints": [],
"releasedOn": "Feb 17, 2017", "releasedOn": "Feb 17, 2017",
"challengeType": 0, "challengeType": 0,
@ -2657,7 +2679,9 @@
"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": [
"var code = \".heart {transform: rotate(-45deg);} .heart::after {background-color: pink; border-radius: 50%;} .heart::before {content: \\\"\\\"; border-radius: 50%;}\""
],
"hints": [], "hints": [],
"releasedOn": "Feb 17, 2017", "releasedOn": "Feb 17, 2017",
"challengeType": 0, "challengeType": 0,
@ -2873,7 +2897,9 @@
"assert(code.match(/button\\s*?:\\s*?hover\\s*?{[\\s\\S]*animation-fill-mode\\s*?:\\s*?forwards\\s*?;[\\s\\S]*}/gi) && code.match(/button\\s*?:\\s*?hover\\s*?{[\\s\\S]*animation-name\\s*?:\\s*?background-color\\s*?;[\\s\\S]*}/gi) && code.match(/button\\s*?:\\s*?hover\\s*?{[\\s\\S]*animation-duration\\s*?:\\s*?500ms\\s*?;[\\s\\S]*}/gi), '<code>button:hover</code> should have a <code>animation-fill-mode</code> property with a value of <code>forwards</code>.');" "assert(code.match(/button\\s*?:\\s*?hover\\s*?{[\\s\\S]*animation-fill-mode\\s*?:\\s*?forwards\\s*?;[\\s\\S]*}/gi) && code.match(/button\\s*?:\\s*?hover\\s*?{[\\s\\S]*animation-name\\s*?:\\s*?background-color\\s*?;[\\s\\S]*}/gi) && code.match(/button\\s*?:\\s*?hover\\s*?{[\\s\\S]*animation-duration\\s*?:\\s*?500ms\\s*?;[\\s\\S]*}/gi), '<code>button:hover</code> should have a <code>animation-fill-mode</code> property with a value of <code>forwards</code>.');"
} }
], ],
"solutions": [], "solutions": [
"var code = \"button:hover {animation-name: background-color; animation-duration: 500ms; animation-fill-mode: forwards;}\""
],
"hints": [], "hints": [],
"challengeType": 0, "challengeType": 0,
"translations": {}, "translations": {},
@ -2940,7 +2966,9 @@
"assert(code.match(/100%\\s*?{\\s*?background-color:\\s*?yellow;\\s*?top:\\s*?0(px)?;\\s*?left:\\s*?-25px;\\s*?}/gi), 'The <code>@keyframes</code> rule for <code>100%</code> should use the <code>left</code> offset of -25px.');" "assert(code.match(/100%\\s*?{\\s*?background-color:\\s*?yellow;\\s*?top:\\s*?0(px)?;\\s*?left:\\s*?-25px;\\s*?}/gi), 'The <code>@keyframes</code> rule for <code>100%</code> should use the <code>left</code> offset of -25px.');"
} }
], ],
"solutions": [], "solutions": [
"var code = \"@keyframes rainbow {0% {background-color: blue; top: 0px; left: 0px;} 50% {background-color: green; top: 50px; left: 25px;} 100% {background-color: yellow; top: 0px; left:-25px;}}\""
],
"hints": [], "hints": [],
"releasedOn": "Feb 17, 2017", "releasedOn": "Feb 17, 2017",
"challengeType": 0, "challengeType": 0,
@ -3010,7 +3038,9 @@
"assert(code.match(/@keyframes fade\\s*?{\\s*?50%\\s*?{\\s*?(?:left:\\s*?60%;\\s*?opacity:\\s*?0?\\.1;|opacity:\\s*?0?\\.1;\\s*?left:\\s*?60%;)/gi), 'The <code>keyframes</code> rule for fade should set the <code>opacity</code> property to 0.1 at 50%.');" "assert(code.match(/@keyframes fade\\s*?{\\s*?50%\\s*?{\\s*?(?:left:\\s*?60%;\\s*?opacity:\\s*?0?\\.1;|opacity:\\s*?0?\\.1;\\s*?left:\\s*?60%;)/gi), 'The <code>keyframes</code> rule for fade should set the <code>opacity</code> property to 0.1 at 50%.');"
} }
], ],
"solutions": [], "solutions": [
"var code = \"@keyframes fade {50% { left: 60%; opacity: 0.1;}}\""
],
"hints": [], "hints": [],
"releasedOn": "Feb 17, 2017", "releasedOn": "Feb 17, 2017",
"challengeType": 0, "challengeType": 0,
@ -3249,7 +3279,9 @@
"assert(code.match(/twinkle-1\\s*?{\\s*?50%/g), 'The <code>@keyframes</code> rule for the <code>star-1</code> class should be 50%.');" "assert(code.match(/twinkle-1\\s*?{\\s*?50%/g), 'The <code>@keyframes</code> rule for the <code>star-1</code> class should be 50%.');"
} }
], ],
"solutions": [], "solutions": [
"var code = \"@keyframes twinkle-1 {50% {transform: scale(0.5); opacity: 0.5;}}\""
],
"hints": [ "hints": [
"Check the animation-name declared in the star-1 class to find the right @keyframes rule to change." "Check the animation-name declared in the star-1 class to find the right @keyframes rule to change."
], ],

880
challenges/01-responsive-web-design/basic-css.json
View File

File diff suppressed because it is too large Load Diff

8
challenges/01-responsive-web-design/css-flexbox.json
View File

@ -279,7 +279,9 @@
"testString": "assert(code.match(/footer\\s*?{\\s*?.*?\\s*?.*?\\s*?flex-direction:\\s*?row;/g), 'The <code>footer</code> should have a <code>flex-direction</code> property set to row.');" "testString": "assert(code.match(/footer\\s*?{\\s*?.*?\\s*?.*?\\s*?flex-direction:\\s*?row;/g), 'The <code>footer</code> should have a <code>flex-direction</code> property set to row.');"
} }
], ],
"solutions": [], "solutions": [
"var code = \"header {flex-direction: row;} footer {flex-direction: row;}\""
],
"hints": [], "hints": [],
"releasedOn": "Feb 17, 2017", "releasedOn": "Feb 17, 2017",
"challengeType": 0, "challengeType": 0,
@ -634,7 +636,9 @@
"testString": "assert(code.match(/header\\s.profile-name\\s*{\\s*?.*?\\s*?.*?\\s*?\\s*?.*?\\s*?justify-content\\s*:\\s*(center|flex-start|flex-end|space-between|space-around)\\s*;/g), 'The <code>.profile-name</code> element should have the <code>justify-content</code> property set to any of these values: center, flex-start, flex-end, space-between, or space-around.');" "testString": "assert(code.match(/header\\s.profile-name\\s*{\\s*?.*?\\s*?.*?\\s*?\\s*?.*?\\s*?justify-content\\s*:\\s*(center|flex-start|flex-end|space-between|space-around)\\s*;/g), 'The <code>.profile-name</code> element should have the <code>justify-content</code> property set to any of these values: center, flex-start, flex-end, space-between, or space-around.');"
} }
], ],
"solutions": [], "solutions": [
"var code = \"header .profile-name {display: flex; flex-direction: column; justify-content: center; margin-left: 10px;}\""
],
"hints": [], "hints": [],
"releasedOn": "Feb 17, 2017", "releasedOn": "Feb 17, 2017",
"challengeType": 0, "challengeType": 0,

202
challenges/01-responsive-web-design/css-grid.json
View File

@ -15,13 +15,11 @@
], ],
"tests": [ "tests": [
{ {
"text": "text": "<code>container</code> class should have a <code>display</code> property with a value of <code>grid</code>.",
"<code>container</code> class should have a <code>display</code> property with a value of <code>grid</code>.", "testString": "assert(code.match(/.container\\s*?{[\\s\\S]*display\\s*?:\\s*?grid\\s*?;[\\s\\S]*}/gi), '<code>container</code> class should have a <code>display</code> property with a value of <code>grid</code>.');"
"testString":
"assert(code.match(/.container\\s*?{[\\s\\S]*display\\s*?:\\s*?grid\\s*?;[\\s\\S]*}/gi), '<code>container</code> class should have a <code>display</code> property with a value of <code>grid</code>.');"
} }
], ],
"solutions": [], "solutions": ["var code = \".container {display: grid;}\""],
"hints": [], "hints": [],
"releasedOn": "Feb 15, 2018", "releasedOn": "Feb 15, 2018",
"challengeType": 0, "challengeType": 0,
@ -76,13 +74,13 @@
], ],
"tests": [ "tests": [
{ {
"text": "text": "<code>container</code> class should have a <code>grid-template-columns</code> property with three units of <code>100px</code>.",
"<code>container</code> class should have a <code>grid-template-columns</code> property with three units of <code>100px</code>.", "testString": "assert(code.match(/.container\\s*?{[\\s\\S]*grid-template-columns\\s*?:\\s*?100px\\s*?100px\\s*?100px\\s*?;[\\s\\S]*}/gi), '<code>container</code> class should have a <code>grid-template-columns</code> property with three units of <code>100px</code>.');"
"testString":
"assert(code.match(/.container\\s*?{[\\s\\S]*grid-template-columns\\s*?:\\s*?100px\\s*?100px\\s*?100px\\s*?;[\\s\\S]*}/gi), '<code>container</code> class should have a <code>grid-template-columns</code> property with three units of <code>100px</code>.');"
} }
], ],
"solutions": [], "solutions": [
"var code = \".container {grid-template-columns: 100px 100px 100px;}\""
],
"hints": [], "hints": [],
"releasedOn": "Feb 15, 2018", "releasedOn": "Feb 15, 2018",
"challengeType": 0, "challengeType": 0,
@ -135,13 +133,13 @@
], ],
"tests": [ "tests": [
{ {
"text": "text": "<code>container</code> class should have a <code>grid-template-rows</code> property with two units of <code>50px</code>.",
"<code>container</code> class should have a <code>grid-template-rows</code> property with two units of <code>50px</code>.", "testString": "assert(code.match(/.container\\s*?{[\\s\\S]*grid-template-rows\\s*?:\\s*?50px\\s*?50px\\s*?;[\\s\\S]*}/gi), '<code>container</code> class should have a <code>grid-template-rows</code> property with two units of <code>50px</code>.');"
"testString":
"assert(code.match(/.container\\s*?{[\\s\\S]*grid-template-rows\\s*?:\\s*?50px\\s*?50px\\s*?;[\\s\\S]*}/gi), '<code>container</code> class should have a <code>grid-template-rows</code> property with two units of <code>50px</code>.');"
} }
], ],
"solutions": [], "solutions": [
"var code = \".container {grid-template-rows: 50px 50px;}\""
],
"hints": [], "hints": [],
"releasedOn": "", "releasedOn": "",
"challengeType": 0, "challengeType": 0,
@ -201,13 +199,13 @@
], ],
"tests": [ "tests": [
{ {
"text": "text": "<code>container</code> class should have a <code>grid-template-columns</code> property that has three columns with the following widths: <code>1fr, 100px, and 2fr</code>.",
"<code>container</code> class should have a <code>grid-template-columns</code> property that has three columns with the following widths: <code>1fr, 100px, and 2fr</code>.", "testString": "assert(code.match(/.container\\s*?{[\\s\\S]*grid-template-columns\\s*?:\\s*?1fr\\s*?100px\\s*?2fr\\s*?;[\\s\\S]*}/gi), '<code>container</code> class should have a <code>grid-template-columns</code> property that has three columns with the following widths: <code>1fr, 100px, and 2fr</code>.');"
"testString":
"assert(code.match(/.container\\s*?{[\\s\\S]*grid-template-columns\\s*?:\\s*?1fr\\s*?100px\\s*?2fr\\s*?;[\\s\\S]*}/gi), '<code>container</code> class should have a <code>grid-template-columns</code> property that has three columns with the following widths: <code>1fr, 100px, and 2fr</code>.');"
} }
], ],
"solutions": [], "solutions": [
"var code = \".container {grid-template-columns: 1fr 100px 2fr;}\""
],
"hints": [], "hints": [],
"releasedOn": "", "releasedOn": "",
"challengeType": 0, "challengeType": 0,
@ -264,13 +262,11 @@
], ],
"tests": [ "tests": [
{ {
"text": "text": "<code>container</code> class should have a <code>grid-column-gap</code> property that has the value of <code>20px</code>.",
"<code>container</code> class should have a <code>grid-column-gap</code> property that has the value of <code>20px</code>.", "testString": "assert(code.match(/.container\\s*?{[\\s\\S]*grid-column-gap\\s*?:\\s*?20px\\s*?;[\\s\\S]*}/gi), '<code>container</code> class should have a <code>grid-column-gap</code> property that has the value of <code>20px</code>.');"
"testString":
"assert(code.match(/.container\\s*?{[\\s\\S]*grid-column-gap\\s*?:\\s*?20px\\s*?;[\\s\\S]*}/gi), '<code>container</code> class should have a <code>grid-column-gap</code> property that has the value of <code>20px</code>.');"
} }
], ],
"solutions": [], "solutions": ["var code = \".container {grid-column-gap: 20px;}\""],
"hints": [], "hints": [],
"releasedOn": "", "releasedOn": "",
"challengeType": 0, "challengeType": 0,
@ -326,13 +322,11 @@
], ],
"tests": [ "tests": [
{ {
"text": "text": "<code>container</code> class should have a <code>grid-row-gap</code> property that has the value of <code>5px</code>.",
"<code>container</code> class should have a <code>grid-row-gap</code> property that has the value of <code>5px</code>.", "testString": "assert(code.match(/.container\\s*?{[\\s\\S]*grid-row-gap\\s*?:\\s*?5px\\s*?;[\\s\\S]*}/gi), '<code>container</code> class should have a <code>grid-row-gap</code> property that has the value of <code>5px</code>.');"
"testString":
"assert(code.match(/.container\\s*?{[\\s\\S]*grid-row-gap\\s*?:\\s*?5px\\s*?;[\\s\\S]*}/gi), '<code>container</code> class should have a <code>grid-row-gap</code> property that has the value of <code>5px</code>.');"
} }
], ],
"solutions": [], "solutions": ["var code = \".container {grid-row-gap: 5px;}\""],
"hints": [], "hints": [],
"releasedOn": "", "releasedOn": "",
"challengeType": 0, "challengeType": 0,
@ -388,13 +382,11 @@
], ],
"tests": [ "tests": [
{ {
"text": "text": "<code>container</code> class should have a <code>grid-gap</code> property that introduces <code>10px</code> gap between the rows and <code>20px</code> gap between the columns.",
"<code>container</code> class should have a <code>grid-gap</code> property that introduces <code>10px</code> gap between the rows and <code>20px</code> gap between the columns.", "testString": "assert(code.match(/.container\\s*?{[\\s\\S]*grid-gap\\s*?:\\s*?10px\\s*?20px\\s*?;[\\s\\S]*}/gi), '<code>container</code> class should have a <code>grid-gap</code> property that introduces <code>10px</code> gap between the rows and <code>20px</code> gap between the columns.');"
"testString":
"assert(code.match(/.container\\s*?{[\\s\\S]*grid-gap\\s*?:\\s*?10px\\s*?20px\\s*?;[\\s\\S]*}/gi), '<code>container</code> class should have a <code>grid-gap</code> property that introduces <code>10px</code> gap between the rows and <code>20px</code> gap between the columns.');"
} }
], ],
"solutions": [], "solutions": ["var code = \".container {grid-gap: 10px 20px;}\""],
"hints": [], "hints": [],
"releasedOn": "", "releasedOn": "",
"challengeType": 0, "challengeType": 0,
@ -456,13 +448,11 @@
], ],
"tests": [ "tests": [
{ {
"text": "text": "<code>item5</code> class should have a <code>grid-column</code> property that has the value of <code>2 / 4</code>.",
"<code>item5</code> class should have a <code>grid-column</code> property that has the value of <code>2 / 4</code>.", "testString": "assert(code.match(/.item5\\s*?{[\\s\\S]*grid-column\\s*?:\\s*?2\\s*?\\/\\s*?4\\s*?;[\\s\\S]*}/gi), '<code>item5</code> class should have a <code>grid-column</code> property that has the value of <code>2 / 4</code>.');"
"testString":
"assert(code.match(/.item5\\s*?{[\\s\\S]*grid-column\\s*?:\\s*?2\\s*?\\/\\s*?4\\s*?;[\\s\\S]*}/gi), '<code>item5</code> class should have a <code>grid-column</code> property that has the value of <code>2 / 4</code>.');"
} }
], ],
"solutions": [], "solutions": ["var code = \".item5 {grid-column: 2 / 4;}\""],
"hints": [], "hints": [],
"releasedOn": "", "releasedOn": "",
"challengeType": 0, "challengeType": 0,
@ -522,13 +512,11 @@
], ],
"tests": [ "tests": [
{ {
"text": "text": "<code>item5</code> class should have a <code>grid-row</code> property that has the value of <code>2 / 4</code>.",
"<code>item5</code> class should have a <code>grid-row</code> property that has the value of <code>2 / 4</code>.", "testString": "assert(code.match(/.item5\\s*?{[\\s\\S]*grid-row\\s*?:\\s*?2\\s*?\\/\\s*?4\\s*?;[\\s\\S]*}/gi), '<code>item5</code> class should have a <code>grid-row</code> property that has the value of <code>2 / 4</code>.');"
"testString":
"assert(code.match(/.item5\\s*?{[\\s\\S]*grid-row\\s*?:\\s*?2\\s*?\\/\\s*?4\\s*?;[\\s\\S]*}/gi), '<code>item5</code> class should have a <code>grid-row</code> property that has the value of <code>2 / 4</code>.');"
} }
], ],
"solutions": [], "solutions": ["var code = \".item5 {grid-row: 2 / 4;}\""],
"hints": [], "hints": [],
"releasedOn": "", "releasedOn": "",
"challengeType": 0, "challengeType": 0,
@ -592,13 +580,11 @@
], ],
"tests": [ "tests": [
{ {
"text": "text": "<code>item2</code> class should have a <code>justify-self</code> property that has the value of <code>center</code>.",
"<code>item2</code> class should have a <code>justify-self</code> property that has the value of <code>center</code>.", "testString": "assert(code.match(/.item2\\s*?{[\\s\\S]*justify-self\\s*?:\\s*?center\\s*?;[\\s\\S]*}/gi), '<code>item2</code> class should have a <code>justify-self</code> property that has the value of <code>center</code>.');"
"testString":
"assert(code.match(/.item2\\s*?{[\\s\\S]*justify-self\\s*?:\\s*?center\\s*?;[\\s\\S]*}/gi), '<code>item2</code> class should have a <code>justify-self</code> property that has the value of <code>center</code>.');"
} }
], ],
"solutions": [], "solutions": ["var code = \".item2 {justify-self: center;}\""],
"hints": [], "hints": [],
"releasedOn": "", "releasedOn": "",
"challengeType": 0, "challengeType": 0,
@ -659,13 +645,11 @@
], ],
"tests": [ "tests": [
{ {
"text": "text": "<code>item3</code> class should have a <code>align-self</code> property that has the value of <code>end</code>.",
"<code>item3</code> class should have a <code>align-self</code> property that has the value of <code>end</code>.", "testString": "assert(code.match(/.item3\\s*?{[\\s\\S]*align-self\\s*?:\\s*?end\\s*?;[\\s\\S]*}/gi), '<code>item3</code> class should have a <code>align-self</code> property that has the value of <code>end</code>.');"
"testString":
"assert(code.match(/.item3\\s*?{[\\s\\S]*align-self\\s*?:\\s*?end\\s*?;[\\s\\S]*}/gi), '<code>item3</code> class should have a <code>align-self</code> property that has the value of <code>end</code>.');"
} }
], ],
"solutions": [], "solutions": ["var code = \".item3 {align-self: end;}\""],
"hints": [], "hints": [],
"releasedOn": "", "releasedOn": "",
"challengeType": 0, "challengeType": 0,
@ -726,13 +710,11 @@
], ],
"tests": [ "tests": [
{ {
"text": "text": "<code>container</code> class should have a <code>justify-items</code> property that has the value of <code>center</code>.",
"<code>container</code> class should have a <code>justify-items</code> property that has the value of <code>center</code>.", "testString": "assert(code.match(/.container\\s*?{[\\s\\S]*justify-items\\s*?:\\s*?center\\s*?;[\\s\\S]*}/gi), '<code>container</code> class should have a <code>justify-items</code> property that has the value of <code>center</code>.');"
"testString":
"assert(code.match(/.container\\s*?{[\\s\\S]*justify-items\\s*?:\\s*?center\\s*?;[\\s\\S]*}/gi), '<code>container</code> class should have a <code>justify-items</code> property that has the value of <code>center</code>.');"
} }
], ],
"solutions": [], "solutions": ["var code = \".container {justify-items: center;}\""],
"hints": [], "hints": [],
"releasedOn": "", "releasedOn": "",
"challengeType": 0, "challengeType": 0,
@ -789,13 +771,11 @@
], ],
"tests": [ "tests": [
{ {
"text": "text": "<code>container</code> class should have a <code>align-items</code> property that has the value of <code>end</code>.",
"<code>container</code> class should have a <code>align-items</code> property that has the value of <code>end</code>.", "testString": "assert(code.match(/.container\\s*?{[\\s\\S]*align-items\\s*?:\\s*?end\\s*?;[\\s\\S]*}/gi), '<code>container</code> class should have a <code>align-items</code> property that has the value of <code>end</code>.');"
"testString":
"assert(code.match(/.container\\s*?{[\\s\\S]*align-items\\s*?:\\s*?end\\s*?;[\\s\\S]*}/gi), '<code>container</code> class should have a <code>align-items</code> property that has the value of <code>end</code>.');"
} }
], ],
"solutions": [], "solutions": ["var code = \".container {align-items: end;}\""],
"hints": [], "hints": [],
"releasedOn": "", "releasedOn": "",
"challengeType": 0, "challengeType": 0,
@ -856,13 +836,13 @@
], ],
"tests": [ "tests": [
{ {
"text": "text": "<code>container</code> class should have a <code>grid-template-areas</code> property similar to the preview but has <code>.</code> instead of the <code>advert</code> area.",
"<code>container</code> class should have a <code>grid-template-areas</code> property similar to the preview but has <code>.</code> instead of the <code>advert</code> area.", "testString": "assert(code.match(/.container\\s*?{[\\s\\S]*grid-template-areas\\s*?:\\s*?\"\\s*?header\\s*?header\\s*?header\\s*?\"\\s*?\"\\s*?.\\s*?content\\s*?content\\s*?\"\\s*?\"\\s*?footer\\s*?footer\\s*?footer\\s*?\"\\s*?;[\\s\\S]*}/gi), '<code>container</code> class should have a <code>grid-template-areas</code> propertiy similar to the preview but has <code>.</code> instead of the <code>advert</code> area.');"
"testString":
"assert(code.match(/.container\\s*?{[\\s\\S]*grid-template-areas\\s*?:\\s*?\"\\s*?header\\s*?header\\s*?header\\s*?\"\\s*?\"\\s*?.\\s*?content\\s*?content\\s*?\"\\s*?\"\\s*?footer\\s*?footer\\s*?footer\\s*?\"\\s*?;[\\s\\S]*}/gi), '<code>container</code> class should have a <code>grid-template-areas</code> propertiy similar to the preview but has <code>.</code> instead of the <code>advert</code> area.');"
} }
], ],
"solutions": [], "solutions": [
"var code = \".container {grid-template-areas: \\\"header header header\\\" \\\". content content\\\" \\\"footer footer footer\\\";}\""
],
"hints": [], "hints": [],
"releasedOn": "", "releasedOn": "",
"challengeType": 0, "challengeType": 0,
@ -924,13 +904,11 @@
], ],
"tests": [ "tests": [
{ {
"text": "text": "<code>item5</code> class should have a <code>grid-area</code> property that has the value of <code>footer</code>.",
"<code>item5</code> class should have a <code>grid-area</code> property that has the value of <code>footer</code>.", "testString": "assert(code.match(/.item5\\s*?{[\\s\\S]*grid-area\\s*?:\\s*?footer\\s*?;[\\s\\S]*}/gi), '<code>item5</code> class should have a <code>grid-area</code> property that has the value of <code>footer</code>.');"
"testString":
"assert(code.match(/.item5\\s*?{[\\s\\S]*grid-area\\s*?:\\s*?footer\\s*?;[\\s\\S]*}/gi), '<code>item5</code> class should have a <code>grid-area</code> property that has the value of <code>footer</code>.');"
} }
], ],
"solutions": [], "solutions": ["var code = \".item5 {grid-area: footer;}\""],
"hints": [], "hints": [],
"releasedOn": "", "releasedOn": "",
"challengeType": 0, "challengeType": 0,
@ -998,13 +976,11 @@
], ],
"tests": [ "tests": [
{ {
"text": "text": "<code>item5</code> class should have a <code>grid-area</code> property that has the value of <code>3/1/4/4</code>.",
"<code>item5</code> class should have a <code>grid-area</code> property that has the value of <code>3/1/4/4</code>.", "testString": "assert(code.match(/.item5\\s*?{[\\s\\S]*grid-area\\s*?:\\s*?3\\s*?\\/\\s*?1\\s*?\\/\\s*?4\\s*?\\/\\s*?4\\s*?;[\\s\\S]*}/gi), '<code>item5</code> class should have a <code>grid-area</code> property that has the value of <code>3/1/4/4</code>.');"
"testString":
"assert(code.match(/.item5\\s*?{[\\s\\S]*grid-area\\s*?:\\s*?3\\s*?\\/\\s*?1\\s*?\\/\\s*?4\\s*?\\/\\s*?4\\s*?;[\\s\\S]*}/gi), '<code>item5</code> class should have a <code>grid-area</code> property that has the value of <code>3/1/4/4</code>.');"
} }
], ],
"solutions": [], "solutions": ["var code = \".item5 {grid-area: 3/1/4/4;}\""],
"hints": [], "hints": [],
"releasedOn": "", "releasedOn": "",
"challengeType": 0, "challengeType": 0,
@ -1072,13 +1048,13 @@
], ],
"tests": [ "tests": [
{ {
"text": "text": "<code>container</code> class should have a <code>grid-template-columns</code> property that is set to repeat 3 columns with the width of <code>1fr</code>.",
"<code>container</code> class should have a <code>grid-template-columns</code> property that is set to repeat 3 columns with the width of <code>1fr</code>.", "testString": "assert(code.match(/.container\\s*?{[\\s\\S]*grid-template-columns\\s*?:\\s*?repeat\\s*?\\(\\s*?3\\s*?,\\s*?1fr\\s*?\\)\\s*?;[\\s\\S]*}/gi), '<code>container</code> class should have a <code>grid-template-columns</code> property that is set to repeat 3 columns with the width of <code>1fr</code>.');"
"testString":
"assert(code.match(/.container\\s*?{[\\s\\S]*grid-template-columns\\s*?:\\s*?repeat\\s*?\\(\\s*?3\\s*?,\\s*?1fr\\s*?\\)\\s*?;[\\s\\S]*}/gi), '<code>container</code> class should have a <code>grid-template-columns</code> property that is set to repeat 3 columns with the width of <code>1fr</code>.');"
} }
], ],
"solutions": [], "solutions": [
"var code = \".container {grid-template-columns: repeat(3, 1fr);}\""
],
"hints": [], "hints": [],
"releasedOn": "", "releasedOn": "",
"challengeType": 0, "challengeType": 0,
@ -1137,13 +1113,13 @@
], ],
"tests": [ "tests": [
{ {
"text": "text": "<code>container</code> class should have a <code>grid-template-columns</code> property that is set to repeat 3 columns with the minimum width of <code>90px</code> and maximum width of <code>1fr</code>.",
"<code>container</code> class should have a <code>grid-template-columns</code> property that is set to repeat 3 columns with the minimum width of <code>90px</code> and maximum width of <code>1fr</code>.", "testString": "assert(code.match(/.container\\s*?{[\\s\\S]*grid-template-columns\\s*?:\\s*?repeat\\s*?\\(\\s*?3\\s*?,\\s*?minmax\\s*?\\(\\s*?90px\\s*?,\\s*?1fr\\s*?\\)\\s*?\\)\\s*?;[\\s\\S]*}/gi), '<code>container</code> class should have a <code>grid-template-columns</code> property that is set to repeat 3 columns with the minimum width of <code>90px</code> and maximum width of <code>1fr</code>.');"
"testString":
"assert(code.match(/.container\\s*?{[\\s\\S]*grid-template-columns\\s*?:\\s*?repeat\\s*?\\(\\s*?3\\s*?,\\s*?minmax\\s*?\\(\\s*?90px\\s*?,\\s*?1fr\\s*?\\)\\s*?\\)\\s*?;[\\s\\S]*}/gi), '<code>container</code> class should have a <code>grid-template-columns</code> property that is set to repeat 3 columns with the minimum width of <code>90px</code> and maximum width of <code>1fr</code>.');"
} }
], ],
"solutions": [], "solutions": [
"var code = \".container {grid-template-columns: repeat(3, minmax(90px, 1fr));}\""
],
"hints": [], "hints": [],
"releasedOn": "", "releasedOn": "",
"challengeType": 0, "challengeType": 0,
@ -1204,13 +1180,13 @@
], ],
"tests": [ "tests": [
{ {
"text": "text": "<code>container</code> class should have a <code>grid-template-columns</code> property with <code>repeat</code> and <code>auto-fill</code> that will fill the grid with columns that have a minimum width of <code>60px</code> and maximum of <code>1fr</code>.",
"<code>container</code> class should have a <code>grid-template-columns</code> property with <code>repeat</code> and <code>auto-fill</code> that will fill the grid with columns that have a minimum width of <code>60px</code> and maximum of <code>1fr</code>.", "testString": "assert(code.match(/.container\\s*?{[\\s\\S]*grid-template-columns\\s*?:\\s*?repeat\\s*?\\(\\s*?auto-fill\\s*?,\\s*?minmax\\s*?\\(\\s*?60px\\s*?,\\s*?1fr\\s*?\\)\\s*?\\)\\s*?;[\\s\\S]*}/gi), '<code>container</code> class should have a <code>grid-template-columns</code> property with <code>repeat</code> and <code>auto-fill</code> that will fill the grid with columns that have a minimum width of <code>60px</code> and maximum of <code>1fr</code>.');"
"testString":
"assert(code.match(/.container\\s*?{[\\s\\S]*grid-template-columns\\s*?:\\s*?repeat\\s*?\\(\\s*?auto-fill\\s*?,\\s*?minmax\\s*?\\(\\s*?60px\\s*?,\\s*?1fr\\s*?\\)\\s*?\\)\\s*?;[\\s\\S]*}/gi), '<code>container</code> class should have a <code>grid-template-columns</code> property with <code>repeat</code> and <code>auto-fill</code> that will fill the grid with columns that have a minimum width of <code>60px</code> and maximum of <code>1fr</code>.');"
} }
], ],
"solutions": [], "solutions": [
"var code = \".container {grid-template-columns: repeat(auto-fill, minmax(60px, 1fr));}\""
],
"hints": [], "hints": [],
"releasedOn": "", "releasedOn": "",
"challengeType": 0, "challengeType": 0,
@ -1285,13 +1261,13 @@
], ],
"tests": [ "tests": [
{ {
"text": "text": "<code>container2</code> class should have a <code>grid-template-columns</code> property with <code>repeat</code> and <code>auto-fit</code> that will fill the grid with columns that have a minimum width of <code>60px</code> and maximum of <code>1fr</code>.",
"<code>container2</code> class should have a <code>grid-template-columns</code> property with <code>repeat</code> and <code>auto-fit</code> that will fill the grid with columns that have a minimum width of <code>60px</code> and maximum of <code>1fr</code>.", "testString": "assert(code.match(/.container\\s*?{[\\s\\S]*grid-template-columns\\s*?:\\s*?repeat\\s*?\\(\\s*?auto-fit\\s*?,\\s*?minmax\\s*?\\(\\s*?60px\\s*?,\\s*?1fr\\s*?\\)\\s*?\\)\\s*?;[\\s\\S]*}/gi), '<code>container2</code> class should have a <code>grid-template-columns</code> property with <code>repeat</code> and <code>auto-fit</code> that will fill the grid with columns that have a minimum width of <code>60px</code> and maximum of <code>1fr</code>.');"
"testString":
"assert(code.match(/.container\\s*?{[\\s\\S]*grid-template-columns\\s*?:\\s*?repeat\\s*?\\(\\s*?auto-fit\\s*?,\\s*?minmax\\s*?\\(\\s*?60px\\s*?,\\s*?1fr\\s*?\\)\\s*?\\)\\s*?;[\\s\\S]*}/gi), '<code>container2</code> class should have a <code>grid-template-columns</code> property with <code>repeat</code> and <code>auto-fit</code> that will fill the grid with columns that have a minimum width of <code>60px</code> and maximum of <code>1fr</code>.');"
} }
], ],
"solutions": [], "solutions": [
"var code = \".container {grid-template-columns: repeat( auto-fill, minmax(60px, 1fr));} .container2 {grid-template-columns: repeat(auto-fit, minmax(60px, 1fr));}\""
],
"hints": [], "hints": [],
"releasedOn": "", "releasedOn": "",
"challengeType": 0, "challengeType": 0,
@ -1367,13 +1343,13 @@
], ],
"tests": [ "tests": [
{ {
"text": "text": "When the viewport is <code>400px</code> or more, <code>container</code> class should have a <code>grid-template-areas</code> property in which the footer and header areas occupy the top and bottom rows respectively and advert and content occupy the left and right columns of the middle row.",
"When the viewport is <code>400px</code> or more, <code>container</code> class should have a <code>grid-template-areas</code> property in which the footer and header areas occupy the top and bottom rows respectively and advert and content occupy the left and right columns of the middle row.", "testString": "assert(code.match(/@media\\s*?\\(\\s*?min-width\\s*?:\\s*?400px\\s*?\\)[\\s\\S]*.container\\s*?{[\\s\\S]*grid-template-areas\\s*?:\\s*?\"\\s*?header\\s*?header\\s*?\"\\s*?\"\\s*?advert\\s*?content\\s*?\"\\s*?\"\\s*?footer\\s*?footer\\s*?\"\\s*?;[\\s\\S]*}/gi), 'When the viewport is <code>400px</code> or more, <code>container</code> class should have a <code>grid-template-areas</code> property in which the footer and header areas occupy the top and bottom rows respectively and advert and content occupy the left and right columns of the middle row.');"
"testString":
"assert(code.match(/@media\\s*?\\(\\s*?min-width\\s*?:\\s*?400px\\s*?\\)[\\s\\S]*.container\\s*?{[\\s\\S]*grid-template-areas\\s*?:\\s*?\"\\s*?header\\s*?header\\s*?\"\\s*?\"\\s*?advert\\s*?content\\s*?\"\\s*?\"\\s*?footer\\s*?footer\\s*?\"\\s*?;[\\s\\S]*}/gi), 'When the viewport is <code>400px</code> or more, <code>container</code> class should have a <code>grid-template-areas</code> property in which the footer and header areas occupy the top and bottom rows respectively and advert and content occupy the left and right columns of the middle row.');"
} }
], ],
"solutions": [], "solutions": [
"var code = \"@media (min-width: 400px){.container{ grid-template-areas: \\\"header header\\\" \\\"advert content\\\" \\\"footer footer\\\";}}\""
],
"hints": [], "hints": [],
"releasedOn": "", "releasedOn": "",
"challengeType": 0, "challengeType": 0,
@ -1469,19 +1445,17 @@
], ],
"tests": [ "tests": [
{ {
"text": "text": "<code>item3</code> class should have a <code>grid-template-columns</code> property with <code>auto</code> and <code>1fr</code> as values.",
"<code>item3</code> class should have a <code>grid-template-columns</code> property with <code>auto</code> and <code>1fr</code> as values.", "testString": "assert(code.match(/.item3\\s*?{[\\s\\S]*grid-template-columns\\s*?:\\s*?auto\\s*?1fr\\s*?;[\\s\\S]*}/gi), '<code>item3</code> class should have a <code>grid-template-columns</code> property with <code>auto</code> and <code>1fr</code> as values.');"
"testString":
"assert(code.match(/.item3\\s*?{[\\s\\S]*grid-template-columns\\s*?:\\s*?auto\\s*?1fr\\s*?;[\\s\\S]*}/gi), '<code>item3</code> class should have a <code>grid-template-columns</code> property with <code>auto</code> and <code>1fr</code> as values.');"
}, },
{ {
"text": "text": "<code>item3</code> class should have a <code>display</code> property with the value of <code>grid</code>.",
"<code>item3</code> class should have a <code>display</code> property with the value of <code>grid</code>.", "testString": "assert(code.match(/.item3\\s*?{[\\s\\S]*display\\s*?:\\s*?grid\\s*?;[\\s\\S]*}/gi), '<code>item3</code> class should have a <code>display</code> property with the value of <code>grid</code>.');"
"testString":
"assert(code.match(/.item3\\s*?{[\\s\\S]*display\\s*?:\\s*?grid\\s*?;[\\s\\S]*}/gi), '<code>item3</code> class should have a <code>display</code> property with the value of <code>grid</code>.');"
} }
], ],
"solutions": [], "solutions": [
"var code = \".item3 {grid-template-columns: auto 1fr; display: grid;}\""
],
"hints": [], "hints": [],
"releasedOn": "", "releasedOn": "",
"challengeType": 0, "challengeType": 0,

56
challenges/01-responsive-web-design/responsive-web-design.json
View File

@ -20,16 +20,12 @@
], ],
"tests": [ "tests": [
{ {
"text": "text": "Your <code>p</code> element should have the <code>font-size</code> of 10px when the device <code>height</code> is less than or equal to 800px.",
"Your <code>p</code> element should have the <code>font-size</code> of 10px when the device <code>height</code> is less than or equal to 800px.", "testString": "assert($('p').css('font-size') == '10px', 'Your <code>p</code> element should have the <code>font-size</code> of 10px when the device <code>height</code> is less than or equal to 800px.');"
"testString":
"assert($('p').css('font-size') == '10px', 'Your <code>p</code> element should have the <code>font-size</code> of 10px when the device <code>height</code> is less than or equal to 800px.');"
}, },
{ {
"text": "text": "Declare a <code>@media</code> query for devices with a <code>height</code> less than or equal to 800px.",
"Declare a <code>@media</code> query for devices with a <code>height</code> less than or equal to 800px.", "testString": "assert(code.match(/@media\\s?\\(max-height:\\s*?800px\\)/g), 'Declare a <code>@media</code> query for devices with a <code>height</code> less than or equal to 800px.');"
"testString":
"assert(code.match(/@media\\s?\\(max-height:\\s*?800px\\)/g), 'Declare a <code>@media</code> query for devices with a <code>height</code> less than or equal to 800px.');"
} }
], ],
"releasedOn": "Feb 17, 2017", "releasedOn": "Feb 17, 2017",
@ -86,22 +82,16 @@
], ],
"tests": [ "tests": [
{ {
"text": "text": "Your <code>img</code> tag should have a <code>max-width</code> set to 100%.",
"Your <code>img</code> tag should have a <code>max-width</code> set to 100%.", "testString": "assert(code.match(/max-width:\\s*?100%;/g), 'Your <code>img</code> tag should have a <code>max-width</code> set to 100%.');"
"testString":
"assert(code.match(/max-width:\\s*?100%;/g), 'Your <code>img</code> tag should have a <code>max-width</code> set to 100%.');"
}, },
{ {
"text": "text": "Your <code>img</code> tag should have a <code>display</code> set to block.",
"Your <code>img</code> tag should have a <code>display</code> set to block.", "testString": "assert($('img').css('display') == 'block', 'Your <code>img</code> tag should have a <code>display</code> set to block.');"
"testString":
"assert($('img').css('display') == 'block', 'Your <code>img</code> tag should have a <code>display</code> set to block.');"
}, },
{ {
"text": "text": "Your <code>img</code> tag should have a <code>height</code> set to auto.",
"Your <code>img</code> tag should have a <code>height</code> set to auto.", "testString": "assert(code.match(/height:\\s*?auto;/g), 'Your <code>img</code> tag should have a <code>height</code> set to auto.');"
"testString":
"assert(code.match(/height:\\s*?auto;/g), 'Your <code>img</code> tag should have a <code>height</code> set to auto.');"
} }
], ],
"releasedOn": "Feb 17, 2017", "releasedOn": "Feb 17, 2017",
@ -151,16 +141,12 @@
], ],
"tests": [ "tests": [
{ {
"text": "text": "Your <code>img</code> tag should have a <code>width</code> of 100 pixels.",
"Your <code>img</code> tag should have a <code>width</code> of 100 pixels.", "testString": "assert($('img').css('width') == '100px', 'Your <code>img</code> tag should have a <code>width</code> of 100 pixels.');"
"testString":
"assert($('img').css('width') == '100px', 'Your <code>img</code> tag should have a <code>width</code> of 100 pixels.');"
}, },
{ {
"text": "text": "Your <code>img</code> tag should have a <code>height</code> of 100 pixels.",
"Your <code>img</code> tag should have a <code>height</code> of 100 pixels.", "testString": "assert($('img').css('height') == '100px', 'Your <code>img</code> tag should have a <code>height</code> of 100 pixels.');"
"testString":
"assert($('img').css('height') == '100px', 'Your <code>img</code> tag should have a <code>height</code> of 100 pixels.');"
} }
], ],
"releasedOn": "Feb 17, 2017", "releasedOn": "Feb 17, 2017",
@ -208,20 +194,16 @@
], ],
"tests": [ "tests": [
{ {
"text": "text": "Your <code>h2</code> tag should have a <code>width</code> of 80vw.",
"Your <code>h2</code> tag should have a <code>width</code> of 80vw.", "testString": "assert(code.match(/h2\\s*?{\\s*?width:\\s*?80vw;\\s*?}/g), 'Your <code>h2</code> tag should have a <code>width</code> of 80vw.');"
"testString":
"assert(code.match(/h2\\s*?{\\s*?width:\\s*?80vw;\\s*?}/g), 'Your <code>h2</code> tag should have a <code>width</code> of 80vw.');"
}, },
{ {
"text": "text": "Your <code>p</code> tag should have a <code>width</code> of 75vmin.",
"Your <code>p</code> tag should have a <code>width</code> of 75vmin.", "testString": "assert(code.match(/p\\s*?{\\s*?width:\\s*?75vmin;\\s*?}/g), 'Your <code>p</code> tag should have a <code>width</code> of 75vmin.');"
"testString":
"assert(code.match(/p\\s*?{\\s*?width:\\s*?75vmin;\\s*?}/g), 'Your <code>p</code> tag should have a <code>width</code> of 75vmin.');"
} }
], ],
"releasedOn": "Feb 17, 2017", "releasedOn": "Feb 17, 2017",
"solutions": [], "solutions": ["var code = \"h2 {width: 80vw;} p {width: 75vmin;}\""],
"hints": [], "hints": [],
"challengeType": 0, "challengeType": 0,
"translations": { "translations": {