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%.');"
}
],
"solutions": [],
"solutions": [
"var code = \"body {color: hsl(0, 55%, 15%); background-color: hsl(120, 25%, 55%);}\""
],
"hints": [],
"releasedOn": "Feb 17, 2017",
"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.');"
}
],
"solutions": [],
"solutions": [
"var code = \".fullCard {\\nwidth: 245px; border: 1px solid #ccc; border-radius: 5px; margin: 10px 5px; padding: 4px;}\""
],
"hints": [],
"releasedOn": "Feb 17, 2017",
"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.');"
}
],
"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": [],
"releasedOn": "Feb 17, 2017",
"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.');"
}
],
"solutions": [],
"solutions": [
"var code = \"div {background-color: blue; height: 100px; width: 100px; margin: auto;}\""
],
"hints": [],
"releasedOn": "Feb 17, 2017",
"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.');"
}
],
"solutions": [],
"solutions": [
"var code = \"nav {background-color: hsl(180, 80%, 25%);}\""
],
"hints": [],
"releasedOn": "Feb 17, 2017",
"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.');"
}
],
"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": [],
"releasedOn": "Feb 17, 2017",
"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>.');"
}
],
"solutions": [],
"solutions": [
"var code = \"background: repeating-linear-gradient(45deg, yellow 0px, yellow 40px, black 40px, black 80px);\""
],
"hints": [],
"releasedOn": "Feb 17, 2017",
"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.');"
}
],
"solutions": [],
"solutions": [
"var code = \"body {background: url('https://i.imgur.com/MJAkxbh.png')}\""
],
"hints": [
"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.');"
}
],
"solutions": [],
"solutions": [
"var code = \"#ball2 {left: 65%; transform: scale(1.5);}\""
],
"hints": [],
"releasedOn": "Feb 17, 2017",
"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.');"
}
],
"solutions": [],
"solutions": ["var code = \"div:hover {transform: scale(1.1);}\""],
"hints": [
"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.');"
}
],
"solutions": [],
"solutions": [
"var code = \"#bottom {background-color: blue; transform: skewX(24deg);}\""
],
"hints": [
"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.');"
}
],
"solutions": [],
"solutions": [
"var code = \"#top {background-color: red; transform: skewY(-10deg);}\""
],
"hints": [],
"releasedOn": "Feb 17, 2017",
"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.');"
}
],
"solutions": [],
"solutions": [
"var code = \".center {background-color: transparent; border-radius: 50%; box-shadow: 25px 10px 0px 0 blue;}\""
],
"hints": [],
"releasedOn": "Feb 17, 2017",
"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.');"
}
],
"solutions": [],
"solutions": [
"var code = \".heart {transform: rotate(-45deg);} .heart::after {background-color: pink; border-radius: 50%;} .heart::before {content: \\\"\\\"; border-radius: 50%;}\""
],
"hints": [],
"releasedOn": "Feb 17, 2017",
"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>.');"
}
],
"solutions": [],
"solutions": [
"var code = \"button:hover {animation-name: background-color; animation-duration: 500ms; animation-fill-mode: forwards;}\""
],
"hints": [],
"challengeType": 0,
"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.');"
}
],
"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": [],
"releasedOn": "Feb 17, 2017",
"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%.');"
}
],
"solutions": [],
"solutions": [
"var code = \"@keyframes fade {50% { left: 60%; opacity: 0.1;}}\""
],
"hints": [],
"releasedOn": "Feb 17, 2017",
"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%.');"
}
],
"solutions": [],
"solutions": [
"var code = \"@keyframes twinkle-1 {50% {transform: scale(0.5); opacity: 0.5;}}\""
],
"hints": [
"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.');"
}
],
"solutions": [],
"solutions": [
"var code = \"header {flex-direction: row;} footer {flex-direction: row;}\""
],
"hints": [],
"releasedOn": "Feb 17, 2017",
"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.');"
}
],
"solutions": [],
"solutions": [
"var code = \"header .profile-name {display: flex; flex-direction: column; justify-content: center; margin-left: 10px;}\""
],
"hints": [],
"releasedOn": "Feb 17, 2017",
"challengeType": 0,

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

@ -15,13 +15,11 @@
],
"tests": [
{
"text":
"<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>.');"
"text": "<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": [],
"releasedOn": "Feb 15, 2018",
"challengeType": 0,
@ -76,13 +74,13 @@
],
"tests": [
{
"text":
"<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>.');"
"text": "<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": [],
"releasedOn": "Feb 15, 2018",
"challengeType": 0,
@ -135,13 +133,13 @@
],
"tests": [
{
"text":
"<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>.');"
"text": "<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": [],
"releasedOn": "",
"challengeType": 0,
@ -201,13 +199,13 @@
],
"tests": [
{
"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>.",
"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>.');"
"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>.",
"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": [],
"releasedOn": "",
"challengeType": 0,
@ -264,13 +262,11 @@
],
"tests": [
{
"text":
"<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>.');"
"text": "<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": [],
"releasedOn": "",
"challengeType": 0,
@ -326,13 +322,11 @@
],
"tests": [
{
"text":
"<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>.');"
"text": "<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": [],
"releasedOn": "",
"challengeType": 0,
@ -388,13 +382,11 @@
],
"tests": [
{
"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.",
"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.');"
"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.",
"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": [],
"releasedOn": "",
"challengeType": 0,
@ -456,13 +448,11 @@
],
"tests": [
{
"text":
"<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>.');"
"text": "<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": [],
"releasedOn": "",
"challengeType": 0,
@ -522,13 +512,11 @@
],
"tests": [
{
"text":
"<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>.');"
"text": "<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": [],
"releasedOn": "",
"challengeType": 0,
@ -592,13 +580,11 @@
],
"tests": [
{
"text":
"<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>.');"
"text": "<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": [],
"releasedOn": "",
"challengeType": 0,
@ -659,13 +645,11 @@
],
"tests": [
{
"text":
"<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>.');"
"text": "<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": [],
"releasedOn": "",
"challengeType": 0,
@ -726,13 +710,11 @@
],
"tests": [
{
"text":
"<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>.');"
"text": "<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": [],
"releasedOn": "",
"challengeType": 0,
@ -789,13 +771,11 @@
],
"tests": [
{
"text":
"<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>.');"
"text": "<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": [],
"releasedOn": "",
"challengeType": 0,
@ -856,13 +836,13 @@
],
"tests": [
{
"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.",
"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.');"
"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.",
"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": [],
"releasedOn": "",
"challengeType": 0,
@ -924,13 +904,11 @@
],
"tests": [
{
"text":
"<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>.');"
"text": "<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": [],
"releasedOn": "",
"challengeType": 0,
@ -998,13 +976,11 @@
],
"tests": [
{
"text":
"<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>.');"
"text": "<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": [],
"releasedOn": "",
"challengeType": 0,
@ -1072,13 +1048,13 @@
],
"tests": [
{
"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>.",
"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>.');"
"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>.",
"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": [],
"releasedOn": "",
"challengeType": 0,
@ -1137,13 +1113,13 @@
],
"tests": [
{
"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>.",
"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>.');"
"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>.",
"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": [],
"releasedOn": "",
"challengeType": 0,
@ -1204,13 +1180,13 @@
],
"tests": [
{
"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>.",
"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>.');"
"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>.",
"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": [],
"releasedOn": "",
"challengeType": 0,
@ -1285,13 +1261,13 @@
],
"tests": [
{
"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>.",
"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>.');"
"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>.",
"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": [],
"releasedOn": "",
"challengeType": 0,
@ -1367,13 +1343,13 @@
],
"tests": [
{
"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.",
"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.');"
"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.",
"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": [],
"releasedOn": "",
"challengeType": 0,
@ -1469,19 +1445,17 @@
],
"tests": [
{
"text":
"<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": "<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":
"<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>.');"
"text": "<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": [],
"releasedOn": "",
"challengeType": 0,

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

@ -20,16 +20,12 @@
],
"tests": [
{
"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.",
"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": "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":
"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.');"
"text": "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",
@ -86,22 +82,16 @@
],
"tests": [
{
"text":
"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": "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":
"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": "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":
"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.');"
"text": "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",
@ -151,16 +141,12 @@
],
"tests": [
{
"text":
"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": "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":
"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.');"
"text": "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",
@ -208,20 +194,16 @@
],
"tests": [
{
"text":
"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": "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":
"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.');"
"text": "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",
"solutions": [],
"solutions": ["var code = \"h2 {width: 80vw;} p {width: 75vmin;}\""],
"hints": [],
"challengeType": 0,
"translations": {