feat: add more tests, simplify some regex tests, fix wording
This commit is contained in:
@@ -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)`.
|
Your `.red` CSS rule should have a `background` property with the value `linear-gradient(90deg)`.
|
||||||
|
|
||||||
```js
|
```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--
|
# --seed--
|
||||||
|
@@ -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))`.
|
Your `.red` CSS rule should have a `background` property with the value `linear-gradient(90deg, rgb(255, 0, 0))`.
|
||||||
|
|
||||||
```js
|
```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--
|
# --seed--
|
||||||
|
@@ -13,10 +13,9 @@ In the `.green` CSS rule, change the `background-color` property to `background`
|
|||||||
|
|
||||||
# --hints--
|
# --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
|
```js
|
||||||
console.log(new __helpers.CSSHelp(document).getStyle('.green').cssText);
|
|
||||||
assert(new __helpers.CSSHelp(document).getStyle('.green').cssText === 'background: rgb(0, 127, 0);');
|
assert(new __helpers.CSSHelp(document).getStyle('.green').cssText === 'background: rgb(0, 127, 0);');
|
||||||
```
|
```
|
||||||
|
|
||||||
|
@@ -13,10 +13,12 @@ Use the `linear-gradient` function and set `gradientDirection` to `180deg`. And
|
|||||||
|
|
||||||
# --hints--
|
# --hints--
|
||||||
|
|
||||||
Test 1
|
Your `.green` CSS rule should have a `background` property with the value `linear-gradient(180deg, #55680D)`.
|
||||||
|
|
||||||
```js
|
```js
|
||||||
|
assert(
|
||||||
|
__helpers.removeWhiteSpace($('style').text()).match(/\.green{.*background:linear-gradient\(180deg,#55680D\).*}/g)
|
||||||
|
);
|
||||||
```
|
```
|
||||||
|
|
||||||
# --seed--
|
# --seed--
|
||||||
|
@@ -11,10 +11,10 @@ For the second color argument, use a hex color code with the values `71` for red
|
|||||||
|
|
||||||
# --hints--
|
# --hints--
|
||||||
|
|
||||||
Test 1
|
Your `.green` CSS rule should have a `background` property set to `linear-gradient(180deg, #55680D, #71F53E)`.
|
||||||
|
|
||||||
```js
|
```js
|
||||||
|
assert(new __helpers.CSSHelp(document).getStyle('.green')?.background === 'linear-gradient(rgb(85, 104, 13), rgb(113, 245, 62))');
|
||||||
```
|
```
|
||||||
|
|
||||||
# --seed--
|
# --seed--
|
||||||
|
@@ -13,10 +13,10 @@ In the same `linear-gradient` function, add a hex color code with the values `11
|
|||||||
|
|
||||||
# --hints--
|
# --hints--
|
||||||
|
|
||||||
Test 1
|
Your `.green` CSS rule should have a `background` property set to `linear-gradient(180deg, #55680D, #71F53E, #116C31)`.
|
||||||
|
|
||||||
```js
|
```js
|
||||||
|
assert(new __helpers.CSSHelp(document).getStyle('.green')?.background === 'linear-gradient(rgb(85, 104, 13), rgb(113, 245, 62), rgb(17, 108, 49))');
|
||||||
```
|
```
|
||||||
|
|
||||||
# --seed--
|
# --seed--
|
||||||
|
@@ -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.
|
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--
|
# --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
|
```js
|
||||||
|
assert(new __helpers.CSSHelp(document).getStyle('.red')?.background === 'linear-gradient(rgb(122, 74, 14), rgb(245, 62, 113), rgb(162, 27, 27))');
|
||||||
```
|
```
|
||||||
|
|
||||||
# --seed--
|
# --seed--
|
||||||
|
@@ -13,10 +13,22 @@ Clean up your code a little more by removing the `gradientDirection` argument fr
|
|||||||
|
|
||||||
# --hints--
|
# --hints--
|
||||||
|
|
||||||
Test 1
|
You should remove the `gradientDirection` arguments from the `linear-gradient` functions in your `.red` and `.green` CSS rules.
|
||||||
|
|
||||||
```js
|
```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--
|
# --seed--
|
||||||
|
@@ -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.
|
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--
|
# --hints--
|
||||||
|
|
||||||
Test 1
|
Your `.blue` CSS rule should have a `background` property with the value `hsl(240, 100%, 50%)`.
|
||||||
|
|
||||||
```js
|
```js
|
||||||
|
assert(new __helpers.CSSHelp(document).getStyle('.blue').cssText === 'background: rgb(0, 0, 255);');
|
||||||
```
|
```
|
||||||
|
|
||||||
# --seed--
|
# --seed--
|
||||||
|
@@ -11,10 +11,12 @@ Use the `linear-gradient` function, and pass in the `hsl` function with the valu
|
|||||||
|
|
||||||
# --hints--
|
# --hints--
|
||||||
|
|
||||||
Test 1
|
Your `.blue` CSS rule should have a `background` property with the value `linear-gradient(hsl(186, 76%, 16%))`.
|
||||||
|
|
||||||
```js
|
```js
|
||||||
|
assert(
|
||||||
|
__helpers.removeWhiteSpace($('style').text()).match(/\.blue{.*linear-gradient\(hsl\(186,76%,16%\)\).*}/g)
|
||||||
|
);
|
||||||
```
|
```
|
||||||
|
|
||||||
# --seed--
|
# --seed--
|
||||||
|
@@ -11,10 +11,10 @@ As the second color argument, pass in the `hsl` function with the values `223` f
|
|||||||
|
|
||||||
# --hints--
|
# --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
|
```js
|
||||||
|
assert(new __helpers.CSSHelp(document).getStyle('.blue')?.background === 'linear-gradient(rgb(10, 66, 72), rgb(61, 113, 245))');
|
||||||
```
|
```
|
||||||
|
|
||||||
# --seed--
|
# --seed--
|
||||||
|
@@ -11,10 +11,10 @@ And as the third color argument, pass in the `hsl` function with the values `240
|
|||||||
|
|
||||||
# --hints--
|
# --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
|
```js
|
||||||
|
assert(new __helpers.CSSHelp(document).getStyle('.blue')?.background === 'linear-gradient(rgb(10, 66, 72), rgb(61, 113, 245), rgb(47, 47, 167))');
|
||||||
```
|
```
|
||||||
|
|
||||||
# --seed--
|
# --seed--
|
||||||
|
@@ -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.
|
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--
|
# --hints--
|
||||||
|
|
||||||
Test 1
|
Your new `div` element should be within the `div.red` element.
|
||||||
|
|
||||||
```js
|
```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--
|
# --seed--
|
||||||
|
@@ -7,16 +7,28 @@ dashedName: step-71
|
|||||||
|
|
||||||
# --description--
|
# --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--
|
# --hints--
|
||||||
|
|
||||||
Test 1
|
You should use a class selector to target the `class` attribute, `sleeve`.
|
||||||
|
|
||||||
```js
|
```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--
|
# --seed--
|
||||||
|
Reference in New Issue
Block a user