From ee0fb44c623918b0c006426a0ee2ae252b03f3c2 Mon Sep 17 00:00:00 2001 From: wbenarto Date: Thu, 10 Feb 2022 08:27:55 -0800 Subject: [PATCH] fix(curriculum): removed step 28 and edited meta.json (#44856) --- .../meta.json | 42 ++-- .../step-028.md | 35 ++-- .../step-029.md | 39 ++-- .../step-030.md | 31 ++- .../step-031.md | 19 +- .../step-032.md | 19 +- .../step-033.md | 28 +-- .../step-034.md | 29 ++- .../step-035.md | 50 +++-- .../step-036.md | 51 ++--- .../step-037.md | 27 +-- .../step-038.md | 25 ++- .../step-039.md | 23 +-- .../step-040.md | 27 +-- .../step-041.md | 25 ++- .../step-042.md | 25 +-- .../step-043.md | 27 +-- .../step-044.md | 25 ++- .../step-045.md | 99 ++++++++-- .../step-046.md | 180 ------------------ 20 files changed, 369 insertions(+), 457 deletions(-) delete mode 100644 curriculum/challenges/english/14-responsive-web-design-22/learn-the-css-box-model-by-building-a-rothko-painting/step-046.md diff --git a/curriculum/challenges/_meta/learn-the-css-box-model-by-building-a-rothko-painting/meta.json b/curriculum/challenges/_meta/learn-the-css-box-model-by-building-a-rothko-painting/meta.json index 9a26eb1979..3fc2298a1f 100644 --- a/curriculum/challenges/_meta/learn-the-css-box-model-by-building-a-rothko-painting/meta.json +++ b/curriculum/challenges/_meta/learn-the-css-box-model-by-building-a-rothko-painting/meta.json @@ -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" ] ] -} +} \ No newline at end of file diff --git a/curriculum/challenges/english/14-responsive-web-design-22/learn-the-css-box-model-by-building-a-rothko-painting/step-028.md b/curriculum/challenges/english/14-responsive-web-design-22/learn-the-css-box-model-by-building-a-rothko-painting/step-028.md index e14a703d4a..8e0a9bdaf3 100644 --- a/curriculum/challenges/english/14-responsive-web-design-22/learn-the-css-box-model-by-building-a-rothko-painting/step-028.md +++ b/curriculum/challenges/english/14-responsive-web-design-22/learn-the-css-box-model-by-building-a-rothko-painting/step-028.md @@ -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));
+--fcc-editable-region-- + +--fcc-editable-region--
diff --git a/curriculum/challenges/english/14-responsive-web-design-22/learn-the-css-box-model-by-building-a-rothko-painting/step-029.md b/curriculum/challenges/english/14-responsive-web-design-22/learn-the-css-box-model-by-building-a-rothko-painting/step-029.md index 2a2a4e7a2a..58fe20757d 100644 --- a/curriculum/challenges/english/14-responsive-web-design-22/learn-the-css-box-model-by-building-a-rothko-painting/step-029.md +++ b/curriculum/challenges/english/14-responsive-web-design-22/learn-the-css-box-model-by-building-a-rothko-painting/step-029.md @@ -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
---fcc-editable-region-- - ---fcc-editable-region-- +
diff --git a/curriculum/challenges/english/14-responsive-web-design-22/learn-the-css-box-model-by-building-a-rothko-painting/step-030.md b/curriculum/challenges/english/14-responsive-web-design-22/learn-the-css-box-model-by-building-a-rothko-painting/step-030.md index f2cee52066..c92c2720d9 100644 --- a/curriculum/challenges/english/14-responsive-web-design-22/learn-the-css-box-model-by-building-a-rothko-painting/step-030.md +++ b/curriculum/challenges/english/14-responsive-web-design-22/learn-the-css-box-model-by-building-a-rothko-painting/step-030.md @@ -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 diff --git a/curriculum/challenges/english/14-responsive-web-design-22/learn-the-css-box-model-by-building-a-rothko-painting/step-031.md b/curriculum/challenges/english/14-responsive-web-design-22/learn-the-css-box-model-by-building-a-rothko-painting/step-031.md index 8003e02796..0b495c7553 100644 --- a/curriculum/challenges/english/14-responsive-web-design-22/learn-the-css-box-model-by-building-a-rothko-painting/step-031.md +++ b/curriculum/challenges/english/14-responsive-web-design-22/learn-the-css-box-model-by-building-a-rothko-painting/step-031.md @@ -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-- diff --git a/curriculum/challenges/english/14-responsive-web-design-22/learn-the-css-box-model-by-building-a-rothko-painting/step-032.md b/curriculum/challenges/english/14-responsive-web-design-22/learn-the-css-box-model-by-building-a-rothko-painting/step-032.md index 1d70eb5842..68b9f56132 100644 --- a/curriculum/challenges/english/14-responsive-web-design-22/learn-the-css-box-model-by-building-a-rothko-painting/step-032.md +++ b/curriculum/challenges/english/14-responsive-web-design-22/learn-the-css-box-model-by-building-a-rothko-painting/step-032.md @@ -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-- diff --git a/curriculum/challenges/english/14-responsive-web-design-22/learn-the-css-box-model-by-building-a-rothko-painting/step-033.md b/curriculum/challenges/english/14-responsive-web-design-22/learn-the-css-box-model-by-building-a-rothko-painting/step-033.md index 9d1784b812..32ed985885 100644 --- a/curriculum/challenges/english/14-responsive-web-design-22/learn-the-css-box-model-by-building-a-rothko-painting/step-033.md +++ b/curriculum/challenges/english/14-responsive-web-design-22/learn-the-css-box-model-by-building-a-rothko-painting/step-033.md @@ -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; } ``` diff --git a/curriculum/challenges/english/14-responsive-web-design-22/learn-the-css-box-model-by-building-a-rothko-painting/step-034.md b/curriculum/challenges/english/14-responsive-web-design-22/learn-the-css-box-model-by-building-a-rothko-painting/step-034.md index f05d6a986f..39700644fa 100644 --- a/curriculum/challenges/english/14-responsive-web-design-22/learn-the-css-box-model-by-building-a-rothko-painting/step-034.md +++ b/curriculum/challenges/english/14-responsive-web-design-22/learn-the-css-box-model-by-building-a-rothko-painting/step-034.md @@ -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 { diff --git a/curriculum/challenges/english/14-responsive-web-design-22/learn-the-css-box-model-by-building-a-rothko-painting/step-035.md b/curriculum/challenges/english/14-responsive-web-design-22/learn-the-css-box-model-by-building-a-rothko-painting/step-035.md index b6df1f5290..8e19815afd 100644 --- a/curriculum/challenges/english/14-responsive-web-design-22/learn-the-css-box-model-by-building-a-rothko-painting/step-035.md +++ b/curriculum/challenges/english/14-responsive-web-design-22/learn-the-css-box-model-by-building-a-rothko-painting/step-035.md @@ -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%; diff --git a/curriculum/challenges/english/14-responsive-web-design-22/learn-the-css-box-model-by-building-a-rothko-painting/step-036.md b/curriculum/challenges/english/14-responsive-web-design-22/learn-the-css-box-model-by-building-a-rothko-painting/step-036.md index b8fe44285d..88f4f7eccf 100644 --- a/curriculum/challenges/english/14-responsive-web-design-22/learn-the-css-box-model-by-building-a-rothko-painting/step-036.md +++ b/curriculum/challenges/english/14-responsive-web-design-22/learn-the-css-box-model-by-building-a-rothko-painting/step-036.md @@ -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-- } ``` diff --git a/curriculum/challenges/english/14-responsive-web-design-22/learn-the-css-box-model-by-building-a-rothko-painting/step-037.md b/curriculum/challenges/english/14-responsive-web-design-22/learn-the-css-box-model-by-building-a-rothko-painting/step-037.md index 7d13899e41..388ef5f683 100644 --- a/curriculum/challenges/english/14-responsive-web-design-22/learn-the-css-box-model-by-building-a-rothko-painting/step-037.md +++ b/curriculum/challenges/english/14-responsive-web-design-22/learn-the-css-box-model-by-building-a-rothko-painting/step-037.md @@ -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); } ``` diff --git a/curriculum/challenges/english/14-responsive-web-design-22/learn-the-css-box-model-by-building-a-rothko-painting/step-038.md b/curriculum/challenges/english/14-responsive-web-design-22/learn-the-css-box-model-by-building-a-rothko-painting/step-038.md index 44be152c9c..ea553f86d8 100644 --- a/curriculum/challenges/english/14-responsive-web-design-22/learn-the-css-box-model-by-building-a-rothko-painting/step-038.md +++ b/curriculum/challenges/english/14-responsive-web-design-22/learn-the-css-box-model-by-building-a-rothko-painting/step-038.md @@ -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 { diff --git a/curriculum/challenges/english/14-responsive-web-design-22/learn-the-css-box-model-by-building-a-rothko-painting/step-039.md b/curriculum/challenges/english/14-responsive-web-design-22/learn-the-css-box-model-by-building-a-rothko-painting/step-039.md index a579d3f207..05a4325ace 100644 --- a/curriculum/challenges/english/14-responsive-web-design-22/learn-the-css-box-model-by-building-a-rothko-painting/step-039.md +++ b/curriculum/challenges/english/14-responsive-web-design-22/learn-the-css-box-model-by-building-a-rothko-painting/step-039.md @@ -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-- } ``` diff --git a/curriculum/challenges/english/14-responsive-web-design-22/learn-the-css-box-model-by-building-a-rothko-painting/step-040.md b/curriculum/challenges/english/14-responsive-web-design-22/learn-the-css-box-model-by-building-a-rothko-painting/step-040.md index e5fa40d1e0..9730b8ec7d 100644 --- a/curriculum/challenges/english/14-responsive-web-design-22/learn-the-css-box-model-by-building-a-rothko-painting/step-040.md +++ b/curriculum/challenges/english/14-responsive-web-design-22/learn-the-css-box-model-by-building-a-rothko-painting/step-040.md @@ -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; } ``` diff --git a/curriculum/challenges/english/14-responsive-web-design-22/learn-the-css-box-model-by-building-a-rothko-painting/step-041.md b/curriculum/challenges/english/14-responsive-web-design-22/learn-the-css-box-model-by-building-a-rothko-painting/step-041.md index df7065a3e7..5d884e9b4f 100644 --- a/curriculum/challenges/english/14-responsive-web-design-22/learn-the-css-box-model-by-building-a-rothko-painting/step-041.md +++ b/curriculum/challenges/english/14-responsive-web-design-22/learn-the-css-box-model-by-building-a-rothko-painting/step-041.md @@ -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 { diff --git a/curriculum/challenges/english/14-responsive-web-design-22/learn-the-css-box-model-by-building-a-rothko-painting/step-042.md b/curriculum/challenges/english/14-responsive-web-design-22/learn-the-css-box-model-by-building-a-rothko-painting/step-042.md index 664ff6c906..8a1b865800 100644 --- a/curriculum/challenges/english/14-responsive-web-design-22/learn-the-css-box-model-by-building-a-rothko-painting/step-042.md +++ b/curriculum/challenges/english/14-responsive-web-design-22/learn-the-css-box-model-by-building-a-rothko-painting/step-042.md @@ -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-- } ``` diff --git a/curriculum/challenges/english/14-responsive-web-design-22/learn-the-css-box-model-by-building-a-rothko-painting/step-043.md b/curriculum/challenges/english/14-responsive-web-design-22/learn-the-css-box-model-by-building-a-rothko-painting/step-043.md index 1e3ddecdc5..6cc6d086d7 100644 --- a/curriculum/challenges/english/14-responsive-web-design-22/learn-the-css-box-model-by-building-a-rothko-painting/step-043.md +++ b/curriculum/challenges/english/14-responsive-web-design-22/learn-the-css-box-model-by-building-a-rothko-painting/step-043.md @@ -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; } ``` diff --git a/curriculum/challenges/english/14-responsive-web-design-22/learn-the-css-box-model-by-building-a-rothko-painting/step-044.md b/curriculum/challenges/english/14-responsive-web-design-22/learn-the-css-box-model-by-building-a-rothko-painting/step-044.md index 09f4b8fcc4..a7e7262137 100644 --- a/curriculum/challenges/english/14-responsive-web-design-22/learn-the-css-box-model-by-building-a-rothko-painting/step-044.md +++ b/curriculum/challenges/english/14-responsive-web-design-22/learn-the-css-box-model-by-building-a-rothko-painting/step-044.md @@ -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 { diff --git a/curriculum/challenges/english/14-responsive-web-design-22/learn-the-css-box-model-by-building-a-rothko-painting/step-045.md b/curriculum/challenges/english/14-responsive-web-design-22/learn-the-css-box-model-by-building-a-rothko-painting/step-045.md index 3536e3fa0a..827101ce8f 100644 --- a/curriculum/challenges/english/14-responsive-web-design-22/learn-the-css-box-model-by-building-a-rothko-painting/step-045.md +++ b/curriculum/challenges/english/14-responsive-web-design-22/learn-the-css-box-model-by-building-a-rothko-painting/step-045.md @@ -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)'); ``` + +## --solutions-- + +```html + + + + + Rothko + + + +
+
+
+
+
+
+
+ + +``` + +```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); +} +``` diff --git a/curriculum/challenges/english/14-responsive-web-design-22/learn-the-css-box-model-by-building-a-rothko-painting/step-046.md b/curriculum/challenges/english/14-responsive-web-design-22/learn-the-css-box-model-by-building-a-rothko-painting/step-046.md deleted file mode 100644 index 6ede70221f..0000000000 --- a/curriculum/challenges/english/14-responsive-web-design-22/learn-the-css-box-model-by-building-a-rothko-painting/step-046.md +++ /dev/null @@ -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 - - - - - Rothko - - - -
-
-
-
-
-
-
- - -``` - -## --solutions-- - -```html - - - - - Rothko - - - -
-
-
-
-
-
-
- - -``` - -```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); -} -```