From 6ef6960da9170936d2df9ad3c314191302ed0ba9 Mon Sep 17 00:00:00 2001 From: Kris Koishigawa Date: Fri, 17 Dec 2021 16:05:53 +0900 Subject: [PATCH] feat: add more tests, simplify some regex tests, fix wording --- .../step-050.md | 4 +++- .../step-051.md | 4 +++- .../step-060.md | 3 +-- .../step-061.md | 6 ++++-- .../step-062.md | 4 ++-- .../step-063.md | 4 ++-- .../step-064.md | 6 +++--- .../step-065.md | 14 +++++++++++++- .../step-066.md | 6 +++--- .../step-067.md | 6 ++++-- .../step-068.md | 4 ++-- .../step-069.md | 4 ++-- .../step-070.md | 12 ++++++++++-- .../step-071.md | 18 +++++++++++++++--- 14 files changed, 67 insertions(+), 28 deletions(-) diff --git a/curriculum/challenges/english/01-responsive-web-design/learn-css-colors-by-building-a-color-markers-set/step-050.md b/curriculum/challenges/english/01-responsive-web-design/learn-css-colors-by-building-a-color-markers-set/step-050.md index 88ac8638c3..ec64d22344 100644 --- a/curriculum/challenges/english/01-responsive-web-design/learn-css-colors-by-building-a-color-markers-set/step-050.md +++ b/curriculum/challenges/english/01-responsive-web-design/learn-css-colors-by-building-a-color-markers-set/step-050.md @@ -24,7 +24,9 @@ First, in the `.red` CSS rule, set the `background` property to `linear-gradient Your `.red` CSS rule should have a `background` property with the value `linear-gradient(90deg)`. ```js -assert(code.match(/background\s*:\s*linear-gradient\(\s*90deg\s*\);?/g)); +assert( + __helpers.removeWhiteSpace($('style').text()).match(/\.red{.*background:linear-gradient\(90deg\).*}/g) +); ``` # --seed-- diff --git a/curriculum/challenges/english/01-responsive-web-design/learn-css-colors-by-building-a-color-markers-set/step-051.md b/curriculum/challenges/english/01-responsive-web-design/learn-css-colors-by-building-a-color-markers-set/step-051.md index f65df494a1..5caf545ee2 100644 --- a/curriculum/challenges/english/01-responsive-web-design/learn-css-colors-by-building-a-color-markers-set/step-051.md +++ b/curriculum/challenges/english/01-responsive-web-design/learn-css-colors-by-building-a-color-markers-set/step-051.md @@ -16,7 +16,9 @@ In the `linear-gradient` function, use the `rgb` function to set the first color Your `.red` CSS rule should have a `background` property with the value `linear-gradient(90deg, rgb(255, 0, 0))`. ```js -assert(code.match(/background\s*:\s*linear-gradient\(\s*90deg\,\s*rgb\(255\,?\s*0\,\s*0\)\s*\);?/g)); +assert( + __helpers.removeWhiteSpace($('style').text()).match(/\.red{.*background:linear-gradient\(90deg,rgb\(255,0,0\)\).*}/g) +); ``` # --seed-- diff --git a/curriculum/challenges/english/01-responsive-web-design/learn-css-colors-by-building-a-color-markers-set/step-060.md b/curriculum/challenges/english/01-responsive-web-design/learn-css-colors-by-building-a-color-markers-set/step-060.md index 39d131010c..1a9ccaa712 100644 --- a/curriculum/challenges/english/01-responsive-web-design/learn-css-colors-by-building-a-color-markers-set/step-060.md +++ b/curriculum/challenges/english/01-responsive-web-design/learn-css-colors-by-building-a-color-markers-set/step-060.md @@ -13,10 +13,9 @@ In the `.green` CSS rule, change the `background-color` property to `background` # --hints-- -Your `.green` CSS rule should have a `background` property with the value `rgb(0, 127, 0)`. +Your `.green` CSS rule should have a `background` property with the value `#007F00`. ```js -console.log(new __helpers.CSSHelp(document).getStyle('.green').cssText); assert(new __helpers.CSSHelp(document).getStyle('.green').cssText === 'background: rgb(0, 127, 0);'); ``` diff --git a/curriculum/challenges/english/01-responsive-web-design/learn-css-colors-by-building-a-color-markers-set/step-061.md b/curriculum/challenges/english/01-responsive-web-design/learn-css-colors-by-building-a-color-markers-set/step-061.md index 00c6f71a1e..934bee85be 100644 --- a/curriculum/challenges/english/01-responsive-web-design/learn-css-colors-by-building-a-color-markers-set/step-061.md +++ b/curriculum/challenges/english/01-responsive-web-design/learn-css-colors-by-building-a-color-markers-set/step-061.md @@ -13,10 +13,12 @@ Use the `linear-gradient` function and set `gradientDirection` to `180deg`. And # --hints-- -Test 1 +Your `.green` CSS rule should have a `background` property with the value `linear-gradient(180deg, #55680D)`. ```js - +assert( + __helpers.removeWhiteSpace($('style').text()).match(/\.green{.*background:linear-gradient\(180deg,#55680D\).*}/g) +); ``` # --seed-- diff --git a/curriculum/challenges/english/01-responsive-web-design/learn-css-colors-by-building-a-color-markers-set/step-062.md b/curriculum/challenges/english/01-responsive-web-design/learn-css-colors-by-building-a-color-markers-set/step-062.md index d56de1b6d4..8b476c2d25 100644 --- a/curriculum/challenges/english/01-responsive-web-design/learn-css-colors-by-building-a-color-markers-set/step-062.md +++ b/curriculum/challenges/english/01-responsive-web-design/learn-css-colors-by-building-a-color-markers-set/step-062.md @@ -11,10 +11,10 @@ For the second color argument, use a hex color code with the values `71` for red # --hints-- -Test 1 +Your `.green` CSS rule should have a `background` property set to `linear-gradient(180deg, #55680D, #71F53E)`. ```js - +assert(new __helpers.CSSHelp(document).getStyle('.green')?.background === 'linear-gradient(rgb(85, 104, 13), rgb(113, 245, 62))'); ``` # --seed-- diff --git a/curriculum/challenges/english/01-responsive-web-design/learn-css-colors-by-building-a-color-markers-set/step-063.md b/curriculum/challenges/english/01-responsive-web-design/learn-css-colors-by-building-a-color-markers-set/step-063.md index c637404376..66546386b1 100644 --- a/curriculum/challenges/english/01-responsive-web-design/learn-css-colors-by-building-a-color-markers-set/step-063.md +++ b/curriculum/challenges/english/01-responsive-web-design/learn-css-colors-by-building-a-color-markers-set/step-063.md @@ -13,10 +13,10 @@ In the same `linear-gradient` function, add a hex color code with the values `11 # --hints-- -Test 1 +Your `.green` CSS rule should have a `background` property set to `linear-gradient(180deg, #55680D, #71F53E, #116C31)`. ```js - +assert(new __helpers.CSSHelp(document).getStyle('.green')?.background === 'linear-gradient(rgb(85, 104, 13), rgb(113, 245, 62), rgb(17, 108, 49))'); ``` # --seed-- diff --git a/curriculum/challenges/english/01-responsive-web-design/learn-css-colors-by-building-a-color-markers-set/step-064.md b/curriculum/challenges/english/01-responsive-web-design/learn-css-colors-by-building-a-color-markers-set/step-064.md index 6b03eb517d..dfb34d3f97 100644 --- a/curriculum/challenges/english/01-responsive-web-design/learn-css-colors-by-building-a-color-markers-set/step-064.md +++ b/curriculum/challenges/english/01-responsive-web-design/learn-css-colors-by-building-a-color-markers-set/step-064.md @@ -11,14 +11,14 @@ Even without the color-stops, you might have noticed that the colors for the gre The `linear-gradient` function automatically calculates these values for you, and places colors evenly along the gradient line by default. -In the `red` CSS rule, remove the three color stops from the `linear-gradient` function to clean up your code a bit. +In the `.red` CSS rule, remove the three color stops from the `linear-gradient` function to clean up your code a bit. # --hints-- -Test 1 +Your `.red` CSS rule should have a `background` property set to `linear-gradient(180deg, rgb(122, 74, 14), rgb(245, 62, 113), rgb(162, 27, 27))`. ```js - +assert(new __helpers.CSSHelp(document).getStyle('.red')?.background === 'linear-gradient(rgb(122, 74, 14), rgb(245, 62, 113), rgb(162, 27, 27))'); ``` # --seed-- diff --git a/curriculum/challenges/english/01-responsive-web-design/learn-css-colors-by-building-a-color-markers-set/step-065.md b/curriculum/challenges/english/01-responsive-web-design/learn-css-colors-by-building-a-color-markers-set/step-065.md index ec0b833585..fd5d1af25b 100644 --- a/curriculum/challenges/english/01-responsive-web-design/learn-css-colors-by-building-a-color-markers-set/step-065.md +++ b/curriculum/challenges/english/01-responsive-web-design/learn-css-colors-by-building-a-color-markers-set/step-065.md @@ -13,10 +13,22 @@ Clean up your code a little more by removing the `gradientDirection` argument fr # --hints-- -Test 1 +You should remove the `gradientDirection` arguments from the `linear-gradient` functions in your `.red` and `.green` CSS rules. ```js +assert(!code.match(/linear-gradient\s*\(\s*180deg/gi)); +``` +Your `.red` CSS rule should have a `background` property set to `linear-gradient(rgb(122, 74, 14), rgb(245, 62, 113), rgb(162, 27, 27))`. + +```js +assert(new __helpers.CSSHelp(document).getStyle('.red')?.background === 'linear-gradient(rgb(122, 74, 14), rgb(245, 62, 113), rgb(162, 27, 27))'); +``` + +Your `.green` CSS rule should have a `background` property set to `linear-gradient(#55680D, #71F53E, #116C31)`. + +```js +assert(new __helpers.CSSHelp(document).getStyle('.green')?.background === 'linear-gradient(rgb(85, 104, 13), rgb(113, 245, 62), rgb(17, 108, 49))'); ``` # --seed-- diff --git a/curriculum/challenges/english/01-responsive-web-design/learn-css-colors-by-building-a-color-markers-set/step-066.md b/curriculum/challenges/english/01-responsive-web-design/learn-css-colors-by-building-a-color-markers-set/step-066.md index fc398a9b21..8ee2379af9 100644 --- a/curriculum/challenges/english/01-responsive-web-design/learn-css-colors-by-building-a-color-markers-set/step-066.md +++ b/curriculum/challenges/english/01-responsive-web-design/learn-css-colors-by-building-a-color-markers-set/step-066.md @@ -9,14 +9,14 @@ dashedName: step-66 Now you'll apply a gradient to the blue marker, this time using the `hsl` function as color arguments. -In the `blue` CSS rule, change the `background-color` property to `background`. +In the `.blue` CSS rule, change the `background-color` property to `background`. # --hints-- -Test 1 +Your `.blue` CSS rule should have a `background` property with the value `hsl(240, 100%, 50%)`. ```js - +assert(new __helpers.CSSHelp(document).getStyle('.blue').cssText === 'background: rgb(0, 0, 255);'); ``` # --seed-- diff --git a/curriculum/challenges/english/01-responsive-web-design/learn-css-colors-by-building-a-color-markers-set/step-067.md b/curriculum/challenges/english/01-responsive-web-design/learn-css-colors-by-building-a-color-markers-set/step-067.md index 3c5069df8b..7cecfc55e4 100644 --- a/curriculum/challenges/english/01-responsive-web-design/learn-css-colors-by-building-a-color-markers-set/step-067.md +++ b/curriculum/challenges/english/01-responsive-web-design/learn-css-colors-by-building-a-color-markers-set/step-067.md @@ -11,10 +11,12 @@ Use the `linear-gradient` function, and pass in the `hsl` function with the valu # --hints-- -Test 1 +Your `.blue` CSS rule should have a `background` property with the value `linear-gradient(hsl(186, 76%, 16%))`. ```js - +assert( + __helpers.removeWhiteSpace($('style').text()).match(/\.blue{.*linear-gradient\(hsl\(186,76%,16%\)\).*}/g) +); ``` # --seed-- diff --git a/curriculum/challenges/english/01-responsive-web-design/learn-css-colors-by-building-a-color-markers-set/step-068.md b/curriculum/challenges/english/01-responsive-web-design/learn-css-colors-by-building-a-color-markers-set/step-068.md index dfed615d2f..f2079aa4b6 100644 --- a/curriculum/challenges/english/01-responsive-web-design/learn-css-colors-by-building-a-color-markers-set/step-068.md +++ b/curriculum/challenges/english/01-responsive-web-design/learn-css-colors-by-building-a-color-markers-set/step-068.md @@ -11,10 +11,10 @@ As the second color argument, pass in the `hsl` function with the values `223` f # --hints-- -Test 1 +Your `.blue` CSS rule should have a `background` property set to `linear-gradient(hsl(186, 76%, 16%), hsl(223, 90%, 60%))`. ```js - +assert(new __helpers.CSSHelp(document).getStyle('.blue')?.background === 'linear-gradient(rgb(10, 66, 72), rgb(61, 113, 245))'); ``` # --seed-- diff --git a/curriculum/challenges/english/01-responsive-web-design/learn-css-colors-by-building-a-color-markers-set/step-069.md b/curriculum/challenges/english/01-responsive-web-design/learn-css-colors-by-building-a-color-markers-set/step-069.md index d70a5c1733..e6df36a911 100644 --- a/curriculum/challenges/english/01-responsive-web-design/learn-css-colors-by-building-a-color-markers-set/step-069.md +++ b/curriculum/challenges/english/01-responsive-web-design/learn-css-colors-by-building-a-color-markers-set/step-069.md @@ -11,10 +11,10 @@ And as the third color argument, pass in the `hsl` function with the values `240 # --hints-- -Test 1 +Your `.blue` CSS rule should have a `background` property set to `linear-gradient(hsl(186, 76%, 16%), hsl(223, 90%, 60%), hsl(240, 56%, 42%))`. ```js - +assert(new __helpers.CSSHelp(document).getStyle('.blue')?.background === 'linear-gradient(rgb(10, 66, 72), rgb(61, 113, 245), rgb(47, 47, 167))'); ``` # --seed-- diff --git a/curriculum/challenges/english/01-responsive-web-design/learn-css-colors-by-building-a-color-markers-set/step-070.md b/curriculum/challenges/english/01-responsive-web-design/learn-css-colors-by-building-a-color-markers-set/step-070.md index ea2e2eef11..6257a38fe8 100644 --- a/curriculum/challenges/english/01-responsive-web-design/learn-css-colors-by-building-a-color-markers-set/step-070.md +++ b/curriculum/challenges/english/01-responsive-web-design/learn-css-colors-by-building-a-color-markers-set/step-070.md @@ -9,14 +9,22 @@ dashedName: step-70 Now that the markers have the correct colors, it's time to build the marker sleeves. Start with the red marker. -Inside the red marker `div` element, create a new `div` with the `class` `sleeve`. +Inside the `div.red` element, create a new `div` with the `class` attribute set to `sleeve`. # --hints-- -Test 1 +Your new `div` element should be within the `div.red` element. ```js +const redMarkerChildren = [...document.querySelector('.red')?.children]; +assert(redMarkerChildren.every(child => child?.localName === 'div') && redMarkerChildren.length === 1); +``` +Your new `div` element should have a `class` attribute set to `sleeve`. + +```js +const redMarkerChild = [...document.querySelector('.red')?.children][0]; +assert(redMarkerChild?.classList?.contains('sleeve')); ``` # --seed-- diff --git a/curriculum/challenges/english/01-responsive-web-design/learn-css-colors-by-building-a-color-markers-set/step-071.md b/curriculum/challenges/english/01-responsive-web-design/learn-css-colors-by-building-a-color-markers-set/step-071.md index fb4240a689..fe4024e28c 100644 --- a/curriculum/challenges/english/01-responsive-web-design/learn-css-colors-by-building-a-color-markers-set/step-071.md +++ b/curriculum/challenges/english/01-responsive-web-design/learn-css-colors-by-building-a-color-markers-set/step-071.md @@ -7,16 +7,28 @@ dashedName: step-71 # --description-- -Create a new CSS rule that targets the `sleeve` `class`. +Create a new CSS rule that targets the `class` attribute, `sleeve`. -Inside the `sleeve` rule, set the `width` property to `110px`, and the `height` property to `25px`. +Inside the new rule, set the `width` property to `110px`, and the `height` property to `25px`. # --hints-- -Test 1 +You should use a class selector to target the `class` attribute, `sleeve`. ```js +assert(new __helpers.CSSHelp(document).getStyle('.sleeve')); +``` +Your `.sleeve` CSS rule should have a `width` property set to `110px`. + +```js +assert(new __helpers.CSSHelp(document).getStyle('.sleeve')?.width === '110px'); +``` + +Your `.sleeve` CSS rule should have a `height` property set to `25px`. + +```js +assert(new __helpers.CSSHelp(document).getStyle('.sleeve')?.height === '25px'); ``` # --seed--