diff --git a/challenges/01-responsive-web-design/css-grid.json b/challenges/01-responsive-web-design/css-grid.json
index 5c34328a121..98d60754a89 100644
--- a/challenges/01-responsive-web-design/css-grid.json
+++ b/challenges/01-responsive-web-design/css-grid.json
@@ -15,10 +15,8 @@
],
"tests": [
{
- "text":
- "container class should have a display property with a value of grid.",
- "testString":
- "assert(code.match(/.container\\s*?{[\\s\\S]*display\\s*?:\\s*?grid\\s*?;[\\s\\S]*}/gi), 'container class should have a display property with a value of grid.');"
+ "text": "container class should have a display property with a value of grid.",
+ "testString": "assert(code.match(/.container\\s*?{[\\s\\S]*display\\s*?:\\s*?grid\\s*?;[\\s\\S]*}/gi), 'container class should have a display property with a value of grid.');"
}
],
"solutions": ["var code = \".container {display: grid;}\""],
@@ -76,10 +74,8 @@
],
"tests": [
{
- "text":
- "container class should have a grid-template-columns property with three units of 100px.",
- "testString":
- "assert(code.match(/.container\\s*?{[\\s\\S]*grid-template-columns\\s*?:\\s*?100px\\s*?100px\\s*?100px\\s*?;[\\s\\S]*}/gi), 'container class should have a grid-template-columns property with three units of 100px.');"
+ "text": "container class should have a grid-template-columns property with three units of 100px.",
+ "testString": "assert(code.match(/.container\\s*?{[\\s\\S]*grid-template-columns\\s*?:\\s*?100px\\s*?100px\\s*?100px\\s*?;[\\s\\S]*}/gi), 'container class should have a grid-template-columns property with three units of 100px.');"
}
],
"solutions": [
@@ -137,10 +133,8 @@
],
"tests": [
{
- "text":
- "container class should have a grid-template-rows property with two units of 50px.",
- "testString":
- "assert(code.match(/.container\\s*?{[\\s\\S]*grid-template-rows\\s*?:\\s*?50px\\s*?50px\\s*?;[\\s\\S]*}/gi), 'container class should have a grid-template-rows property with two units of 50px.');"
+ "text": "container class should have a grid-template-rows property with two units of 50px.",
+ "testString": "assert(code.match(/.container\\s*?{[\\s\\S]*grid-template-rows\\s*?:\\s*?50px\\s*?50px\\s*?;[\\s\\S]*}/gi), 'container class should have a grid-template-rows property with two units of 50px.');"
}
],
"solutions": [
@@ -205,10 +199,8 @@
],
"tests": [
{
- "text":
- "container class should have a grid-template-columns property that has three columns with the following widths: 1fr, 100px, and 2fr.",
- "testString":
- "assert(code.match(/.container\\s*?{[\\s\\S]*grid-template-columns\\s*?:\\s*?1fr\\s*?100px\\s*?2fr\\s*?;[\\s\\S]*}/gi), 'container class should have a grid-template-columns property that has three columns with the following widths: 1fr, 100px, and 2fr.');"
+ "text": "container class should have a grid-template-columns property that has three columns with the following widths: 1fr, 100px, and 2fr.",
+ "testString": "assert(code.match(/.container\\s*?{[\\s\\S]*grid-template-columns\\s*?:\\s*?1fr\\s*?100px\\s*?2fr\\s*?;[\\s\\S]*}/gi), 'container class should have a grid-template-columns property that has three columns with the following widths: 1fr, 100px, and 2fr.');"
}
],
"solutions": [
@@ -270,10 +262,8 @@
],
"tests": [
{
- "text":
- "container class should have a grid-column-gap property that has the value of 20px.",
- "testString":
- "assert(code.match(/.container\\s*?{[\\s\\S]*grid-column-gap\\s*?:\\s*?20px\\s*?;[\\s\\S]*}/gi), 'container class should have a grid-column-gap property that has the value of 20px.');"
+ "text": "container class should have a grid-column-gap property that has the value of 20px.",
+ "testString": "assert(code.match(/.container\\s*?{[\\s\\S]*grid-column-gap\\s*?:\\s*?20px\\s*?;[\\s\\S]*}/gi), 'container class should have a grid-column-gap property that has the value of 20px.');"
}
],
"solutions": ["var code = \".container {grid-column-gap: 20px;}\""],
@@ -332,10 +322,8 @@
],
"tests": [
{
- "text":
- "container class should have a grid-row-gap property that has the value of 5px.",
- "testString":
- "assert(code.match(/.container\\s*?{[\\s\\S]*grid-row-gap\\s*?:\\s*?5px\\s*?;[\\s\\S]*}/gi), 'container class should have a grid-row-gap property that has the value of 5px.');"
+ "text": "container class should have a grid-row-gap property that has the value of 5px.",
+ "testString": "assert(code.match(/.container\\s*?{[\\s\\S]*grid-row-gap\\s*?:\\s*?5px\\s*?;[\\s\\S]*}/gi), 'container class should have a grid-row-gap property that has the value of 5px.');"
}
],
"solutions": ["var code = \".container {grid-row-gap: 5px;}\""],
@@ -394,10 +382,8 @@
],
"tests": [
{
- "text":
- "container class should have a grid-gap property that introduces 10px gap between the rows and 20px gap between the columns.",
- "testString":
- "assert(code.match(/.container\\s*?{[\\s\\S]*grid-gap\\s*?:\\s*?10px\\s*?20px\\s*?;[\\s\\S]*}/gi), 'container class should have a grid-gap property that introduces 10px gap between the rows and 20px gap between the columns.');"
+ "text": "container class should have a grid-gap property that introduces 10px gap between the rows and 20px gap between the columns.",
+ "testString": "assert(code.match(/.container\\s*?{[\\s\\S]*grid-gap\\s*?:\\s*?10px\\s+?20px\\s*?;[\\s\\S]*}/gi), 'container class should have a grid-gap property that introduces 10px gap between the rows and 20px gap between the columns.');"
}
],
"solutions": ["var code = \".container {grid-gap: 10px 20px;}\""],
@@ -462,10 +448,8 @@
],
"tests": [
{
- "text":
- "item5 class should have a grid-column property that has the value of 2 / 4.",
- "testString":
- "assert(code.match(/.item5\\s*?{[\\s\\S]*grid-column\\s*?:\\s*?2\\s*?\\/\\s*?4\\s*?;[\\s\\S]*}/gi), 'item5 class should have a grid-column property that has the value of 2 / 4.');"
+ "text": "item5 class should have a grid-column property that has the value of 2 / 4.",
+ "testString": "assert(code.match(/.item5\\s*?{[\\s\\S]*grid-column\\s*?:\\s*?2\\s*?\\/\\s*?4\\s*?;[\\s\\S]*}/gi), 'item5 class should have a grid-column property that has the value of 2 / 4.');"
}
],
"solutions": ["var code = \".item5 {grid-column: 2 / 4;}\""],
@@ -528,10 +512,8 @@
],
"tests": [
{
- "text":
- "item5 class should have a grid-row property that has the value of 2 / 4.",
- "testString":
- "assert(code.match(/.item5\\s*?{[\\s\\S]*grid-row\\s*?:\\s*?2\\s*?\\/\\s*?4\\s*?;[\\s\\S]*}/gi), 'item5 class should have a grid-row property that has the value of 2 / 4.');"
+ "text": "item5 class should have a grid-row property that has the value of 2 / 4.",
+ "testString": "assert(code.match(/.item5\\s*?{[\\s\\S]*grid-row\\s*?:\\s*?2\\s*?\\/\\s*?4\\s*?;[\\s\\S]*}/gi), 'item5 class should have a grid-row property that has the value of 2 / 4.');"
}
],
"solutions": ["var code = \".item5 {grid-row: 2 / 4;}\""],
@@ -598,10 +580,8 @@
],
"tests": [
{
- "text":
- "item2 class should have a justify-self property that has the value of center.",
- "testString":
- "assert(code.match(/.item2\\s*?{[\\s\\S]*justify-self\\s*?:\\s*?center\\s*?;[\\s\\S]*}/gi), 'item2 class should have a justify-self property that has the value of center.');"
+ "text": "item2 class should have a justify-self property that has the value of center.",
+ "testString": "assert(code.match(/.item2\\s*?{[\\s\\S]*justify-self\\s*?:\\s*?center\\s*?;[\\s\\S]*}/gi), 'item2 class should have a justify-self property that has the value of center.');"
}
],
"solutions": ["var code = \".item2 {justify-self: center;}\""],
@@ -665,10 +645,8 @@
],
"tests": [
{
- "text":
- "item3 class should have a align-self property that has the value of end.",
- "testString":
- "assert(code.match(/.item3\\s*?{[\\s\\S]*align-self\\s*?:\\s*?end\\s*?;[\\s\\S]*}/gi), 'item3 class should have a align-self property that has the value of end.');"
+ "text": "item3 class should have a align-self property that has the value of end.",
+ "testString": "assert(code.match(/.item3\\s*?{[\\s\\S]*align-self\\s*?:\\s*?end\\s*?;[\\s\\S]*}/gi), 'item3 class should have a align-self property that has the value of end.');"
}
],
"solutions": ["var code = \".item3 {align-self: end;}\""],
@@ -732,10 +710,8 @@
],
"tests": [
{
- "text":
- "container class should have a justify-items property that has the value of center.",
- "testString":
- "assert(code.match(/.container\\s*?{[\\s\\S]*justify-items\\s*?:\\s*?center\\s*?;[\\s\\S]*}/gi), 'container class should have a justify-items property that has the value of center.');"
+ "text": "container class should have a justify-items property that has the value of center.",
+ "testString": "assert(code.match(/.container\\s*?{[\\s\\S]*justify-items\\s*?:\\s*?center\\s*?;[\\s\\S]*}/gi), 'container class should have a justify-items property that has the value of center.');"
}
],
"solutions": ["var code = \".container {justify-items: center;}\""],
@@ -795,10 +771,8 @@
],
"tests": [
{
- "text":
- "container class should have a align-items property that has the value of end.",
- "testString":
- "assert(code.match(/.container\\s*?{[\\s\\S]*align-items\\s*?:\\s*?end\\s*?;[\\s\\S]*}/gi), 'container class should have a align-items property that has the value of end.');"
+ "text": "container class should have a align-items property that has the value of end.",
+ "testString": "assert(code.match(/.container\\s*?{[\\s\\S]*align-items\\s*?:\\s*?end\\s*?;[\\s\\S]*}/gi), 'container class should have a align-items property that has the value of end.');"
}
],
"solutions": ["var code = \".container {align-items: end;}\""],
@@ -862,10 +836,8 @@
],
"tests": [
{
- "text":
- "container class should have a grid-template-areas property similar to the preview but has . instead of the advert 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), 'container class should have a grid-template-areas propertiy similar to the preview but has . instead of the advert area.');"
+ "text": "container class should have a grid-template-areas property similar to the preview but has . instead of the advert 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), 'container class should have a grid-template-areas propertiy similar to the preview but has . instead of the advert area.');"
}
],
"solutions": [
@@ -932,10 +904,8 @@
],
"tests": [
{
- "text":
- "item5 class should have a grid-area property that has the value of footer.",
- "testString":
- "assert(code.match(/.item5\\s*?{[\\s\\S]*grid-area\\s*?:\\s*?footer\\s*?;[\\s\\S]*}/gi), 'item5 class should have a grid-area property that has the value of footer.');"
+ "text": "item5 class should have a grid-area property that has the value of footer.",
+ "testString": "assert(code.match(/.item5\\s*?{[\\s\\S]*grid-area\\s*?:\\s*?footer\\s*?;[\\s\\S]*}/gi), 'item5 class should have a grid-area property that has the value of footer.');"
}
],
"solutions": ["var code = \".item5 {grid-area: footer;}\""],
@@ -1006,10 +976,8 @@
],
"tests": [
{
- "text":
- "item5 class should have a grid-area property that has the value of 3/1/4/4.",
- "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), 'item5 class should have a grid-area property that has the value of 3/1/4/4.');"
+ "text": "item5 class should have a grid-area property that has the value of 3/1/4/4.",
+ "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), 'item5 class should have a grid-area property that has the value of 3/1/4/4.');"
}
],
"solutions": ["var code = \".item5 {grid-area: 3/1/4/4;}\""],
@@ -1080,10 +1048,8 @@
],
"tests": [
{
- "text":
- "container class should have a grid-template-columns property that is set to repeat 3 columns with the width of 1fr.",
- "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), 'container class should have a grid-template-columns property that is set to repeat 3 columns with the width of 1fr.');"
+ "text": "container class should have a grid-template-columns property that is set to repeat 3 columns with the width of 1fr.",
+ "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), 'container class should have a grid-template-columns property that is set to repeat 3 columns with the width of 1fr.');"
}
],
"solutions": [
@@ -1147,10 +1113,8 @@
],
"tests": [
{
- "text":
- "container class should have a grid-template-columns property that is set to repeat 3 columns with the minimum width of 90px and maximum width of 1fr.",
- "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), 'container class should have a grid-template-columns property that is set to repeat 3 columns with the minimum width of 90px and maximum width of 1fr.');"
+ "text": "container class should have a grid-template-columns property that is set to repeat 3 columns with the minimum width of 90px and maximum width of 1fr.",
+ "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), 'container class should have a grid-template-columns property that is set to repeat 3 columns with the minimum width of 90px and maximum width of 1fr.');"
}
],
"solutions": [
@@ -1216,10 +1180,8 @@
],
"tests": [
{
- "text":
- "container class should have a grid-template-columns property with repeat and auto-fill that will fill the grid with columns that have a minimum width of 60px and maximum of 1fr.",
- "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), 'container class should have a grid-template-columns property with repeat and auto-fill that will fill the grid with columns that have a minimum width of 60px and maximum of 1fr.');"
+ "text": "container class should have a grid-template-columns property with repeat and auto-fill that will fill the grid with columns that have a minimum width of 60px and maximum of 1fr.",
+ "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), 'container class should have a grid-template-columns property with repeat and auto-fill that will fill the grid with columns that have a minimum width of 60px and maximum of 1fr.');"
}
],
"solutions": [
@@ -1299,10 +1261,8 @@
],
"tests": [
{
- "text":
- "container2 class should have a grid-template-columns property with repeat and auto-fit that will fill the grid with columns that have a minimum width of 60px and maximum of 1fr.",
- "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), 'container2 class should have a grid-template-columns property with repeat and auto-fit that will fill the grid with columns that have a minimum width of 60px and maximum of 1fr.');"
+ "text": "container2 class should have a grid-template-columns property with repeat and auto-fit that will fill the grid with columns that have a minimum width of 60px and maximum of 1fr.",
+ "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), 'container2 class should have a grid-template-columns property with repeat and auto-fit that will fill the grid with columns that have a minimum width of 60px and maximum of 1fr.');"
}
],
"solutions": [
@@ -1383,10 +1343,8 @@
],
"tests": [
{
- "text":
- "When the viewport is 400px or more, container class should have a grid-template-areas 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 400px or more, container class should have a grid-template-areas 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 400px or more, container class should have a grid-template-areas 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 400px or more, container class should have a grid-template-areas 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": [
@@ -1487,16 +1445,12 @@
],
"tests": [
{
- "text":
- "item3 class should have a grid-template-columns property with auto and 1fr as values.",
- "testString":
- "assert(code.match(/.item3\\s*?{[\\s\\S]*grid-template-columns\\s*?:\\s*?auto\\s*?1fr\\s*?;[\\s\\S]*}/gi), 'item3 class should have a grid-template-columns property with auto and 1fr as values.');"
+ "text": "item3 class should have a grid-template-columns property with auto and 1fr as values.",
+ "testString": "assert(code.match(/.item3\\s*?{[\\s\\S]*grid-template-columns\\s*?:\\s*?auto\\s*?1fr\\s*?;[\\s\\S]*}/gi), 'item3 class should have a grid-template-columns property with auto and 1fr as values.');"
},
{
- "text":
- "item3 class should have a display property with the value of grid.",
- "testString":
- "assert(code.match(/.item3\\s*?{[\\s\\S]*display\\s*?:\\s*?grid\\s*?;[\\s\\S]*}/gi), 'item3 class should have a display property with the value of grid.');"
+ "text": "item3 class should have a display property with the value of grid.",
+ "testString": "assert(code.match(/.item3\\s*?{[\\s\\S]*display\\s*?:\\s*?grid\\s*?;[\\s\\S]*}/gi), 'item3 class should have a display property with the value of grid.');"
}
],
"solutions": [