fix(curriculum): removed step 28 and edited meta.json (#44856)
This commit is contained in:
wbenarto
GitHub
@ -119,80 +119,76 @@
|
||||
"Step 27"
|
||||
],
|
||||
[
|
||||
"60a3e3396c7b40068ad69985",
|
||||
"60a3e3396c7b40068ad69986",
|
||||
"Step 28"
|
||||
],
|
||||
[
|
||||
"60a3e3396c7b40068ad69986",
|
||||
"60a3e3396c7b40068ad69987",
|
||||
"Step 29"
|
||||
],
|
||||
[
|
||||
"60a3e3396c7b40068ad69987",
|
||||
"60a3e3396c7b40068ad69988",
|
||||
"Step 30"
|
||||
],
|
||||
[
|
||||
"60a3e3396c7b40068ad69988",
|
||||
"60a3e3396c7b40068ad69989",
|
||||
"Step 31"
|
||||
],
|
||||
[
|
||||
"60a3e3396c7b40068ad69989",
|
||||
"60a3e3396c7b40068ad6998a",
|
||||
"Step 32"
|
||||
],
|
||||
[
|
||||
"60a3e3396c7b40068ad6998a",
|
||||
"60a3e3396c7b40068ad6998b",
|
||||
"Step 33"
|
||||
],
|
||||
[
|
||||
"60a3e3396c7b40068ad6998b",
|
||||
"60a3e3396c7b40068ad6998c",
|
||||
"Step 34"
|
||||
],
|
||||
[
|
||||
"60a3e3396c7b40068ad6998c",
|
||||
"60a3e3396c7b40068ad6998d",
|
||||
"Step 35"
|
||||
],
|
||||
[
|
||||
"60a3e3396c7b40068ad6998d",
|
||||
"60a3e3396c7b40068ad6998e",
|
||||
"Step 36"
|
||||
],
|
||||
[
|
||||
"60a3e3396c7b40068ad6998e",
|
||||
"60a3e3396c7b40068ad6998f",
|
||||
"Step 37"
|
||||
],
|
||||
[
|
||||
"60a3e3396c7b40068ad6998f",
|
||||
"60a3e3396c7b40068ad69990",
|
||||
"Step 38"
|
||||
],
|
||||
[
|
||||
"60a3e3396c7b40068ad69990",
|
||||
"60a3e3396c7b40068ad69991",
|
||||
"Step 39"
|
||||
],
|
||||
[
|
||||
"60a3e3396c7b40068ad69991",
|
||||
"60a3e3396c7b40068ad69992",
|
||||
"Step 40"
|
||||
],
|
||||
[
|
||||
"60a3e3396c7b40068ad69992",
|
||||
"60a3e3396c7b40068ad69993",
|
||||
"Step 41"
|
||||
],
|
||||
[
|
||||
"60a3e3396c7b40068ad69993",
|
||||
"60a3e3396c7b40068ad69994",
|
||||
"Step 42"
|
||||
],
|
||||
[
|
||||
"60a3e3396c7b40068ad69994",
|
||||
"60a3e3396c7b40068ad69995",
|
||||
"Step 43"
|
||||
],
|
||||
[
|
||||
"60a3e3396c7b40068ad69995",
|
||||
"60a3e3396c7b40068ad69996",
|
||||
"Step 44"
|
||||
],
|
||||
[
|
||||
"60a3e3396c7b40068ad69996",
|
||||
"Step 45"
|
||||
],
|
||||
[
|
||||
"60a3e3396c7b40068ad69997",
|
||||
"Step 46"
|
||||
"Step 45"
|
||||
]
|
||||
]
|
||||
}
|
||||
@ -1,5 +1,5 @@
|
||||
---
|
||||
id: 60a3e3396c7b40068ad69985
|
||||
id: 60a3e3396c7b40068ad69986
|
||||
title: Step 28
|
||||
challengeType: 0
|
||||
dashedName: step-28
|
||||
@ -7,25 +7,33 @@ dashedName: step-28
|
||||
|
||||
# --description--
|
||||
|
||||
Use margins to adjust the spacing between `one` and `two`.
|
||||
|
||||
Change the `margin` of `.one` to `20px auto 20px` so the top margin is 20 pixels, it's centered horizontally, and the bottom margin is 20 pixels.
|
||||
Create a new `div` with a `class` value of `three` right under the `.two` element. This will be your third rectangle.
|
||||
|
||||
# --hints--
|
||||
|
||||
You should set the `margin` property to `20px auto 20px`.
|
||||
Your existing `.one` and `.two` elements should not be changed.
|
||||
|
||||
```js
|
||||
const hasMarginRegex = /20px\s*auto\s*20px/;
|
||||
// TODO: Why is this stripped? Because margins are the same?
|
||||
assert(hasMarginRegex.test(code));
|
||||
assert(document.querySelectorAll('.one').length === 1);
|
||||
assert(document.querySelectorAll('.two').length === 1);
|
||||
```
|
||||
|
||||
Your `.one` element should have a `margin` value of `20px auto 20px`.
|
||||
Your new `div` should be nested in your `.canvas` element.
|
||||
|
||||
```js
|
||||
const oneMarginRegex = /\.one\s*{[^}]*margin:\s*20px\s*auto\s*20px;?\s*}/
|
||||
assert(oneMarginRegex.test(code));
|
||||
assert(document.querySelector('.canvas').children[2].tagName === 'DIV');
|
||||
```
|
||||
|
||||
Your new `div` should come after your `.two` element.
|
||||
|
||||
```js
|
||||
assert(document.querySelector('.two').nextElementSibling.tagName === 'DIV');
|
||||
```
|
||||
|
||||
Your new `div` element should have a `class` with the value `three`.
|
||||
|
||||
```js
|
||||
assert(document.querySelector('.canvas').children[2].className.split(' ').includes('three'));
|
||||
```
|
||||
|
||||
# --seed--
|
||||
@ -51,9 +59,7 @@ assert(oneMarginRegex.test(code));
|
||||
width: 425px;
|
||||
height: 150px;
|
||||
background-color: #efb762;
|
||||
--fcc-editable-region--
|
||||
margin: 20px auto;
|
||||
--fcc-editable-region--
|
||||
}
|
||||
|
||||
.two {
|
||||
@ -77,6 +83,9 @@ assert(oneMarginRegex.test(code));
|
||||
<div class="canvas">
|
||||
<div class="one"></div>
|
||||
<div class="two"></div>
|
||||
--fcc-editable-region--
|
||||
|
||||
--fcc-editable-region--
|
||||
</div>
|
||||
</div>
|
||||
</body>
|
||||
|
||||
@ -1,5 +1,5 @@
|
||||
---
|
||||
id: 60a3e3396c7b40068ad69986
|
||||
id: 60a3e3396c7b40068ad69987
|
||||
title: Step 29
|
||||
challengeType: 0
|
||||
dashedName: step-29
|
||||
@ -7,33 +7,31 @@ dashedName: step-29
|
||||
|
||||
# --description--
|
||||
|
||||
Create a new `div` with a `class` value of `three` right under the `.two` element. This will be your third rectangle.
|
||||
You don't always have to use pixels when sizing an element.
|
||||
|
||||
Create a new rule, `.three`, and set its `width` to `91%`.
|
||||
|
||||
# --hints--
|
||||
|
||||
Your existing `.one` and `.two` elements should not be changed.
|
||||
You should use the `.three` selector.
|
||||
|
||||
```js
|
||||
assert(document.querySelectorAll('.one').length === 1);
|
||||
assert(document.querySelectorAll('.two').length === 1);
|
||||
const hasThree = new __helpers.CSSHelp(document).getStyle('.three');
|
||||
assert(hasThree);
|
||||
```
|
||||
|
||||
Your new `div` should be nested in your `.canvas` element.
|
||||
You should set the `width` property to `91%`.
|
||||
|
||||
```js
|
||||
assert(document.querySelector('.canvas').children[2].tagName === 'DIV');
|
||||
const hasWidth = new __helpers.CSSHelp(document).getCSSRules().some(x => x.style.width === '91%');
|
||||
assert(hasWidth);
|
||||
```
|
||||
|
||||
Your new `div` should come after your `.two` element.
|
||||
Your `.three` element should have a `width` value of `91%`.
|
||||
|
||||
```js
|
||||
assert(document.querySelector('.two').nextElementSibling.tagName === 'DIV');
|
||||
```
|
||||
|
||||
Your new `div` element should have a `class` with the value `three`.
|
||||
|
||||
```js
|
||||
assert(document.querySelector('.canvas').children[2].className.split(' ').includes('three'));
|
||||
const threeWidth = new __helpers.CSSHelp(document).getStyle('.three')?.getPropertyValue('width');
|
||||
assert(threeWidth === '91%');
|
||||
```
|
||||
|
||||
# --seed--
|
||||
@ -59,7 +57,7 @@ assert(document.querySelector('.canvas').children[2].className.split(' ').includ
|
||||
width: 425px;
|
||||
height: 150px;
|
||||
background-color: #efb762;
|
||||
margin: 20px auto 20px;
|
||||
margin: 20px auto;
|
||||
}
|
||||
|
||||
.two {
|
||||
@ -68,6 +66,11 @@ assert(document.querySelector('.canvas').children[2].className.split(' ').includ
|
||||
background-color: #8f0401;
|
||||
margin: auto;
|
||||
}
|
||||
|
||||
--fcc-editable-region--
|
||||
|
||||
--fcc-editable-region--
|
||||
|
||||
```
|
||||
|
||||
```html
|
||||
@ -83,9 +86,7 @@ assert(document.querySelector('.canvas').children[2].className.split(' ').includ
|
||||
<div class="canvas">
|
||||
<div class="one"></div>
|
||||
<div class="two"></div>
|
||||
--fcc-editable-region--
|
||||
|
||||
--fcc-editable-region--
|
||||
<div class="three"></div>
|
||||
</div>
|
||||
</div>
|
||||
</body>
|
||||
|
||||
@ -1,5 +1,5 @@
|
||||
---
|
||||
id: 60a3e3396c7b40068ad69987
|
||||
id: 60a3e3396c7b40068ad69988
|
||||
title: Step 30
|
||||
challengeType: 0
|
||||
dashedName: step-30
|
||||
@ -7,31 +7,22 @@ dashedName: step-30
|
||||
|
||||
# --description--
|
||||
|
||||
You don't always have to use pixels when sizing an element.
|
||||
|
||||
Create a new rule, `.three`, and set its `width` to `91%`.
|
||||
Set the `height` of `.three` to `28%`.
|
||||
|
||||
# --hints--
|
||||
|
||||
You should use the `.three` selector.
|
||||
You should set the `height` property to `28%`.
|
||||
|
||||
```js
|
||||
const hasThree = new __helpers.CSSHelp(document).getStyle('.three');
|
||||
assert(hasThree);
|
||||
const hasHeight = new __helpers.CSSHelp(document).getCSSRules().some(x => x.style.height === '28%');
|
||||
assert(hasHeight);
|
||||
```
|
||||
|
||||
You should set the `width` property to `91%`.
|
||||
Your `.three` element should have a `height` value of `28%`.
|
||||
|
||||
```js
|
||||
const hasWidth = new __helpers.CSSHelp(document).getCSSRules().some(x => x.style.width === '91%');
|
||||
assert(hasWidth);
|
||||
```
|
||||
|
||||
Your `.three` element should have a `width` value of `91%`.
|
||||
|
||||
```js
|
||||
const threeWidth = new __helpers.CSSHelp(document).getStyle('.three')?.getPropertyValue('width');
|
||||
assert(threeWidth === '91%');
|
||||
const threeHeight = new __helpers.CSSHelp(document).getStyle('.three')?.getPropertyValue('height');
|
||||
assert(threeHeight === '28%');
|
||||
```
|
||||
|
||||
# --seed--
|
||||
@ -57,7 +48,7 @@ assert(threeWidth === '91%');
|
||||
width: 425px;
|
||||
height: 150px;
|
||||
background-color: #efb762;
|
||||
margin: 20px auto 20px;
|
||||
margin: 20px auto;
|
||||
}
|
||||
|
||||
.two {
|
||||
@ -67,10 +58,12 @@ assert(threeWidth === '91%');
|
||||
margin: auto;
|
||||
}
|
||||
|
||||
.three {
|
||||
width: 91%;
|
||||
--fcc-editable-region--
|
||||
|
||||
--fcc-editable-region--
|
||||
|
||||
}
|
||||
```
|
||||
|
||||
```html
|
||||
|
||||
@ -1,5 +1,5 @@
|
||||
---
|
||||
id: 60a3e3396c7b40068ad69988
|
||||
id: 60a3e3396c7b40068ad69989
|
||||
title: Step 31
|
||||
challengeType: 0
|
||||
dashedName: step-31
|
||||
@ -7,22 +7,22 @@ dashedName: step-31
|
||||
|
||||
# --description--
|
||||
|
||||
Set the `height` of `.three` to `28%`.
|
||||
Change the `background-color` of `.three` to `#b20403`.
|
||||
|
||||
# --hints--
|
||||
|
||||
You should set the `height` property to `28%`.
|
||||
You should set the `background-color` property to `#b20403`.
|
||||
|
||||
```js
|
||||
const hasHeight = new __helpers.CSSHelp(document).getCSSRules().some(x => x.style.height === '28%');
|
||||
assert(hasHeight);
|
||||
const hasBackground = new __helpers.CSSHelp(document).getCSSRules().some(x => x.style['background-color'] === 'rgb(178, 4, 3)');
|
||||
assert(hasBackground);
|
||||
```
|
||||
|
||||
Your `.three` element should have a `height` value of `28%`.
|
||||
Your `.three` element should have a `background-color` value of `#b20403`.
|
||||
|
||||
```js
|
||||
const threeHeight = new __helpers.CSSHelp(document).getStyle('.three')?.getPropertyValue('height');
|
||||
assert(threeHeight === '28%');
|
||||
const threeBackground = new __helpers.CSSHelp(document).getStyle('.three')?.getPropertyValue('background-color');
|
||||
assert(threeBackground === 'rgb(178, 4, 3)');
|
||||
```
|
||||
|
||||
# --seed--
|
||||
@ -48,7 +48,7 @@ assert(threeHeight === '28%');
|
||||
width: 425px;
|
||||
height: 150px;
|
||||
background-color: #efb762;
|
||||
margin: 20px auto 20px;
|
||||
margin: 20px auto;
|
||||
}
|
||||
|
||||
.two {
|
||||
@ -60,6 +60,7 @@ assert(threeHeight === '28%');
|
||||
|
||||
.three {
|
||||
width: 91%;
|
||||
height: 28%;
|
||||
--fcc-editable-region--
|
||||
|
||||
--fcc-editable-region--
|
||||
|
||||
@ -1,5 +1,5 @@
|
||||
---
|
||||
id: 60a3e3396c7b40068ad69989
|
||||
id: 60a3e3396c7b40068ad6998a
|
||||
title: Step 32
|
||||
challengeType: 0
|
||||
dashedName: step-32
|
||||
@ -7,22 +7,22 @@ dashedName: step-32
|
||||
|
||||
# --description--
|
||||
|
||||
Change the `background-color` of `.three` to `#b20403`.
|
||||
Center the `.three` element on the canvas by setting its `margin` to `auto`.
|
||||
|
||||
# --hints--
|
||||
|
||||
You should set the `background-color` property to `#b20403`.
|
||||
You should set the `margin` property to `auto`.
|
||||
|
||||
```js
|
||||
const hasBackground = new __helpers.CSSHelp(document).getCSSRules().some(x => x.style['background-color'] === 'rgb(178, 4, 3)');
|
||||
assert(hasBackground);
|
||||
const marginFilter = new __helpers.CSSHelp(document).getCSSRules().filter(x => x.style.margin === 'auto');
|
||||
assert(marginFilter.length === 2);
|
||||
```
|
||||
|
||||
Your `.three` element should have a `background-color` value of `#b20403`.
|
||||
Your `.three` element should have a `margin` value of `auto`.
|
||||
|
||||
```js
|
||||
const threeBackground = new __helpers.CSSHelp(document).getStyle('.three')?.getPropertyValue('background-color');
|
||||
assert(threeBackground === 'rgb(178, 4, 3)');
|
||||
const threeMargin = new __helpers.CSSHelp(document).getStyle('.three')?.getPropertyValue('margin');
|
||||
assert(threeMargin === 'auto');
|
||||
```
|
||||
|
||||
# --seed--
|
||||
@ -48,7 +48,7 @@ assert(threeBackground === 'rgb(178, 4, 3)');
|
||||
width: 425px;
|
||||
height: 150px;
|
||||
background-color: #efb762;
|
||||
margin: 20px auto 20px;
|
||||
margin: 20px auto;
|
||||
}
|
||||
|
||||
.two {
|
||||
@ -61,6 +61,7 @@ assert(threeBackground === 'rgb(178, 4, 3)');
|
||||
.three {
|
||||
width: 91%;
|
||||
height: 28%;
|
||||
background-color: #b20403;
|
||||
--fcc-editable-region--
|
||||
|
||||
--fcc-editable-region--
|
||||
|
||||
@ -1,5 +1,5 @@
|
||||
---
|
||||
id: 60a3e3396c7b40068ad6998a
|
||||
id: 60a3e3396c7b40068ad6998b
|
||||
title: Step 33
|
||||
challengeType: 0
|
||||
dashedName: step-33
|
||||
@ -7,22 +7,26 @@ dashedName: step-33
|
||||
|
||||
# --description--
|
||||
|
||||
Center the `.three` element on the canvas by setting its `margin` to `auto`.
|
||||
It's helpful to have your margins push in one direction.
|
||||
|
||||
In this case, the bottom margin of the `.one` element pushes `.two` down 20 pixels.
|
||||
|
||||
In the `.two` selector, use `margin` shorthand property to set top margin to `0`, horizontal margin to `auto`, and bottom margin to `20px`. This will remove its top margin, horizontally center it, and set its bottom margin to 20 pixels.
|
||||
|
||||
# --hints--
|
||||
|
||||
You should set the `margin` property to `auto`.
|
||||
You should set the `margin` property to `0 auto 20px`.
|
||||
|
||||
```js
|
||||
const marginFilter = new __helpers.CSSHelp(document).getCSSRules().filter(x => x.style.margin === 'auto');
|
||||
assert(marginFilter.length === 2);
|
||||
const hasMargin = new __helpers.CSSHelp(document).getCSSRules().some(x => x.style.margin === '0px auto 20px');
|
||||
assert(hasMargin);
|
||||
```
|
||||
|
||||
Your `.three` element should have a `margin` value of `auto`.
|
||||
Your `.two` element should have a `margin` value of `0 auto 20px`.
|
||||
|
||||
```js
|
||||
const threeMargin = new __helpers.CSSHelp(document).getStyle('.three')?.getPropertyValue('margin');
|
||||
assert(threeMargin === 'auto');
|
||||
const twoMargin = new __helpers.CSSHelp(document).getStyle('.two')?.getPropertyValue('margin');
|
||||
assert(twoMargin === '0px auto 20px');
|
||||
```
|
||||
|
||||
# --seed--
|
||||
@ -48,23 +52,23 @@ assert(threeMargin === 'auto');
|
||||
width: 425px;
|
||||
height: 150px;
|
||||
background-color: #efb762;
|
||||
margin: 20px auto 20px;
|
||||
margin: 20px auto;
|
||||
}
|
||||
|
||||
.two {
|
||||
width: 475px;
|
||||
height: 200px;
|
||||
background-color: #8f0401;
|
||||
--fcc-editable-region--
|
||||
margin: auto;
|
||||
--fcc-editable-region--
|
||||
}
|
||||
|
||||
.three {
|
||||
width: 91%;
|
||||
height: 28%;
|
||||
background-color: #b20403;
|
||||
--fcc-editable-region--
|
||||
|
||||
--fcc-editable-region--
|
||||
margin: auto;
|
||||
}
|
||||
```
|
||||
|
||||
|
||||
@ -1,5 +1,5 @@
|
||||
---
|
||||
id: 60a3e3396c7b40068ad6998b
|
||||
id: 60a3e3396c7b40068ad6998c
|
||||
title: Step 34
|
||||
challengeType: 0
|
||||
dashedName: step-34
|
||||
@ -7,26 +7,24 @@ dashedName: step-34
|
||||
|
||||
# --description--
|
||||
|
||||
It's helpful to have your margins push in one direction.
|
||||
The colors and shapes of your painting are too sharp to pass as a Rothko.
|
||||
|
||||
In this case, the bottom margin of the `.one` element pushes `.two` down 20 pixels.
|
||||
|
||||
In the `.two` selector, use `margin` shorthand property to set top margin to `0`, horizontal margin to `auto`, and bottom margin to `20px`. This will remove its top margin, horizontally center it, and set its bottom margin to 20 pixels.
|
||||
Use the `filter` property to `blur` the painting by `2px` in the `.canvas` element.
|
||||
|
||||
# --hints--
|
||||
|
||||
You should set the `margin` property to `0 auto 20px`.
|
||||
You should set the `filter` property to `blur(2px)`.
|
||||
|
||||
```js
|
||||
const hasMargin = new __helpers.CSSHelp(document).getCSSRules().some(x => x.style.margin === '0px auto 20px');
|
||||
assert(hasMargin);
|
||||
const hasFilter = new __helpers.CSSHelp(document).getCSSRules().some(x => x.style.filter === 'blur(2px)');
|
||||
assert(hasFilter);
|
||||
```
|
||||
|
||||
Your `.two` element should have a `margin` value of `0 auto 20px`.
|
||||
Your `.canvas` element should have a `filter` value of `blur(2px)`.
|
||||
|
||||
```js
|
||||
const twoMargin = new __helpers.CSSHelp(document).getStyle('.two')?.getPropertyValue('margin');
|
||||
assert(twoMargin === '0px auto 20px');
|
||||
const canvasFilter = new __helpers.CSSHelp(document).getStyle('.canvas')?.getPropertyValue('filter');
|
||||
assert(canvasFilter === 'blur(2px)');
|
||||
```
|
||||
|
||||
# --seed--
|
||||
@ -39,6 +37,9 @@ assert(twoMargin === '0px auto 20px');
|
||||
height: 600px;
|
||||
background-color: #4d0f00;
|
||||
overflow: hidden;
|
||||
--fcc-editable-region--
|
||||
|
||||
--fcc-editable-region--
|
||||
}
|
||||
|
||||
.frame {
|
||||
@ -52,16 +53,14 @@ assert(twoMargin === '0px auto 20px');
|
||||
width: 425px;
|
||||
height: 150px;
|
||||
background-color: #efb762;
|
||||
margin: 20px auto 20px;
|
||||
margin: 20px auto;
|
||||
}
|
||||
|
||||
.two {
|
||||
width: 475px;
|
||||
height: 200px;
|
||||
background-color: #8f0401;
|
||||
--fcc-editable-region--
|
||||
margin: auto;
|
||||
--fcc-editable-region--
|
||||
margin: 0 auto 20px;
|
||||
}
|
||||
|
||||
.three {
|
||||
|
||||
@ -1,5 +1,5 @@
|
||||
---
|
||||
id: 60a3e3396c7b40068ad6998c
|
||||
id: 60a3e3396c7b40068ad6998d
|
||||
title: Step 35
|
||||
challengeType: 0
|
||||
dashedName: step-35
|
||||
@ -7,24 +7,46 @@ dashedName: step-35
|
||||
|
||||
# --description--
|
||||
|
||||
The colors and shapes of your painting are too sharp to pass as a Rothko.
|
||||
Create a rule that targets both `.one` and `.two` and increase their `blur` effect by 1 pixel.
|
||||
|
||||
Use the `filter` property to `blur` the painting by `2px` in the `.canvas` element.
|
||||
Here's an example of a rule that increases the `blur` of two elements:
|
||||
|
||||
```css
|
||||
h1, p {
|
||||
filter: blur(3px);
|
||||
}
|
||||
```
|
||||
|
||||
# --hints--
|
||||
|
||||
You should set the `filter` property to `blur(2px)`.
|
||||
You should have a `.one, .two` selector.
|
||||
|
||||
```js
|
||||
const hasFilter = new __helpers.CSSHelp(document).getCSSRules().some(x => x.style.filter === 'blur(2px)');
|
||||
assert(hasFilter);
|
||||
const oneTwo = new __helpers.CSSHelp(document).getStyle('.one, .two');
|
||||
assert(oneTwo);
|
||||
```
|
||||
|
||||
Your `.canvas` element should have a `filter` value of `blur(2px)`.
|
||||
You should set the `filter` property to `blur(1px)`.
|
||||
|
||||
```js
|
||||
const canvasFilter = new __helpers.CSSHelp(document).getStyle('.canvas')?.getPropertyValue('filter');
|
||||
assert(canvasFilter === 'blur(2px)');
|
||||
const hasFilter = new __helpers.CSSHelp(document).getCSSRules().some(x => x.style.filter === 'blur(1px)');
|
||||
assert(hasFilter)
|
||||
```
|
||||
|
||||
Your `.one` element should have a `filter` value of `blur(1px)`.
|
||||
|
||||
```js
|
||||
const one = document.querySelector('.one');
|
||||
const oneFilter = getComputedStyle(one).filter;
|
||||
assert(oneFilter === 'blur(1px)');
|
||||
```
|
||||
|
||||
Your `.two` element should have a filter value of `blur(1px)`.
|
||||
|
||||
```js
|
||||
const two = document.querySelector('.two');
|
||||
const twoFilter = getComputedStyle(two).filter;
|
||||
assert(twoFilter === 'blur(1px)');
|
||||
```
|
||||
|
||||
# --seed--
|
||||
@ -37,9 +59,7 @@ assert(canvasFilter === 'blur(2px)');
|
||||
height: 600px;
|
||||
background-color: #4d0f00;
|
||||
overflow: hidden;
|
||||
--fcc-editable-region--
|
||||
|
||||
--fcc-editable-region--
|
||||
filter: blur(2px);
|
||||
}
|
||||
|
||||
.frame {
|
||||
@ -53,7 +73,7 @@ assert(canvasFilter === 'blur(2px)');
|
||||
width: 425px;
|
||||
height: 150px;
|
||||
background-color: #efb762;
|
||||
margin: 20px auto 20px;
|
||||
margin: 20px auto;
|
||||
}
|
||||
|
||||
.two {
|
||||
@ -63,6 +83,10 @@ assert(canvasFilter === 'blur(2px)');
|
||||
margin: 0 auto 20px;
|
||||
}
|
||||
|
||||
--fcc-editable-region--
|
||||
|
||||
--fcc-editable-region--
|
||||
|
||||
.three {
|
||||
width: 91%;
|
||||
height: 28%;
|
||||
|
||||
@ -1,5 +1,5 @@
|
||||
---
|
||||
id: 60a3e3396c7b40068ad6998d
|
||||
id: 60a3e3396c7b40068ad6998e
|
||||
title: Step 36
|
||||
challengeType: 0
|
||||
dashedName: step-36
|
||||
@ -7,46 +7,22 @@ dashedName: step-36
|
||||
|
||||
# --description--
|
||||
|
||||
Create a rule that targets both `.one` and `.two` and increase their `blur` effect by 1 pixel.
|
||||
|
||||
Here's an example of a rule that increases the `blur` of two elements:
|
||||
|
||||
```css
|
||||
h1, p {
|
||||
filter: blur(3px);
|
||||
}
|
||||
```
|
||||
Increase the `blur` of `.three` by 2 pixels.
|
||||
|
||||
# --hints--
|
||||
|
||||
You should have a `.one, .two` selector.
|
||||
You should set the `filter` property to `blur(2px)`.
|
||||
|
||||
```js
|
||||
const oneTwo = new __helpers.CSSHelp(document).getStyle('.one, .two');
|
||||
assert(oneTwo);
|
||||
const filterFilter = new __helpers.CSSHelp(document).getCSSRules().filter(x => x.style.filter === 'blur(2px)');
|
||||
assert(filterFilter.length === 2);
|
||||
```
|
||||
|
||||
You should set the `filter` property to `blur(1px)`.
|
||||
Your `.three` element should have a `filter` value of `blur(2px)`.
|
||||
|
||||
```js
|
||||
const hasFilter = new __helpers.CSSHelp(document).getCSSRules().some(x => x.style.filter === 'blur(1px)');
|
||||
assert(hasFilter)
|
||||
```
|
||||
|
||||
Your `.one` element should have a `filter` value of `blur(1px)`.
|
||||
|
||||
```js
|
||||
const one = document.querySelector('.one');
|
||||
const oneFilter = getComputedStyle(one).filter;
|
||||
assert(oneFilter === 'blur(1px)');
|
||||
```
|
||||
|
||||
Your `.two` element should have a filter value of `blur(1px)`.
|
||||
|
||||
```js
|
||||
const two = document.querySelector('.two');
|
||||
const twoFilter = getComputedStyle(two).filter;
|
||||
assert(twoFilter === 'blur(1px)');
|
||||
const threeFilter = new __helpers.CSSHelp(document).getStyle('.three')?.getPropertyValue('filter');
|
||||
assert(threeFilter === 'blur(2px)');
|
||||
```
|
||||
|
||||
# --seed--
|
||||
@ -73,7 +49,7 @@ assert(twoFilter === 'blur(1px)');
|
||||
width: 425px;
|
||||
height: 150px;
|
||||
background-color: #efb762;
|
||||
margin: 20px auto 20px;
|
||||
margin: 20px auto;
|
||||
}
|
||||
|
||||
.two {
|
||||
@ -83,15 +59,18 @@ assert(twoFilter === 'blur(1px)');
|
||||
margin: 0 auto 20px;
|
||||
}
|
||||
|
||||
--fcc-editable-region--
|
||||
|
||||
--fcc-editable-region--
|
||||
.one, .two {
|
||||
filter: blur(1px);
|
||||
}
|
||||
|
||||
.three {
|
||||
width: 91%;
|
||||
height: 28%;
|
||||
background-color: #b20403;
|
||||
margin: auto;
|
||||
--fcc-editable-region--
|
||||
|
||||
--fcc-editable-region--
|
||||
}
|
||||
```
|
||||
|
||||
|
||||
@ -1,5 +1,5 @@
|
||||
---
|
||||
id: 60a3e3396c7b40068ad6998e
|
||||
id: 60a3e3396c7b40068ad6998f
|
||||
title: Step 37
|
||||
challengeType: 0
|
||||
dashedName: step-37
|
||||
@ -7,22 +7,24 @@ dashedName: step-37
|
||||
|
||||
# --description--
|
||||
|
||||
Increase the `blur` of `.three` by 2 pixels.
|
||||
The rectangles are too small and their edges don't have the soft quality of a painting.
|
||||
|
||||
Increase the area and soften the edges of `.one` by setting its `box-shadow` to `0 0 3px 3px #efb762`.
|
||||
|
||||
# --hints--
|
||||
|
||||
You should set the `filter` property to `blur(2px)`.
|
||||
You should set the `box-shadow` property to `0 0 3px 3px #efb762`.
|
||||
|
||||
```js
|
||||
const filterFilter = new __helpers.CSSHelp(document).getCSSRules().filter(x => x.style.filter === 'blur(2px)');
|
||||
assert(filterFilter.length === 2);
|
||||
const hasBoxShadow = new __helpers.CSSHelp(document).getCSSRules().some(x => x.style['box-shadow'] === 'rgb(239, 183, 98) 0px 0px 3px 3px');
|
||||
assert(hasBoxShadow);
|
||||
```
|
||||
|
||||
Your `.three` element should have a `filter` value of `blur(2px)`.
|
||||
Your `.one` element should have a `box-shadow` value of `0 0 3px 3px #efb762`.
|
||||
|
||||
```js
|
||||
const threeFilter = new __helpers.CSSHelp(document).getStyle('.three')?.getPropertyValue('filter');
|
||||
assert(threeFilter === 'blur(2px)');
|
||||
const oneShadow = new __helpers.CSSHelp(document).getStyle('.one')?.getPropertyValue('box-shadow');
|
||||
assert(oneShadow === 'rgb(239, 183, 98) 0px 0px 3px 3px');
|
||||
```
|
||||
|
||||
# --seed--
|
||||
@ -49,7 +51,10 @@ assert(threeFilter === 'blur(2px)');
|
||||
width: 425px;
|
||||
height: 150px;
|
||||
background-color: #efb762;
|
||||
margin: 20px auto 20px;
|
||||
margin: 20px auto;
|
||||
--fcc-editable-region--
|
||||
|
||||
--fcc-editable-region--
|
||||
}
|
||||
|
||||
.two {
|
||||
@ -68,9 +73,7 @@ assert(threeFilter === 'blur(2px)');
|
||||
height: 28%;
|
||||
background-color: #b20403;
|
||||
margin: auto;
|
||||
--fcc-editable-region--
|
||||
|
||||
--fcc-editable-region--
|
||||
filter: blur(2px);
|
||||
}
|
||||
```
|
||||
|
||||
|
||||
@ -1,5 +1,5 @@
|
||||
---
|
||||
id: 60a3e3396c7b40068ad6998f
|
||||
id: 60a3e3396c7b40068ad69990
|
||||
title: Step 38
|
||||
challengeType: 0
|
||||
dashedName: step-38
|
||||
@ -7,24 +7,22 @@ dashedName: step-38
|
||||
|
||||
# --description--
|
||||
|
||||
The rectangles are too small and their edges don't have the soft quality of a painting.
|
||||
|
||||
Increase the area and soften the edges of `.one` by setting its `box-shadow` to `0 0 3px 3px #efb762`.
|
||||
Use the same `box-shadow` declaration for `.two`, but change the color from `#efb762` to `#8f0401`.
|
||||
|
||||
# --hints--
|
||||
|
||||
You should set the `box-shadow` property to `0 0 3px 3px #efb762`.
|
||||
You should set the `box-shadow` property to `0 0 3px 3px #8f0401`.
|
||||
|
||||
```js
|
||||
const hasBoxShadow = new __helpers.CSSHelp(document).getCSSRules().some(x => x.style['box-shadow'] === 'rgb(239, 183, 98) 0px 0px 3px 3px');
|
||||
const hasBoxShadow = new __helpers.CSSHelp(document).getCSSRules().some(x => x.style['box-shadow'] === 'rgb(143, 4, 1) 0px 0px 3px 3px');
|
||||
assert(hasBoxShadow);
|
||||
```
|
||||
|
||||
Your `.one` element should have a `box-shadow` value of `0 0 3px 3px #efb762`.
|
||||
Your `.two` element should have a `box-shadow` value of `0 0 3px 3px #8f0401`.
|
||||
|
||||
```js
|
||||
const oneShadow = new __helpers.CSSHelp(document).getStyle('.one')?.getPropertyValue('box-shadow');
|
||||
assert(oneShadow === 'rgb(239, 183, 98) 0px 0px 3px 3px');
|
||||
const twoShadow = new __helpers.CSSHelp(document).getStyle('.two')?.getPropertyValue('box-shadow');
|
||||
assert(twoShadow === 'rgb(143, 4, 1) 0px 0px 3px 3px');
|
||||
```
|
||||
|
||||
# --seed--
|
||||
@ -51,10 +49,8 @@ assert(oneShadow === 'rgb(239, 183, 98) 0px 0px 3px 3px');
|
||||
width: 425px;
|
||||
height: 150px;
|
||||
background-color: #efb762;
|
||||
margin: 20px auto 20px;
|
||||
--fcc-editable-region--
|
||||
|
||||
--fcc-editable-region--
|
||||
margin: 20px auto;
|
||||
box-shadow: 0 0 3px 3px #efb762;
|
||||
}
|
||||
|
||||
.two {
|
||||
@ -62,6 +58,9 @@ assert(oneShadow === 'rgb(239, 183, 98) 0px 0px 3px 3px');
|
||||
height: 200px;
|
||||
background-color: #8f0401;
|
||||
margin: 0 auto 20px;
|
||||
--fcc-editable-region--
|
||||
|
||||
--fcc-editable-region--
|
||||
}
|
||||
|
||||
.one, .two {
|
||||
|
||||
@ -1,5 +1,5 @@
|
||||
---
|
||||
id: 60a3e3396c7b40068ad69990
|
||||
id: 60a3e3396c7b40068ad69991
|
||||
title: Step 39
|
||||
challengeType: 0
|
||||
dashedName: step-39
|
||||
@ -7,22 +7,22 @@ dashedName: step-39
|
||||
|
||||
# --description--
|
||||
|
||||
Use the same `box-shadow` declaration for `.two`, but change the color from `#efb762` to `#8f0401`.
|
||||
Add a `box-shadow` to `.three` with the values `0 0 5px 5px #b20403`.
|
||||
|
||||
# --hints--
|
||||
|
||||
You should set the `box-shadow` property to `0 0 3px 3px #8f0401`.
|
||||
You should set the `box-shadow` property to `0 0 5px 5px #b20403`.
|
||||
|
||||
```js
|
||||
const hasBoxShadow = new __helpers.CSSHelp(document).getCSSRules().some(x => x.style['box-shadow'] === 'rgb(143, 4, 1) 0px 0px 3px 3px');
|
||||
const hasBoxShadow = new __helpers.CSSHelp(document).getCSSRules().some(x => x.style['box-shadow'] === 'rgb(178, 4, 3) 0px 0px 5px 5px');
|
||||
assert(hasBoxShadow);
|
||||
```
|
||||
|
||||
Your `.two` element should have a `box-shadow` value of `0 0 3px 3px #8f0401`.
|
||||
Your `.three` element should have a `box-shadow` value of `0 0 5px 5px #b20403`.
|
||||
|
||||
```js
|
||||
const twoShadow = new __helpers.CSSHelp(document).getStyle('.two')?.getPropertyValue('box-shadow');
|
||||
assert(twoShadow === 'rgb(143, 4, 1) 0px 0px 3px 3px');
|
||||
const threeShadow = new __helpers.CSSHelp(document).getStyle('.three')?.getPropertyValue('box-shadow');
|
||||
assert(threeShadow === 'rgb(178, 4, 3) 0px 0px 5px 5px');
|
||||
```
|
||||
|
||||
# --seed--
|
||||
@ -49,7 +49,7 @@ assert(twoShadow === 'rgb(143, 4, 1) 0px 0px 3px 3px');
|
||||
width: 425px;
|
||||
height: 150px;
|
||||
background-color: #efb762;
|
||||
margin: 20px auto 20px;
|
||||
margin: 20px auto;
|
||||
box-shadow: 0 0 3px 3px #efb762;
|
||||
}
|
||||
|
||||
@ -58,9 +58,7 @@ assert(twoShadow === 'rgb(143, 4, 1) 0px 0px 3px 3px');
|
||||
height: 200px;
|
||||
background-color: #8f0401;
|
||||
margin: 0 auto 20px;
|
||||
--fcc-editable-region--
|
||||
|
||||
--fcc-editable-region--
|
||||
box-shadow: 0 0 3px 3px #8f0401;
|
||||
}
|
||||
|
||||
.one, .two {
|
||||
@ -73,6 +71,9 @@ assert(twoShadow === 'rgb(143, 4, 1) 0px 0px 3px 3px');
|
||||
background-color: #b20403;
|
||||
margin: auto;
|
||||
filter: blur(2px);
|
||||
--fcc-editable-region--
|
||||
|
||||
--fcc-editable-region--
|
||||
}
|
||||
```
|
||||
|
||||
|
||||
@ -1,5 +1,5 @@
|
||||
---
|
||||
id: 60a3e3396c7b40068ad69991
|
||||
id: 60a3e3396c7b40068ad69992
|
||||
title: Step 40
|
||||
challengeType: 0
|
||||
dashedName: step-40
|
||||
@ -7,22 +7,24 @@ dashedName: step-40
|
||||
|
||||
# --description--
|
||||
|
||||
Add a `box-shadow` to `.three` with the values `0 0 5px 5px #b20403`.
|
||||
The corners of each rectangle are still too sharp.
|
||||
|
||||
Round each corner of the `.one` element by 9 pixels, using the `border-radius` property.
|
||||
|
||||
# --hints--
|
||||
|
||||
You should set the `box-shadow` property to `0 0 5px 5px #b20403`.
|
||||
You should set the `border-radius` property to `9px`.
|
||||
|
||||
```js
|
||||
const hasBoxShadow = new __helpers.CSSHelp(document).getCSSRules().some(x => x.style['box-shadow'] === 'rgb(178, 4, 3) 0px 0px 5px 5px');
|
||||
assert(hasBoxShadow);
|
||||
const hasBorderRadius = new __helpers.CSSHelp(document).getCSSRules().some(x => x.style['border-radius'] === '9px');
|
||||
assert(hasBorderRadius);
|
||||
```
|
||||
|
||||
Your `.three` element should have a `box-shadow` value of `0 0 5px 5px #b20403`.
|
||||
Your `.one` element should have a `border-radius` value of `9px`.
|
||||
|
||||
```js
|
||||
const threeShadow = new __helpers.CSSHelp(document).getStyle('.three')?.getPropertyValue('box-shadow');
|
||||
assert(threeShadow === 'rgb(178, 4, 3) 0px 0px 5px 5px');
|
||||
const oneBorderRadius =new __helpers.CSSHelp(document).getStyle('.one')?.getPropertyValue('border-radius');
|
||||
assert(oneBorderRadius === '9px');
|
||||
```
|
||||
|
||||
# --seed--
|
||||
@ -49,8 +51,11 @@ assert(threeShadow === 'rgb(178, 4, 3) 0px 0px 5px 5px');
|
||||
width: 425px;
|
||||
height: 150px;
|
||||
background-color: #efb762;
|
||||
margin: 20px auto 20px;
|
||||
margin: 20px auto;
|
||||
box-shadow: 0 0 3px 3px #efb762;
|
||||
--fcc-editable-region--
|
||||
|
||||
--fcc-editable-region--
|
||||
}
|
||||
|
||||
.two {
|
||||
@ -71,9 +76,7 @@ assert(threeShadow === 'rgb(178, 4, 3) 0px 0px 5px 5px');
|
||||
background-color: #b20403;
|
||||
margin: auto;
|
||||
filter: blur(2px);
|
||||
--fcc-editable-region--
|
||||
|
||||
--fcc-editable-region--
|
||||
box-shadow: 0 0 5px 5px #b20403;
|
||||
}
|
||||
```
|
||||
|
||||
|
||||
@ -1,5 +1,5 @@
|
||||
---
|
||||
id: 60a3e3396c7b40068ad69992
|
||||
id: 60a3e3396c7b40068ad69993
|
||||
title: Step 41
|
||||
challengeType: 0
|
||||
dashedName: step-41
|
||||
@ -7,24 +7,22 @@ dashedName: step-41
|
||||
|
||||
# --description--
|
||||
|
||||
The corners of each rectangle are still too sharp.
|
||||
|
||||
Round each corner of the `.one` element by 9 pixels, using the `border-radius` property.
|
||||
Use the `border-radius` property on the `.two` selector, to set its top-left and bottom-right radii to `8px`, and top-right and bottom-left radii to `10px`.
|
||||
|
||||
# --hints--
|
||||
|
||||
You should set the `border-radius` property to `9px`.
|
||||
You should set the `border-radius` property to `8px 10px`.
|
||||
|
||||
```js
|
||||
const hasBorderRadius = new __helpers.CSSHelp(document).getCSSRules().some(x => x.style['border-radius'] === '9px');
|
||||
const hasBorderRadius = new __helpers.CSSHelp(document).getCSSRules().some(x => x.style['border-radius'] === '8px 10px');
|
||||
assert(hasBorderRadius);
|
||||
```
|
||||
|
||||
Your `.one` element should have a `border-radius` value of `9px`.
|
||||
Your `.two` element should have a `border-radius` value of `8px 10px`.
|
||||
|
||||
```js
|
||||
const oneBorderRadius =new __helpers.CSSHelp(document).getStyle('.one')?.getPropertyValue('border-radius');
|
||||
assert(oneBorderRadius === '9px');
|
||||
const twoBorderRadius = new __helpers.CSSHelp(document).getStyle('.two')?.getPropertyValue('border-radius');
|
||||
assert(twoBorderRadius === '8px 10px');
|
||||
```
|
||||
|
||||
# --seed--
|
||||
@ -51,11 +49,9 @@ assert(oneBorderRadius === '9px');
|
||||
width: 425px;
|
||||
height: 150px;
|
||||
background-color: #efb762;
|
||||
margin: 20px auto 20px;
|
||||
margin: 20px auto;
|
||||
box-shadow: 0 0 3px 3px #efb762;
|
||||
--fcc-editable-region--
|
||||
|
||||
--fcc-editable-region--
|
||||
border-radius: 9px;
|
||||
}
|
||||
|
||||
.two {
|
||||
@ -64,6 +60,9 @@ assert(oneBorderRadius === '9px');
|
||||
background-color: #8f0401;
|
||||
margin: 0 auto 20px;
|
||||
box-shadow: 0 0 3px 3px #8f0401;
|
||||
--fcc-editable-region--
|
||||
|
||||
--fcc-editable-region--
|
||||
}
|
||||
|
||||
.one, .two {
|
||||
|
||||
@ -1,5 +1,5 @@
|
||||
---
|
||||
id: 60a3e3396c7b40068ad69993
|
||||
id: 60a3e3396c7b40068ad69994
|
||||
title: Step 42
|
||||
challengeType: 0
|
||||
dashedName: step-42
|
||||
@ -7,22 +7,24 @@ dashedName: step-42
|
||||
|
||||
# --description--
|
||||
|
||||
Use the `border-radius` property on the `.two` selector, to set its top-left and bottom-right radii to `8px`, and top-right and bottom-left radii to `10px`.
|
||||
The `border-radius` property accepts up to four values to round the top-left, top-right, bottom-right, and bottom-left corners.
|
||||
|
||||
Round the top-left corner of `.three` by 30 pixels, the top-right by 25 pixels, the bottom-right by 60 pixels, and bottom-left by 12 pixels.
|
||||
|
||||
# --hints--
|
||||
|
||||
You should set the `border-radius` property to `8px 10px`.
|
||||
You should set the `border-radius` property to `30px 25px 60px 12px`.
|
||||
|
||||
```js
|
||||
const hasBorderRadius = new __helpers.CSSHelp(document).getCSSRules().some(x => x.style['border-radius'] === '8px 10px');
|
||||
const hasBorderRadius = new __helpers.CSSHelp(document).getCSSRules().some(x => x.style['border-radius'] === '30px 25px 60px 12px');
|
||||
assert(hasBorderRadius);
|
||||
```
|
||||
|
||||
Your `.two` element should have a `border-radius` value of `8px 10px`.
|
||||
Your `.three` element should have a `border-radius` value of `30px 25px 60px 12px`.
|
||||
|
||||
```js
|
||||
const twoBorderRadius = new __helpers.CSSHelp(document).getStyle('.two')?.getPropertyValue('border-radius');
|
||||
assert(twoBorderRadius === '8px 10px');
|
||||
const threeBorderRadius = new __helpers.CSSHelp(document).getStyle('.three')?.getPropertyValue('border-radius');
|
||||
assert(threeBorderRadius === '30px 25px 60px 12px');
|
||||
```
|
||||
|
||||
# --seed--
|
||||
@ -49,7 +51,7 @@ assert(twoBorderRadius === '8px 10px');
|
||||
width: 425px;
|
||||
height: 150px;
|
||||
background-color: #efb762;
|
||||
margin: 20px auto 20px;
|
||||
margin: 20px auto;
|
||||
box-shadow: 0 0 3px 3px #efb762;
|
||||
border-radius: 9px;
|
||||
}
|
||||
@ -60,9 +62,7 @@ assert(twoBorderRadius === '8px 10px');
|
||||
background-color: #8f0401;
|
||||
margin: 0 auto 20px;
|
||||
box-shadow: 0 0 3px 3px #8f0401;
|
||||
--fcc-editable-region--
|
||||
|
||||
--fcc-editable-region--
|
||||
border-radius: 8px 10px;
|
||||
}
|
||||
|
||||
.one, .two {
|
||||
@ -76,6 +76,9 @@ assert(twoBorderRadius === '8px 10px');
|
||||
margin: auto;
|
||||
filter: blur(2px);
|
||||
box-shadow: 0 0 5px 5px #b20403;
|
||||
--fcc-editable-region--
|
||||
|
||||
--fcc-editable-region--
|
||||
}
|
||||
```
|
||||
|
||||
|
||||
@ -1,5 +1,5 @@
|
||||
---
|
||||
id: 60a3e3396c7b40068ad69994
|
||||
id: 60a3e3396c7b40068ad69995
|
||||
title: Step 43
|
||||
challengeType: 0
|
||||
dashedName: step-43
|
||||
@ -7,24 +7,24 @@ dashedName: step-43
|
||||
|
||||
# --description--
|
||||
|
||||
The `border-radius` property accepts up to four values to round the top-left, top-right, bottom-right, and bottom-left corners.
|
||||
Rotate each rectangle to give them more of an imperfect, hand-painted look.
|
||||
|
||||
Round the top-left corner of `.three` by 30 pixels, the top-right by 25 pixels, the bottom-right by 60 pixels, and bottom-left by 12 pixels.
|
||||
Use the `transform` property on the `.one` selector to `rotate` it counter clockwise by 0.6 degrees.
|
||||
|
||||
# --hints--
|
||||
|
||||
You should set the `border-radius` property to `30px 25px 60px 12px`.
|
||||
You should set the `transform` property to `rotate(-0.6deg)`.
|
||||
|
||||
```js
|
||||
const hasBorderRadius = new __helpers.CSSHelp(document).getCSSRules().some(x => x.style['border-radius'] === '30px 25px 60px 12px');
|
||||
assert(hasBorderRadius);
|
||||
const hasTransform = new __helpers.CSSHelp(document).getCSSRules().some(x => x.style.transform === 'rotate(-0.6deg)');
|
||||
assert(hasTransform);
|
||||
```
|
||||
|
||||
Your `.three` element should have a `border-radius` value of `30px 25px 60px 12px`.
|
||||
Your `.one` element should have a `transform` value of `rotate(-0.6deg)`.
|
||||
|
||||
```js
|
||||
const threeBorderRadius = new __helpers.CSSHelp(document).getStyle('.three')?.getPropertyValue('border-radius');
|
||||
assert(threeBorderRadius === '30px 25px 60px 12px');
|
||||
const oneTransform = new __helpers.CSSHelp(document).getStyle('.one')?.getPropertyValue('transform');
|
||||
assert(oneTransform === 'rotate(-0.6deg)');
|
||||
```
|
||||
|
||||
# --seed--
|
||||
@ -51,9 +51,12 @@ assert(threeBorderRadius === '30px 25px 60px 12px');
|
||||
width: 425px;
|
||||
height: 150px;
|
||||
background-color: #efb762;
|
||||
margin: 20px auto 20px;
|
||||
margin: 20px auto;
|
||||
box-shadow: 0 0 3px 3px #efb762;
|
||||
border-radius: 9px;
|
||||
--fcc-editable-region--
|
||||
|
||||
--fcc-editable-region--
|
||||
}
|
||||
|
||||
.two {
|
||||
@ -76,9 +79,7 @@ assert(threeBorderRadius === '30px 25px 60px 12px');
|
||||
margin: auto;
|
||||
filter: blur(2px);
|
||||
box-shadow: 0 0 5px 5px #b20403;
|
||||
--fcc-editable-region--
|
||||
|
||||
--fcc-editable-region--
|
||||
border-radius: 30px 25px 60px 12px;
|
||||
}
|
||||
```
|
||||
|
||||
|
||||
@ -1,5 +1,5 @@
|
||||
---
|
||||
id: 60a3e3396c7b40068ad69995
|
||||
id: 60a3e3396c7b40068ad69996
|
||||
title: Step 44
|
||||
challengeType: 0
|
||||
dashedName: step-44
|
||||
@ -7,24 +7,22 @@ dashedName: step-44
|
||||
|
||||
# --description--
|
||||
|
||||
Rotate each rectangle to give them more of an imperfect, hand-painted look.
|
||||
|
||||
Use the `transform` property on the `.one` selector to `rotate` it counter clockwise by 0.6 degrees.
|
||||
Rotate the `.two` element clockwise by 0.4 degrees.
|
||||
|
||||
# --hints--
|
||||
|
||||
You should set the `transform` property to `rotate(-0.6deg)`.
|
||||
You should set the `transform` property to `rotate(0.4deg)`.
|
||||
|
||||
```js
|
||||
const hasTransform = new __helpers.CSSHelp(document).getCSSRules().some(x => x.style.transform === 'rotate(-0.6deg)');
|
||||
const hasTransform = new __helpers.CSSHelp(document).getCSSRules().some(x => x.style.transform === 'rotate(0.4deg)');
|
||||
assert(hasTransform);
|
||||
```
|
||||
|
||||
Your `.one` element should have a `transform` value of `rotate(-0.6deg)`.
|
||||
Your `.two` element should have a `transform` value of `rotate(0.4deg)`.
|
||||
|
||||
```js
|
||||
const oneTransform = new __helpers.CSSHelp(document).getStyle('.one')?.getPropertyValue('transform');
|
||||
assert(oneTransform === 'rotate(-0.6deg)');
|
||||
const twoTransform = new __helpers.CSSHelp(document).getStyle('.two')?.getPropertyValue('transform');
|
||||
assert(twoTransform === 'rotate(0.4deg)');
|
||||
```
|
||||
|
||||
# --seed--
|
||||
@ -51,12 +49,10 @@ assert(oneTransform === 'rotate(-0.6deg)');
|
||||
width: 425px;
|
||||
height: 150px;
|
||||
background-color: #efb762;
|
||||
margin: 20px auto 20px;
|
||||
margin: 20px auto;
|
||||
box-shadow: 0 0 3px 3px #efb762;
|
||||
border-radius: 9px;
|
||||
--fcc-editable-region--
|
||||
|
||||
--fcc-editable-region--
|
||||
transform: rotate(-0.6deg);
|
||||
}
|
||||
|
||||
.two {
|
||||
@ -66,6 +62,9 @@ assert(oneTransform === 'rotate(-0.6deg)');
|
||||
margin: 0 auto 20px;
|
||||
box-shadow: 0 0 3px 3px #8f0401;
|
||||
border-radius: 8px 10px;
|
||||
--fcc-editable-region--
|
||||
|
||||
--fcc-editable-region--
|
||||
}
|
||||
|
||||
.one, .two {
|
||||
|
||||
@ -1,5 +1,5 @@
|
||||
---
|
||||
id: 60a3e3396c7b40068ad69996
|
||||
id: 60a3e3396c7b40068ad69997
|
||||
title: Step 45
|
||||
challengeType: 0
|
||||
dashedName: step-45
|
||||
@ -7,22 +7,24 @@ dashedName: step-45
|
||||
|
||||
# --description--
|
||||
|
||||
Rotate the `.two` element clockwise by 0.4 degrees.
|
||||
Rotate `.three` counter clockwise by 0.2 degrees.
|
||||
|
||||
With this final step, your Rothko painting is now complete.
|
||||
|
||||
# --hints--
|
||||
|
||||
You should set the `transform` property to `rotate(0.4deg)`.
|
||||
You should set the `transform` property to `rotate(-0.2deg)`.
|
||||
|
||||
```js
|
||||
const hasTransform = new __helpers.CSSHelp(document).getCSSRules().some(x => x.style.transform === 'rotate(0.4deg)');
|
||||
const hasTransform = new __helpers.CSSHelp(document).getCSSRules().some(x => x.style.transform === 'rotate(-0.2deg)');
|
||||
assert(hasTransform);
|
||||
```
|
||||
|
||||
Your `.two` element should have a `transform` value of `rotate(0.4deg)`.
|
||||
Your `.three` element should have a `transform` value of `rotate(-0.2deg)`.
|
||||
|
||||
```js
|
||||
const twoTransform = new __helpers.CSSHelp(document).getStyle('.two')?.getPropertyValue('transform');
|
||||
assert(twoTransform === 'rotate(0.4deg)');
|
||||
const threeTransform = new __helpers.CSSHelp(document).getStyle('.three')?.getPropertyValue('transform');
|
||||
assert(threeTransform === 'rotate(-0.2deg)');
|
||||
```
|
||||
|
||||
# --seed--
|
||||
@ -49,7 +51,7 @@ assert(twoTransform === 'rotate(0.4deg)');
|
||||
width: 425px;
|
||||
height: 150px;
|
||||
background-color: #efb762;
|
||||
margin: 20px auto 20px;
|
||||
margin: 20px auto;
|
||||
box-shadow: 0 0 3px 3px #efb762;
|
||||
border-radius: 9px;
|
||||
transform: rotate(-0.6deg);
|
||||
@ -62,9 +64,7 @@ assert(twoTransform === 'rotate(0.4deg)');
|
||||
margin: 0 auto 20px;
|
||||
box-shadow: 0 0 3px 3px #8f0401;
|
||||
border-radius: 8px 10px;
|
||||
--fcc-editable-region--
|
||||
|
||||
--fcc-editable-region--
|
||||
transform: rotate(0.4deg);
|
||||
}
|
||||
|
||||
.one, .two {
|
||||
@ -79,6 +79,9 @@ assert(twoTransform === 'rotate(0.4deg)');
|
||||
filter: blur(2px);
|
||||
box-shadow: 0 0 5px 5px #b20403;
|
||||
border-radius: 30px 25px 60px 12px;
|
||||
--fcc-editable-region--
|
||||
|
||||
--fcc-editable-region--
|
||||
}
|
||||
```
|
||||
|
||||
@ -101,3 +104,77 @@ assert(twoTransform === 'rotate(0.4deg)');
|
||||
</body>
|
||||
</html>
|
||||
```
|
||||
|
||||
## --solutions--
|
||||
|
||||
```html
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<title>Rothko</title>
|
||||
<link href="./styles.css" rel="stylesheet">
|
||||
</head>
|
||||
<body>
|
||||
<div class="frame">
|
||||
<div class="canvas">
|
||||
<div class="one"></div>
|
||||
<div class="two"></div>
|
||||
<div class="three"></div>
|
||||
</div>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
```
|
||||
|
||||
```css
|
||||
.canvas {
|
||||
width: 500px;
|
||||
height: 600px;
|
||||
background-color: #4d0f00;
|
||||
overflow: hidden;
|
||||
filter: blur(2px);
|
||||
}
|
||||
|
||||
.frame {
|
||||
border: 50px solid black;
|
||||
width: 500px;
|
||||
padding: 50px;
|
||||
margin: 20px auto;
|
||||
}
|
||||
|
||||
.one {
|
||||
width: 425px;
|
||||
height: 150px;
|
||||
background-color: #efb762;
|
||||
margin: 20px auto;
|
||||
box-shadow: 0 0 3px 3px #efb762;
|
||||
border-radius: 9px;
|
||||
transform: rotate(-0.6deg);
|
||||
}
|
||||
|
||||
.two {
|
||||
width: 475px;
|
||||
height: 200px;
|
||||
background-color: #8f0401;
|
||||
margin: 0 auto 20px;
|
||||
box-shadow: 0 0 3px 3px #8f0401;
|
||||
border-radius: 8px 10px;
|
||||
transform: rotate(0.4deg);
|
||||
}
|
||||
|
||||
.one, .two {
|
||||
filter: blur(1px);
|
||||
}
|
||||
|
||||
.three {
|
||||
width: 91%;
|
||||
height: 28%;
|
||||
background-color: #b20403;
|
||||
margin: auto;
|
||||
filter: blur(2px);
|
||||
box-shadow: 0 0 5px 5px #b20403;
|
||||
border-radius: 30px 25px 60px 12px;
|
||||
transform: rotate(-0.2deg);
|
||||
}
|
||||
```
|
||||
|
||||
@ -1,180 +0,0 @@
|
||||
---
|
||||
id: 60a3e3396c7b40068ad69997
|
||||
title: Step 46
|
||||
challengeType: 0
|
||||
dashedName: step-46
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
Rotate `.three` counter clockwise by 0.2 degrees.
|
||||
|
||||
With this final step, your Rothko painting is now complete.
|
||||
|
||||
# --hints--
|
||||
|
||||
You should set the `transform` property to `rotate(-0.2deg)`.
|
||||
|
||||
```js
|
||||
const hasTransform = new __helpers.CSSHelp(document).getCSSRules().some(x => x.style.transform === 'rotate(-0.2deg)');
|
||||
assert(hasTransform);
|
||||
```
|
||||
|
||||
Your `.three` element should have a `transform` value of `rotate(-0.2deg)`.
|
||||
|
||||
```js
|
||||
const threeTransform = new __helpers.CSSHelp(document).getStyle('.three')?.getPropertyValue('transform');
|
||||
assert(threeTransform === 'rotate(-0.2deg)');
|
||||
```
|
||||
|
||||
# --seed--
|
||||
|
||||
## --seed-contents--
|
||||
|
||||
```css
|
||||
.canvas {
|
||||
width: 500px;
|
||||
height: 600px;
|
||||
background-color: #4d0f00;
|
||||
overflow: hidden;
|
||||
filter: blur(2px);
|
||||
}
|
||||
|
||||
.frame {
|
||||
border: 50px solid black;
|
||||
width: 500px;
|
||||
padding: 50px;
|
||||
margin: 20px auto;
|
||||
}
|
||||
|
||||
.one {
|
||||
width: 425px;
|
||||
height: 150px;
|
||||
background-color: #efb762;
|
||||
margin: 20px auto 20px;
|
||||
box-shadow: 0 0 3px 3px #efb762;
|
||||
border-radius: 9px;
|
||||
transform: rotate(-0.6deg);
|
||||
}
|
||||
|
||||
.two {
|
||||
width: 475px;
|
||||
height: 200px;
|
||||
background-color: #8f0401;
|
||||
margin: 0 auto 20px;
|
||||
box-shadow: 0 0 3px 3px #8f0401;
|
||||
border-radius: 8px 10px;
|
||||
transform: rotate(0.4deg);
|
||||
}
|
||||
|
||||
.one, .two {
|
||||
filter: blur(1px);
|
||||
}
|
||||
|
||||
.three {
|
||||
width: 91%;
|
||||
height: 28%;
|
||||
background-color: #b20403;
|
||||
margin: auto;
|
||||
filter: blur(2px);
|
||||
box-shadow: 0 0 5px 5px #b20403;
|
||||
border-radius: 30px 25px 60px 12px;
|
||||
--fcc-editable-region--
|
||||
|
||||
--fcc-editable-region--
|
||||
}
|
||||
```
|
||||
|
||||
```html
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<title>Rothko</title>
|
||||
<link href="./styles.css" rel="stylesheet">
|
||||
</head>
|
||||
<body>
|
||||
<div class="frame">
|
||||
<div class="canvas">
|
||||
<div class="one"></div>
|
||||
<div class="two"></div>
|
||||
<div class="three"></div>
|
||||
</div>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
```
|
||||
|
||||
## --solutions--
|
||||
|
||||
```html
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<title>Rothko</title>
|
||||
<link href="./styles.css" rel="stylesheet">
|
||||
</head>
|
||||
<body>
|
||||
<div class="frame">
|
||||
<div class="canvas">
|
||||
<div class="one"></div>
|
||||
<div class="two"></div>
|
||||
<div class="three"></div>
|
||||
</div>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
```
|
||||
|
||||
```css
|
||||
.canvas {
|
||||
width: 500px;
|
||||
height: 600px;
|
||||
background-color: #4d0f00;
|
||||
overflow: hidden;
|
||||
filter: blur(2px);
|
||||
}
|
||||
|
||||
.frame {
|
||||
border: 50px solid black;
|
||||
width: 500px;
|
||||
padding: 50px;
|
||||
margin: 20px auto;
|
||||
}
|
||||
|
||||
.one {
|
||||
width: 425px;
|
||||
height: 150px;
|
||||
background-color: #efb762;
|
||||
margin: 20px auto 20px;
|
||||
box-shadow: 0 0 3px 3px #efb762;
|
||||
border-radius: 9px;
|
||||
transform: rotate(-0.6deg);
|
||||
}
|
||||
|
||||
.two {
|
||||
width: 475px;
|
||||
height: 200px;
|
||||
background-color: #8f0401;
|
||||
margin: 0 auto 20px;
|
||||
box-shadow: 0 0 3px 3px #8f0401;
|
||||
border-radius: 8px 10px;
|
||||
transform: rotate(0.4deg);
|
||||
}
|
||||
|
||||
.one, .two {
|
||||
filter: blur(1px);
|
||||
}
|
||||
|
||||
.three {
|
||||
width: 91%;
|
||||
height: 28%;
|
||||
background-color: #b20403;
|
||||
margin: auto;
|
||||
filter: blur(2px);
|
||||
box-shadow: 0 0 5px 5px #b20403;
|
||||
border-radius: 30px 25px 60px 12px;
|
||||
transform: rotate(-0.2deg);
|
||||
}
|
||||
```
|
||||
Reference in New Issue
Block a user