diff --git a/curriculum/challenges/english/01-responsive-web-design/css-flexbox/add-flex-superpowers-to-the-tweet-embed.english.md b/curriculum/challenges/english/01-responsive-web-design/css-flexbox/add-flex-superpowers-to-the-tweet-embed.english.md index d0f4ab9a42..7d0885132a 100644 --- a/curriculum/challenges/english/01-responsive-web-design/css-flexbox/add-flex-superpowers-to-the-tweet-embed.english.md +++ b/curriculum/challenges/english/01-responsive-web-design/css-flexbox/add-flex-superpowers-to-the-tweet-embed.english.md @@ -22,19 +22,19 @@ Add the CSS property display: flex to all of the following items - ```yml tests: - text: Your header should have a display property set to flex. - testString: assert($('header').css('display') == 'flex', 'Your header should have a display property set to flex.'); + testString: assert($('header').css('display') == 'flex'); - text: Your footer should have a display property set to flex. - testString: assert($('footer').css('display') == 'flex', 'Your footer should have a display property set to flex.'); + testString: assert($('footer').css('display') == 'flex'); - text: Your h3 should have a display property set to flex. - testString: assert($('h3').css('display') == 'flex', 'Your h3 should have a display property set to flex.'); + testString: assert($('h3').css('display') == 'flex'); - text: Your h4 should have a display property set to flex. - testString: assert($('h4').css('display') == 'flex', 'Your h4 should have a display property set to flex.'); + testString: assert($('h4').css('display') == 'flex'); - text: Your .profile-name should have a display property set to flex. - testString: assert($('.profile-name').css('display') == 'flex', 'Your .profile-name should have a display property set to flex.'); + testString: assert($('.profile-name').css('display') == 'flex'); - text: Your .follow-btn should have a display property set to flex. - testString: assert($('.follow-btn').css('display') == 'flex', 'Your .follow-btn should have a display property set to flex.'); + testString: assert($('.follow-btn').css('display') == 'flex'); - text: Your .stats should have a display property set to flex. - testString: assert($('.stats').css('display') == 'flex', 'Your .stats should have a display property set to flex.'); + testString: assert($('.stats').css('display') == 'flex'); ``` diff --git a/curriculum/challenges/english/01-responsive-web-design/css-flexbox/align-elements-using-the-align-items-property.english.md b/curriculum/challenges/english/01-responsive-web-design/css-flexbox/align-elements-using-the-align-items-property.english.md index 9c53fa5597..ab9d638558 100644 --- a/curriculum/challenges/english/01-responsive-web-design/css-flexbox/align-elements-using-the-align-items-property.english.md +++ b/curriculum/challenges/english/01-responsive-web-design/css-flexbox/align-elements-using-the-align-items-property.english.md @@ -26,7 +26,7 @@ An example helps show this property in action. Add the CSS property align- ```yml tests: - text: The #box-container element should have an align-items property set to a value of center. - testString: assert($('#box-container').css('align-items') == 'center', 'The #box-container element should have an align-items property set to a value of center.'); + testString: assert($('#box-container').css('align-items') == 'center'); ``` diff --git a/curriculum/challenges/english/01-responsive-web-design/css-flexbox/align-elements-using-the-justify-content-property.english.md b/curriculum/challenges/english/01-responsive-web-design/css-flexbox/align-elements-using-the-justify-content-property.english.md index a288471944..c9a931da39 100644 --- a/curriculum/challenges/english/01-responsive-web-design/css-flexbox/align-elements-using-the-justify-content-property.english.md +++ b/curriculum/challenges/english/01-responsive-web-design/css-flexbox/align-elements-using-the-justify-content-property.english.md @@ -27,7 +27,7 @@ An example helps show this property in action. Add the CSS property justif ```yml tests: - text: The #box-container element should have a justify-content property set to a value of center. - testString: assert($('#box-container').css('justify-content') == 'center', 'The #box-container element should have a justify-content property set to a value of center.'); + testString: assert($('#box-container').css('justify-content') == 'center'); ``` diff --git a/curriculum/challenges/english/01-responsive-web-design/css-flexbox/apply-the-flex-direction-property-to-create-a-column-in-the-tweet-embed.english.md b/curriculum/challenges/english/01-responsive-web-design/css-flexbox/apply-the-flex-direction-property-to-create-a-column-in-the-tweet-embed.english.md index 9341007bd2..3ac95064b0 100644 --- a/curriculum/challenges/english/01-responsive-web-design/css-flexbox/apply-the-flex-direction-property-to-create-a-column-in-the-tweet-embed.english.md +++ b/curriculum/challenges/english/01-responsive-web-design/css-flexbox/apply-the-flex-direction-property-to-create-a-column-in-the-tweet-embed.english.md @@ -21,7 +21,7 @@ Add the CSS property flex-direction to the header's .profile- ```yml tests: - text: The .profile-name element should have a flex-direction property set to column. - testString: assert($('.profile-name').css('flex-direction') == 'column', 'The .profile-name element should have a flex-direction property set to column.'); + testString: assert($('.profile-name').css('flex-direction') == 'column'); ``` diff --git a/curriculum/challenges/english/01-responsive-web-design/css-flexbox/apply-the-flex-direction-property-to-create-rows-in-the-tweet-embed.english.md b/curriculum/challenges/english/01-responsive-web-design/css-flexbox/apply-the-flex-direction-property-to-create-rows-in-the-tweet-embed.english.md index 6b048d88cd..3b67aad824 100644 --- a/curriculum/challenges/english/01-responsive-web-design/css-flexbox/apply-the-flex-direction-property-to-create-rows-in-the-tweet-embed.english.md +++ b/curriculum/challenges/english/01-responsive-web-design/css-flexbox/apply-the-flex-direction-property-to-create-rows-in-the-tweet-embed.english.md @@ -21,9 +21,9 @@ Add the CSS property flex-direction to both the header ```yml tests: - text: The header should have a flex-direction property set to row. - testString: assert(code.match(/header\s*?{[^}]*?flex-direction:\s*?row;/g), 'The header should have a flex-direction property set to row.'); + testString: assert(code.match(/header\s*?{[^}]*?flex-direction:\s*?row;/g)); - text: The footer should have a flex-direction property set to row. - testString: assert(code.match(/footer\s*?{[^}]*?flex-direction:\s*?row;/g), 'The footer should have a flex-direction property set to row.'); + testString: assert(code.match(/footer\s*?{[^}]*?flex-direction:\s*?row;/g)); ``` diff --git a/curriculum/challenges/english/01-responsive-web-design/css-flexbox/use-display-flex-to-position-two-boxes.english.md b/curriculum/challenges/english/01-responsive-web-design/css-flexbox/use-display-flex-to-position-two-boxes.english.md index cea5a44784..745dfc5835 100644 --- a/curriculum/challenges/english/01-responsive-web-design/css-flexbox/use-display-flex-to-position-two-boxes.english.md +++ b/curriculum/challenges/english/01-responsive-web-design/css-flexbox/use-display-flex-to-position-two-boxes.english.md @@ -22,7 +22,7 @@ Add the CSS property display to #box-container and set ```yml tests: - text: #box-container should have the display property set to a value of flex. - testString: assert($('#box-container').css('display') == 'flex', '#box-container should have the display property set to a value of flex.'); + testString: assert($('#box-container').css('display') == 'flex'); ``` diff --git a/curriculum/challenges/english/01-responsive-web-design/css-flexbox/use-the-align-items-property-in-the-tweet-embed.english.md b/curriculum/challenges/english/01-responsive-web-design/css-flexbox/use-the-align-items-property-in-the-tweet-embed.english.md index 86befbb2bf..406a22e723 100644 --- a/curriculum/challenges/english/01-responsive-web-design/css-flexbox/use-the-align-items-property-in-the-tweet-embed.english.md +++ b/curriculum/challenges/english/01-responsive-web-design/css-flexbox/use-the-align-items-property-in-the-tweet-embed.english.md @@ -21,7 +21,7 @@ Add the CSS property align-items to the header's .follow-btn< ```yml tests: - text: The .follow-btn element should have the align-items property set to a value of center. - testString: assert($('.follow-btn').css('align-items') == 'center', 'The .follow-btn element should have the align-items property set to a value of center.'); + testString: assert($('.follow-btn').css('align-items') == 'center'); ``` diff --git a/curriculum/challenges/english/01-responsive-web-design/css-flexbox/use-the-align-self-property.english.md b/curriculum/challenges/english/01-responsive-web-design/css-flexbox/use-the-align-self-property.english.md index 5df7689f54..9636d223ff 100644 --- a/curriculum/challenges/english/01-responsive-web-design/css-flexbox/use-the-align-self-property.english.md +++ b/curriculum/challenges/english/01-responsive-web-design/css-flexbox/use-the-align-self-property.english.md @@ -22,9 +22,9 @@ Add the CSS property align-self to both #box-1 and #box-1 element should have the align-self property set to a value of center. - testString: assert($('#box-1').css('align-self') == 'center', 'The #box-1 element should have the align-self property set to a value of center.'); + testString: assert($('#box-1').css('align-self') == 'center'); - text: The #box-2 element should have the align-self property set to a value of flex-end. - testString: assert($('#box-2').css('align-self') == 'flex-end', 'The #box-2 element should have the align-self property set to a value of flex-end.'); + testString: assert($('#box-2').css('align-self') == 'flex-end'); ``` diff --git a/curriculum/challenges/english/01-responsive-web-design/css-flexbox/use-the-flex-basis-property-to-set-the-initial-size-of-an-item.english.md b/curriculum/challenges/english/01-responsive-web-design/css-flexbox/use-the-flex-basis-property-to-set-the-initial-size-of-an-item.english.md index 87b7f850dc..57bf6bbd8d 100644 --- a/curriculum/challenges/english/01-responsive-web-design/css-flexbox/use-the-flex-basis-property-to-set-the-initial-size-of-an-item.english.md +++ b/curriculum/challenges/english/01-responsive-web-design/css-flexbox/use-the-flex-basis-property-to-set-the-initial-size-of-an-item.english.md @@ -22,13 +22,13 @@ Set the initial size of the boxes using flex-basis. Add the CSS pro ```yml tests: - text: The #box-1 element should have a flex-basis property. - testString: assert($('#box-1').css('flex-basis') != 'auto', 'The #box-1 element should have a flex-basis property.'); + testString: assert($('#box-1').css('flex-basis') != 'auto'); - text: The #box-1 element should have a flex-basis value of 10em. - testString: assert(code.match(/#box-1\s*?{\s*?.*?\s*?.*?\s*?flex-basis:\s*?10em;/g), 'The #box-1 element should have a flex-basis value of 10em.'); + testString: assert(code.match(/#box-1\s*?{\s*?.*?\s*?.*?\s*?flex-basis:\s*?10em;/g)); - text: The #box-2 element should have the flex-basis property. - testString: assert($('#box-2').css('flex-basis') != 'auto', 'The #box-2 element should have the flex-basis property.'); + testString: assert($('#box-2').css('flex-basis') != 'auto'); - text: The #box-2 element should have a flex-basis value of 20em. - testString: assert(code.match(/#box-2\s*?{\s*?.*?\s*?.*?\s*?flex-basis:\s*?20em;/g), 'The #box-2 element should have a flex-basis value of 20em.'); + testString: assert(code.match(/#box-2\s*?{\s*?.*?\s*?.*?\s*?flex-basis:\s*?20em;/g)); ``` diff --git a/curriculum/challenges/english/01-responsive-web-design/css-flexbox/use-the-flex-direction-property-to-make-a-column.english.md b/curriculum/challenges/english/01-responsive-web-design/css-flexbox/use-the-flex-direction-property-to-make-a-column.english.md index b5f327cf6c..cd71a8563d 100644 --- a/curriculum/challenges/english/01-responsive-web-design/css-flexbox/use-the-flex-direction-property-to-make-a-column.english.md +++ b/curriculum/challenges/english/01-responsive-web-design/css-flexbox/use-the-flex-direction-property-to-make-a-column.english.md @@ -21,7 +21,7 @@ Add the CSS property flex-direction to the #box-container#box-container element should have a flex-direction property set to column. - testString: assert($('#box-container').css('flex-direction') == 'column', 'The #box-container element should have a flex-direction property set to column.'); + testString: assert($('#box-container').css('flex-direction') == 'column'); ``` diff --git a/curriculum/challenges/english/01-responsive-web-design/css-flexbox/use-the-flex-direction-property-to-make-a-row.english.md b/curriculum/challenges/english/01-responsive-web-design/css-flexbox/use-the-flex-direction-property-to-make-a-row.english.md index 40750cecab..f636bec232 100644 --- a/curriculum/challenges/english/01-responsive-web-design/css-flexbox/use-the-flex-direction-property-to-make-a-row.english.md +++ b/curriculum/challenges/english/01-responsive-web-design/css-flexbox/use-the-flex-direction-property-to-make-a-row.english.md @@ -23,7 +23,7 @@ Add the CSS property flex-direction to the #box-container#box-container element should have a flex-direction property set to row-reverse. - testString: assert($('#box-container').css('flex-direction') == 'row-reverse', 'The #box-container element should have a flex-direction property set to row-reverse.'); + testString: assert($('#box-container').css('flex-direction') == 'row-reverse'); ``` diff --git a/curriculum/challenges/english/01-responsive-web-design/css-flexbox/use-the-flex-grow-property-to-expand-items.english.md b/curriculum/challenges/english/01-responsive-web-design/css-flexbox/use-the-flex-grow-property-to-expand-items.english.md index 2076259876..c2dca22ee5 100644 --- a/curriculum/challenges/english/01-responsive-web-design/css-flexbox/use-the-flex-grow-property-to-expand-items.english.md +++ b/curriculum/challenges/english/01-responsive-web-design/css-flexbox/use-the-flex-grow-property-to-expand-items.english.md @@ -22,9 +22,9 @@ Add the CSS property flex-grow to both #box-1 and #box-1 element should have the flex-grow property set to a value of 1. - testString: assert($('#box-1').css('flex-grow') == '1', 'The #box-1 element should have the flex-grow property set to a value of 1.'); + testString: assert($('#box-1').css('flex-grow') == '1'); - text: The #box-2 element should have the flex-grow property set to a value of 2. - testString: assert($('#box-2').css('flex-grow') == '2', 'The #box-2 element should have the flex-grow property set to a value of 2.'); + testString: assert($('#box-2').css('flex-grow') == '2'); ``` diff --git a/curriculum/challenges/english/01-responsive-web-design/css-flexbox/use-the-flex-shorthand-property.english.md b/curriculum/challenges/english/01-responsive-web-design/css-flexbox/use-the-flex-shorthand-property.english.md index b34761c73b..29025a7106 100644 --- a/curriculum/challenges/english/01-responsive-web-design/css-flexbox/use-the-flex-shorthand-property.english.md +++ b/curriculum/challenges/english/01-responsive-web-design/css-flexbox/use-the-flex-shorthand-property.english.md @@ -24,11 +24,11 @@ These values will cause #box-1 to grow to fill the extra space at t ```yml tests: - text: The #box-1 element should have the flex property set to a value of 2 2 150px. - testString: assert($('#box-1').css('flex-grow') == '2' && $('#box-1').css('flex-shrink') == '2' && $('#box-1').css('flex-basis') == '150px', 'The #box-1 element should have the flex property set to a value of 2 2 150px.'); + testString: assert($('#box-1').css('flex-grow') == '2' && $('#box-1').css('flex-shrink') == '2' && $('#box-1').css('flex-basis') == '150px'); - text: The #box-2 element should have the flex property set to a value of 1 1 150px. - testString: assert($('#box-2').css('flex-grow') == '1' && $('#box-2').css('flex-shrink') == '1' && $('#box-2').css('flex-basis') == '150px', 'The #box-2 element should have the flex property set to a value of 1 1 150px.'); + testString: assert($('#box-2').css('flex-grow') == '1' && $('#box-2').css('flex-shrink') == '1' && $('#box-2').css('flex-basis') == '150px'); - text: Your code should use the flex property for #box-1 and #box-2. - testString: assert(code.match(/flex:\s*?\d\s+?\d\s+?150px;/g).length == 2, 'Your code should use the flex property for #box-1 and #box-2.'); + testString: assert(code.match(/flex:\s*?\d\s+?\d\s+?150px;/g).length == 2); ``` diff --git a/curriculum/challenges/english/01-responsive-web-design/css-flexbox/use-the-flex-shrink-property-to-shrink-items.english.md b/curriculum/challenges/english/01-responsive-web-design/css-flexbox/use-the-flex-shrink-property-to-shrink-items.english.md index 6d97007852..37083b9368 100644 --- a/curriculum/challenges/english/01-responsive-web-design/css-flexbox/use-the-flex-shrink-property-to-shrink-items.english.md +++ b/curriculum/challenges/english/01-responsive-web-design/css-flexbox/use-the-flex-shrink-property-to-shrink-items.english.md @@ -23,9 +23,9 @@ Add the CSS property flex-shrink to both #box-1 and #box-1 element should have the flex-shrink property set to a value of 1. - testString: assert($('#box-1').css('flex-shrink') == '1', 'The #box-1 element should have the flex-shrink property set to a value of 1.'); + testString: assert($('#box-1').css('flex-shrink') == '1'); - text: The #box-2 element should have the flex-shrink property set to a value of 2. - testString: assert($('#box-2').css('flex-shrink') == '2', 'The #box-2 element should have the flex-shrink property set to a value of 2.'); + testString: assert($('#box-2').css('flex-shrink') == '2'); ``` diff --git a/curriculum/challenges/english/01-responsive-web-design/css-flexbox/use-the-flex-wrap-property-to-wrap-a-row-or-column.english.md b/curriculum/challenges/english/01-responsive-web-design/css-flexbox/use-the-flex-wrap-property-to-wrap-a-row-or-column.english.md index 729289bbac..ed6e55c633 100644 --- a/curriculum/challenges/english/01-responsive-web-design/css-flexbox/use-the-flex-wrap-property-to-wrap-a-row-or-column.english.md +++ b/curriculum/challenges/english/01-responsive-web-design/css-flexbox/use-the-flex-wrap-property-to-wrap-a-row-or-column.english.md @@ -24,7 +24,7 @@ The current layout has too many boxes for one row. Add the CSS property fl ```yml tests: - text: The #box-container element should have the flex-wrap property set to a value of wrap. - testString: assert($('#box-container').css('flex-wrap') == 'wrap', 'The #box-container element should have the flex-wrap property set to a value of wrap.'); + testString: assert($('#box-container').css('flex-wrap') == 'wrap'); ``` diff --git a/curriculum/challenges/english/01-responsive-web-design/css-flexbox/use-the-order-property-to-rearrange-items.english.md b/curriculum/challenges/english/01-responsive-web-design/css-flexbox/use-the-order-property-to-rearrange-items.english.md index 22d4954b67..261472694a 100644 --- a/curriculum/challenges/english/01-responsive-web-design/css-flexbox/use-the-order-property-to-rearrange-items.english.md +++ b/curriculum/challenges/english/01-responsive-web-design/css-flexbox/use-the-order-property-to-rearrange-items.english.md @@ -21,9 +21,9 @@ Add the CSS property order to both #box-1 and #b ```yml tests: - text: The #box-1 element should have the order property set to a value of 2. - testString: assert($('#box-1').css('order') == '2', 'The #box-1 element should have the order property set to a value of 2.'); + testString: assert($('#box-1').css('order') == '2'); - text: The #box-2 element should have the order property set to a value of 1. - testString: assert($('#box-2').css('order') == '1', 'The #box-2 element should have the order property set to a value of 1.'); + testString: assert($('#box-2').css('order') == '1'); ``` diff --git a/curriculum/challenges/english/01-responsive-web-design/css-grid/add-columns-with-grid-template-columns.english.md b/curriculum/challenges/english/01-responsive-web-design/css-grid/add-columns-with-grid-template-columns.english.md index 7fa12a45b3..a3077862f4 100644 --- a/curriculum/challenges/english/01-responsive-web-design/css-grid/add-columns-with-grid-template-columns.english.md +++ b/curriculum/challenges/english/01-responsive-web-design/css-grid/add-columns-with-grid-template-columns.english.md @@ -31,7 +31,7 @@ Give the grid container three columns that are each 100px wide. ```yml 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.'); + testString: assert(code.match(/.container\s*?{[\s\S]*grid-template-columns\s*?:\s*?100px\s*?100px\s*?100px\s*?;[\s\S]*}/gi)); ``` diff --git a/curriculum/challenges/english/01-responsive-web-design/css-grid/add-gaps-faster-with-grid-gap.english.md b/curriculum/challenges/english/01-responsive-web-design/css-grid/add-gaps-faster-with-grid-gap.english.md index 7eefbe9bc9..06c9a12be8 100644 --- a/curriculum/challenges/english/01-responsive-web-design/css-grid/add-gaps-faster-with-grid-gap.english.md +++ b/curriculum/challenges/english/01-responsive-web-design/css-grid/add-gaps-faster-with-grid-gap.english.md @@ -21,7 +21,7 @@ Use grid-gap to introduce a 10px gap between the rows ```yml 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.'); + testString: assert(code.match(/.container\s*?{[\s\S]*grid-gap\s*?:\s*?10px\s+?20px\s*?;[\s\S]*}/gi)); ``` diff --git a/curriculum/challenges/english/01-responsive-web-design/css-grid/add-rows-with-grid-template-rows.english.md b/curriculum/challenges/english/01-responsive-web-design/css-grid/add-rows-with-grid-template-rows.english.md index 6d1f95292f..09de0f8d23 100644 --- a/curriculum/challenges/english/01-responsive-web-design/css-grid/add-rows-with-grid-template-rows.english.md +++ b/curriculum/challenges/english/01-responsive-web-design/css-grid/add-rows-with-grid-template-rows.english.md @@ -21,7 +21,7 @@ Add two rows to the grid that are 50px tall each. ```yml 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.'); + testString: assert(code.match(/.container\s*?{[\s\S]*grid-template-rows\s*?:\s*?50px\s*?50px\s*?;[\s\S]*}/gi)); ``` diff --git a/curriculum/challenges/english/01-responsive-web-design/css-grid/align-all-items-horizontally-using-justify-items.english.md b/curriculum/challenges/english/01-responsive-web-design/css-grid/align-all-items-horizontally-using-justify-items.english.md index 18cad37984..7399bc6994 100644 --- a/curriculum/challenges/english/01-responsive-web-design/css-grid/align-all-items-horizontally-using-justify-items.english.md +++ b/curriculum/challenges/english/01-responsive-web-design/css-grid/align-all-items-horizontally-using-justify-items.english.md @@ -21,7 +21,7 @@ Use this property to center all our items horizontally. ```yml 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.'); + testString: assert(code.match(/.container\s*?{[\s\S]*justify-items\s*?:\s*?center\s*?;[\s\S]*}/gi)); ``` diff --git a/curriculum/challenges/english/01-responsive-web-design/css-grid/align-all-items-vertically-using-align-items.english.md b/curriculum/challenges/english/01-responsive-web-design/css-grid/align-all-items-vertically-using-align-items.english.md index ff1280affd..bfd0fa4d1b 100644 --- a/curriculum/challenges/english/01-responsive-web-design/css-grid/align-all-items-vertically-using-align-items.english.md +++ b/curriculum/challenges/english/01-responsive-web-design/css-grid/align-all-items-vertically-using-align-items.english.md @@ -21,7 +21,7 @@ Use it now to move all the items to the end of each cell. ```yml 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.'); + testString: assert(code.match(/.container\s*?{[\s\S]*align-items\s*?:\s*?end\s*?;[\s\S]*}/gi)); ``` diff --git a/curriculum/challenges/english/01-responsive-web-design/css-grid/align-an-item-horizontally-using-justify-self.english.md b/curriculum/challenges/english/01-responsive-web-design/css-grid/align-an-item-horizontally-using-justify-self.english.md index 74709cef3d..b6c3a9328a 100644 --- a/curriculum/challenges/english/01-responsive-web-design/css-grid/align-an-item-horizontally-using-justify-self.english.md +++ b/curriculum/challenges/english/01-responsive-web-design/css-grid/align-an-item-horizontally-using-justify-self.english.md @@ -24,7 +24,7 @@ Use the justify-self property to center the item with the class 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.'); + testString: assert(code.match(/.item2\s*?{[\s\S]*justify-self\s*?:\s*?center\s*?;[\s\S]*}/gi)); ``` diff --git a/curriculum/challenges/english/01-responsive-web-design/css-grid/align-an-item-vertically-using-align-self.english.md b/curriculum/challenges/english/01-responsive-web-design/css-grid/align-an-item-vertically-using-align-self.english.md index 72bbcc2efc..31c799a511 100644 --- a/curriculum/challenges/english/01-responsive-web-design/css-grid/align-an-item-vertically-using-align-self.english.md +++ b/curriculum/challenges/english/01-responsive-web-design/css-grid/align-an-item-vertically-using-align-self.english.md @@ -21,7 +21,7 @@ Align the item with the class item3 vertically at the enditem3 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.'); + testString: assert(code.match(/.item3\s*?{[\s\S]*align-self\s*?:\s*?end\s*?;[\s\S]*}/gi)); ``` diff --git a/curriculum/challenges/english/01-responsive-web-design/css-grid/create-a-column-gap-using-grid-column-gap.english.md b/curriculum/challenges/english/01-responsive-web-design/css-grid/create-a-column-gap-using-grid-column-gap.english.md index 2ce56e90a6..edeae632e9 100644 --- a/curriculum/challenges/english/01-responsive-web-design/css-grid/create-a-column-gap-using-grid-column-gap.english.md +++ b/curriculum/challenges/english/01-responsive-web-design/css-grid/create-a-column-gap-using-grid-column-gap.english.md @@ -27,7 +27,7 @@ Give the columns in the grid a 20px gap. ```yml 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.'); + testString: assert(code.match(/.container\s*?{[\s\S]*grid-column-gap\s*?:\s*?20px\s*?;[\s\S]*}/gi)); ``` diff --git a/curriculum/challenges/english/01-responsive-web-design/css-grid/create-a-row-gap-using-grid-row-gap.english.md b/curriculum/challenges/english/01-responsive-web-design/css-grid/create-a-row-gap-using-grid-row-gap.english.md index b697f6a64d..6db4e13701 100644 --- a/curriculum/challenges/english/01-responsive-web-design/css-grid/create-a-row-gap-using-grid-row-gap.english.md +++ b/curriculum/challenges/english/01-responsive-web-design/css-grid/create-a-row-gap-using-grid-row-gap.english.md @@ -21,7 +21,7 @@ Create a gap for the rows that is 5px tall. ```yml 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.'); + testString: assert(code.match(/.container\s*?{[\s\S]*grid-row-gap\s*?:\s*?5px\s*?;[\s\S]*}/gi)); ``` diff --git a/curriculum/challenges/english/01-responsive-web-design/css-grid/create-flexible-layouts-using-auto-fill.english.md b/curriculum/challenges/english/01-responsive-web-design/css-grid/create-flexible-layouts-using-auto-fill.english.md index d99632dae0..83a6c6d996 100644 --- a/curriculum/challenges/english/01-responsive-web-design/css-grid/create-flexible-layouts-using-auto-fill.english.md +++ b/curriculum/challenges/english/01-responsive-web-design/css-grid/create-flexible-layouts-using-auto-fill.english.md @@ -28,7 +28,7 @@ In the first grid, use auto-fill with repeat to fill t ```yml 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.'); + 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)); ``` diff --git a/curriculum/challenges/english/01-responsive-web-design/css-grid/create-flexible-layouts-using-auto-fit.english.md b/curriculum/challenges/english/01-responsive-web-design/css-grid/create-flexible-layouts-using-auto-fit.english.md index ccb454f1f4..24d4473da9 100644 --- a/curriculum/challenges/english/01-responsive-web-design/css-grid/create-flexible-layouts-using-auto-fit.english.md +++ b/curriculum/challenges/english/01-responsive-web-design/css-grid/create-flexible-layouts-using-auto-fit.english.md @@ -22,7 +22,7 @@ In the second grid, use auto-fit with repeat to fill t ```yml 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.'); + 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)); ``` diff --git a/curriculum/challenges/english/01-responsive-web-design/css-grid/create-grids-within-grids.english.md b/curriculum/challenges/english/01-responsive-web-design/css-grid/create-grids-within-grids.english.md index 2fb5ed8b63..ef421363f1 100644 --- a/curriculum/challenges/english/01-responsive-web-design/css-grid/create-grids-within-grids.english.md +++ b/curriculum/challenges/english/01-responsive-web-design/css-grid/create-grids-within-grids.english.md @@ -22,9 +22,9 @@ Turn the element with the item3 class into a grid with two columns ```yml 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.'); + testString: assert(code.match(/.item3\s*?{[\s\S]*grid-template-columns\s*?:\s*?auto\s*?1fr\s*?;[\s\S]*}/gi)); - 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.'); + testString: assert(code.match(/.item3\s*?{[\s\S]*display\s*?:\s*?grid\s*?;[\s\S]*}/gi)); ``` diff --git a/curriculum/challenges/english/01-responsive-web-design/css-grid/create-your-first-css-grid.english.md b/curriculum/challenges/english/01-responsive-web-design/css-grid/create-your-first-css-grid.english.md index 29f76de41f..a4be7126e6 100644 --- a/curriculum/challenges/english/01-responsive-web-design/css-grid/create-your-first-css-grid.english.md +++ b/curriculum/challenges/english/01-responsive-web-design/css-grid/create-your-first-css-grid.english.md @@ -22,7 +22,7 @@ Change the display of the div with the container class to gri ```yml 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.'); + testString: assert(code.match(/.container\s*?{[\s\S]*display\s*?:\s*?grid\s*?;[\s\S]*}/gi)); ``` diff --git a/curriculum/challenges/english/01-responsive-web-design/css-grid/divide-the-grid-into-an-area-template.english.md b/curriculum/challenges/english/01-responsive-web-design/css-grid/divide-the-grid-into-an-area-template.english.md index 7e7bf2bc70..060a7f2177 100644 --- a/curriculum/challenges/english/01-responsive-web-design/css-grid/divide-the-grid-into-an-area-template.english.md +++ b/curriculum/challenges/english/01-responsive-web-design/css-grid/divide-the-grid-into-an-area-template.english.md @@ -32,7 +32,7 @@ Place the area template so that the cell labeled advert becomes an ```yml 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.'); + 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)); ``` diff --git a/curriculum/challenges/english/01-responsive-web-design/css-grid/limit-item-size-using-the-minmax-function.english.md b/curriculum/challenges/english/01-responsive-web-design/css-grid/limit-item-size-using-the-minmax-function.english.md index f28f0291c2..8ffcb408ba 100644 --- a/curriculum/challenges/english/01-responsive-web-design/css-grid/limit-item-size-using-the-minmax-function.english.md +++ b/curriculum/challenges/english/01-responsive-web-design/css-grid/limit-item-size-using-the-minmax-function.english.md @@ -27,7 +27,7 @@ Using the minmax function, replace the 1fr in the 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.'); + 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)); ``` diff --git a/curriculum/challenges/english/01-responsive-web-design/css-grid/place-items-in-grid-areas-using-the-grid-area-property.english.md b/curriculum/challenges/english/01-responsive-web-design/css-grid/place-items-in-grid-areas-using-the-grid-area-property.english.md index 9da10a1b37..655baf03d8 100644 --- a/curriculum/challenges/english/01-responsive-web-design/css-grid/place-items-in-grid-areas-using-the-grid-area-property.english.md +++ b/curriculum/challenges/english/01-responsive-web-design/css-grid/place-items-in-grid-areas-using-the-grid-area-property.english.md @@ -29,7 +29,7 @@ Place an element with the item5 class in the footer ar ```yml 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.'); + testString: assert(code.match(/.item5\s*?{[\s\S]*grid-area\s*?:\s*?footer\s*?;[\s\S]*}/gi)); ``` diff --git a/curriculum/challenges/english/01-responsive-web-design/css-grid/reduce-repetition-using-the-repeat-function.english.md b/curriculum/challenges/english/01-responsive-web-design/css-grid/reduce-repetition-using-the-repeat-function.english.md index 42e2b7607a..63a3f3737e 100644 --- a/curriculum/challenges/english/01-responsive-web-design/css-grid/reduce-repetition-using-the-repeat-function.english.md +++ b/curriculum/challenges/english/01-responsive-web-design/css-grid/reduce-repetition-using-the-repeat-function.english.md @@ -41,7 +41,7 @@ Use repeat to remove repetition from the grid-template-column ```yml 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.'); + 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)); ``` diff --git a/curriculum/challenges/english/01-responsive-web-design/css-grid/use-grid-area-without-creating-an-areas-template.english.md b/curriculum/challenges/english/01-responsive-web-design/css-grid/use-grid-area-without-creating-an-areas-template.english.md index d7829ab101..0cb832d647 100644 --- a/curriculum/challenges/english/01-responsive-web-design/css-grid/use-grid-area-without-creating-an-areas-template.english.md +++ b/curriculum/challenges/english/01-responsive-web-design/css-grid/use-grid-area-without-creating-an-areas-template.english.md @@ -33,7 +33,7 @@ Using the grid-area property, place the element with item5item5 class should have a grid-area property such that it is between the third and fourth horizontal lines and between the first and fourth vertical lines. - 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 such that it is between the third and fourth horizontal lines and between the first and fourth vertical lines.'); + 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)); ``` diff --git a/curriculum/challenges/english/01-responsive-web-design/css-grid/use-grid-row-to-control-spacing.english.md b/curriculum/challenges/english/01-responsive-web-design/css-grid/use-grid-row-to-control-spacing.english.md index 15b19c39b6..c4ab9fa1a5 100644 --- a/curriculum/challenges/english/01-responsive-web-design/css-grid/use-grid-row-to-control-spacing.english.md +++ b/curriculum/challenges/english/01-responsive-web-design/css-grid/use-grid-row-to-control-spacing.english.md @@ -21,7 +21,7 @@ Make the element with the item5 class consume the last two rows. ```yml 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.'); + testString: assert(code.match(/.item5\s*?{[\s\S]*grid-row\s*?:\s*?2\s*?\/\s*?4\s*?;[\s\S]*}/gi)); ``` diff --git a/curriculum/challenges/english/01-responsive-web-design/css-grid/use-media-queries-to-create-responsive-layouts.english.md b/curriculum/challenges/english/01-responsive-web-design/css-grid/use-media-queries-to-create-responsive-layouts.english.md index 1f26a6e341..c772d1aab0 100644 --- a/curriculum/challenges/english/01-responsive-web-design/css-grid/use-media-queries-to-create-responsive-layouts.english.md +++ b/curriculum/challenges/english/01-responsive-web-design/css-grid/use-media-queries-to-create-responsive-layouts.english.md @@ -22,7 +22,7 @@ When the viewport width is 400px or more, make the header area occu ```yml tests: - text: When the viewport is 400px or more, container class should have a grid-template-areas property in which the header and footer 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 header and footer 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)); ``` diff --git a/curriculum/challenges/english/01-responsive-web-design/responsive-web-design-principles/make-an-image-responsive.english.md b/curriculum/challenges/english/01-responsive-web-design/responsive-web-design-principles/make-an-image-responsive.english.md index 635d6d68fa..a31b9566a2 100644 --- a/curriculum/challenges/english/01-responsive-web-design/responsive-web-design-principles/make-an-image-responsive.english.md +++ b/curriculum/challenges/english/01-responsive-web-design/responsive-web-design-principles/make-an-image-responsive.english.md @@ -33,11 +33,11 @@ Add style rules for the img tag to make it responsive to the size o ```yml tests: - text: Your img tag should have a max-width set to 100%. - testString: assert(code.match(/max-width:\s*?100%;/g), 'Your img tag should have a max-width set to 100%.'); + testString: assert(code.match(/max-width:\s*?100%;/g)); - text: Your img tag should have a display set to block. - testString: assert($('img').css('display') == 'block', 'Your img tag should have a display set to block.'); + testString: assert($('img').css('display') == 'block'); - text: Your img tag should have a height set to auto. - testString: assert(code.match(/height:\s*?auto;/g), 'Your img tag should have a height set to auto.'); + testString: assert(code.match(/height:\s*?auto;/g)); ``` diff --git a/curriculum/challenges/english/01-responsive-web-design/responsive-web-design-principles/make-typography-responsive.english.md b/curriculum/challenges/english/01-responsive-web-design/responsive-web-design-principles/make-typography-responsive.english.md index c486742a45..e806732910 100644 --- a/curriculum/challenges/english/01-responsive-web-design/responsive-web-design-principles/make-typography-responsive.english.md +++ b/curriculum/challenges/english/01-responsive-web-design/responsive-web-design-principles/make-typography-responsive.english.md @@ -25,9 +25,9 @@ Set the width of the h2 tag to 80% of the viewport's w ```yml tests: - text: Your h2 tag should have a width of 80vw. - testString: assert(code.match(/h2\s*?{\s*?width:\s*?80vw;\s*?}/g), 'Your h2 tag should have a width of 80vw.'); + testString: assert(code.match(/h2\s*?{\s*?width:\s*?80vw;\s*?}/g)); - text: Your p tag should have a width of 75vmin. - testString: assert(code.match(/p\s*?{\s*?width:\s*?75vmin;\s*?}/g), 'Your p tag should have a width of 75vmin.'); + testString: assert(code.match(/p\s*?{\s*?width:\s*?75vmin;\s*?}/g)); ``` diff --git a/curriculum/challenges/english/01-responsive-web-design/responsive-web-design-principles/use-a-retina-image-for-higher-resolution-displays.english.md b/curriculum/challenges/english/01-responsive-web-design/responsive-web-design-principles/use-a-retina-image-for-higher-resolution-displays.english.md index def988d250..9bd19ef0c2 100644 --- a/curriculum/challenges/english/01-responsive-web-design/responsive-web-design-principles/use-a-retina-image-for-higher-resolution-displays.english.md +++ b/curriculum/challenges/english/01-responsive-web-design/responsive-web-design-principles/use-a-retina-image-for-higher-resolution-displays.english.md @@ -32,9 +32,9 @@ Set the width and height of the img tag t ```yml tests: - text: Your img tag should have a width of 100 pixels. - testString: assert($('img').css('width') == '100px', 'Your img tag should have a width of 100 pixels.'); + testString: assert($('img').css('width') == '100px'); - text: Your img tag should have a height of 100 pixels. - testString: assert($('img').css('height') == '100px', 'Your img tag should have a height of 100 pixels.'); + testString: assert($('img').css('height') == '100px'); ```