From b369fa00cb1bf7ce4356d5f3917eaa6621b5257c Mon Sep 17 00:00:00 2001 From: Josh Alling Date: Fri, 10 Aug 2018 14:42:23 -0600 Subject: [PATCH] fix(challenges): fix grid-gap shorthand regex (#237) ISSUES CLOSED: #229 --- .../01-responsive-web-design/css-grid.json | 138 ++++++------------ 1 file changed, 46 insertions(+), 92 deletions(-) diff --git a/challenges/01-responsive-web-design/css-grid.json b/challenges/01-responsive-web-design/css-grid.json index 5c34328a12..98d60754a8 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": [