From 8f4d3febad33f1e0765beccb043e79b0bc26231c Mon Sep 17 00:00:00 2001 From: Kris Koishigawa Date: Fri, 17 Dec 2021 23:06:39 +0900 Subject: [PATCH] feat: finish first draft of color marker tests --- .../step-072.md | 6 ++-- .../step-073.md | 8 ++--- .../step-074.md | 6 ++-- .../step-075.md | 8 ++--- .../step-076.md | 23 ++++++++++++-- .../step-077.md | 16 ++++++++-- .../step-078.md | 8 ++++- .../step-079.md | 8 ++--- .../step-080.md | 6 ++-- .../step-081.md | 6 ++-- .../step-082.md | 28 +++++++++++++++-- .../step-083.md | 4 +-- .../step-084.md | 4 +-- .../step-085.md | 30 +++++++++++++++++-- .../step-086.md | 6 ++-- .../step-087.md | 4 +-- .../step-088.md | 6 ++-- .../step-089.md | 7 +++-- .../step-090.md | 8 ++--- .../step-091.md | 4 +-- .../step-092.md | 10 +++++-- .../step-093.md | 4 +-- .../step-094.md | 4 +-- 23 files changed, 153 insertions(+), 61 deletions(-) diff --git a/curriculum/challenges/english/01-responsive-web-design/learn-css-colors-by-building-a-color-markers-set/step-072.md b/curriculum/challenges/english/01-responsive-web-design/learn-css-colors-by-building-a-color-markers-set/step-072.md index f9e13875cc..194cb2d554 100644 --- a/curriculum/challenges/english/01-responsive-web-design/learn-css-colors-by-building-a-color-markers-set/step-072.md +++ b/curriculum/challenges/english/01-responsive-web-design/learn-css-colors-by-building-a-color-markers-set/step-072.md @@ -9,14 +9,14 @@ dashedName: step-72 To make the marker look more realistic, give the sleeve a transparent white color. -First, set the `sleeve` element's `background-color` to `white`. +First, set the `div.sleeve` element's `background-color` to `white`. # --hints-- -Test 1 +Your `.sleeve` CSS rule should have a `background-color` property set to `white`. ```js - +assert(new __helpers.CSSHelp(document).getStyle('.sleeve')?.backgroundColor === 'white'); ``` # --seed-- diff --git a/curriculum/challenges/english/01-responsive-web-design/learn-css-colors-by-building-a-color-markers-set/step-073.md b/curriculum/challenges/english/01-responsive-web-design/learn-css-colors-by-building-a-color-markers-set/step-073.md index 611e64507b..7405a5285a 100644 --- a/curriculum/challenges/english/01-responsive-web-design/learn-css-colors-by-building-a-color-markers-set/step-073.md +++ b/curriculum/challenges/english/01-responsive-web-design/learn-css-colors-by-building-a-color-markers-set/step-073.md @@ -9,16 +9,16 @@ dashedName: step-73 Opacity describes how opaque, or non-transparent, something is. For example, a solid wall is opaque, and no light can pass through. But a drinking glass is much more transparent, and you can see through the glass to the other side. -With the CSS `opacity` property, you can control how opaque or transparent an element is. With the value 0, or 0%, the element will be completely transparent, and at 1.0, or 100%, the element will be completely opaque like it is by default. +With the CSS `opacity` property, you can control how opaque or transparent an element is. With the value `0`, or 0%, the element will be completely transparent, and at `1.0`, or 100%, the element will be completely opaque like it is by default. -In the `sleeve` CSS rule, set the `opacity` property to `0.5`. +In the `.sleeve` CSS rule, set the `opacity` property to `0.5`. # --hints-- -Test 1 +Your `.sleeve` CSS rule should have an `opacity` property set to `0.5`. ```js - +assert(new __helpers.CSSHelp(document).getStyle('.sleeve')?.opacity === '0.5'); ``` # --seed-- diff --git a/curriculum/challenges/english/01-responsive-web-design/learn-css-colors-by-building-a-color-markers-set/step-074.md b/curriculum/challenges/english/01-responsive-web-design/learn-css-colors-by-building-a-color-markers-set/step-074.md index 8787135385..5b3be310ab 100644 --- a/curriculum/challenges/english/01-responsive-web-design/learn-css-colors-by-building-a-color-markers-set/step-074.md +++ b/curriculum/challenges/english/01-responsive-web-design/learn-css-colors-by-building-a-color-markers-set/step-074.md @@ -11,14 +11,14 @@ Another way to set the opacity for an element is with the alpha channel child?.localName === 'div') && redMarkerChildren.length === 2); +``` +Your new `div` element should have a `class` attribute set to `cap`. + +```js +const redMarkerChildren = [...document.querySelector('div.red')?.children]; +assert(redMarkerChildren.some(child => child?.classList?.contains('cap'))); +``` + +Your `div.cap` element should be before the `div.sleeve` element. + +```js +const redMarkerChildren = [...document.querySelector('div.red')?.children]; +const cap = document.querySelector('div.cap'); +const sleeve = document.querySelector('div.sleeve'); +assert(redMarkerChildren.indexOf(cap) < redMarkerChildren.indexOf(sleeve)); ``` # --seed-- diff --git a/curriculum/challenges/english/01-responsive-web-design/learn-css-colors-by-building-a-color-markers-set/step-077.md b/curriculum/challenges/english/01-responsive-web-design/learn-css-colors-by-building-a-color-markers-set/step-077.md index d43d88a32d..5ef4781e23 100644 --- a/curriculum/challenges/english/01-responsive-web-design/learn-css-colors-by-building-a-color-markers-set/step-077.md +++ b/curriculum/challenges/english/01-responsive-web-design/learn-css-colors-by-building-a-color-markers-set/step-077.md @@ -7,14 +7,26 @@ dashedName: step-77 # --description-- -Create a new CSS rule to target the `cap` class. In the new rule, set the `width` property to `60px`, and the `height` to `25px`. +Create a new CSS rule to target `cap`. In the new rule, set the `width` property to `60px`, and the `height` to `25px`. # --hints-- -Test 1 +You should use a class selector to target the `class` attribute, `cap`. ```js +assert(new __helpers.CSSHelp(document).getStyle('.cap')); +``` +Your `.cap` CSS rule should have a `width` property set to `60px`. + +```js +assert(new __helpers.CSSHelp(document).getStyle('.cap')?.width === '60px'); +``` + +Your `.cap` CSS rule should have a `height` property set to `25px`. + +```js +assert(new __helpers.CSSHelp(document).getStyle('.cap')?.height === '25px'); ``` # --seed-- diff --git a/curriculum/challenges/english/01-responsive-web-design/learn-css-colors-by-building-a-color-markers-set/step-078.md b/curriculum/challenges/english/01-responsive-web-design/learn-css-colors-by-building-a-color-markers-set/step-078.md index 209b29e2e5..95920408cb 100644 --- a/curriculum/challenges/english/01-responsive-web-design/learn-css-colors-by-building-a-color-markers-set/step-078.md +++ b/curriculum/challenges/english/01-responsive-web-design/learn-css-colors-by-building-a-color-markers-set/step-078.md @@ -17,10 +17,16 @@ Create a new rule to target both the `cap` and `sleeve` classes, and set `displa # --hints-- -Test 1 +You should use a class selector to target both the `cap` and `sleeve` classes. ```js +assert(new __helpers.CSSHelp(document).getStyle('.cap, .sleeve') || new __helpers.CSSHelp(document).getStyle('.sleeve, .cap')); +``` +Your CSS rule should have a `display` property set to `inline-block`. + +```js +assert(new __helpers.CSSHelp(document).getStyle('.cap, .sleeve')?.display === 'inline-block' || new __helpers.CSSHelp(document).getStyle('.sleeve, .cap')?.display === 'inline-block'); ``` # --seed-- diff --git a/curriculum/challenges/english/01-responsive-web-design/learn-css-colors-by-building-a-color-markers-set/step-079.md b/curriculum/challenges/english/01-responsive-web-design/learn-css-colors-by-building-a-color-markers-set/step-079.md index 3663858686..bd2f96cece 100644 --- a/curriculum/challenges/english/01-responsive-web-design/learn-css-colors-by-building-a-color-markers-set/step-079.md +++ b/curriculum/challenges/english/01-responsive-web-design/learn-css-colors-by-building-a-color-markers-set/step-079.md @@ -9,16 +9,16 @@ dashedName: step-79 In the last project, you learned a little bit about borders and the `border-color` property. -All HTML elements have borders, though they're usually set to `none` by default. With CSS, you can control all aspects of an element's border, and set the border on all sides, or just one side at a time. For a border to be visible, you need to set its width and style properties. +All HTML elements have borders, though they're usually set to `none` by default. With CSS, you can control all aspects of an element's border, and set the border on all sides, or just one side at a time. For a border to be visible, you need to set its width and style. -In the `sleeve` CSS rule, add the `border-left-width` property with the value `10px`. +In the `.sleeve` CSS rule, add the `border-left-width` property with the value `10px`. # --hints-- -Test 1 +Your `.sleeve` CSS rule should have a `border-left-width` property and with the value `10px`. ```js - +assert(new __helpers.CSSHelp(document).getStyle('.sleeve')?.borderLeftWidth === '10px'); ``` # --seed-- diff --git a/curriculum/challenges/english/01-responsive-web-design/learn-css-colors-by-building-a-color-markers-set/step-080.md b/curriculum/challenges/english/01-responsive-web-design/learn-css-colors-by-building-a-color-markers-set/step-080.md index 9c0b20dcb6..8d837ae76d 100644 --- a/curriculum/challenges/english/01-responsive-web-design/learn-css-colors-by-building-a-color-markers-set/step-080.md +++ b/curriculum/challenges/english/01-responsive-web-design/learn-css-colors-by-building-a-color-markers-set/step-080.md @@ -9,14 +9,14 @@ dashedName: step-80 Borders have several styles to choose from. You can make your border a solid line, but can also go with a dashed or dotted line if you prefer. Solid border lines are probably the most common. -In the `sleeve` CSS rule, add the `border-left-style` property with the value `solid`. +In the `.sleeve` CSS rule, add the `border-left-style` property with the value `solid`. # --hints-- -Test 1 +Your `.sleeve` CSS rule should have a `border-left-style` property and with the value `solid`. ```js - +assert(new __helpers.CSSHelp(document).getStyle('.sleeve')?.borderLeftStyle === 'solid'); ``` # --seed-- diff --git a/curriculum/challenges/english/01-responsive-web-design/learn-css-colors-by-building-a-color-markers-set/step-081.md b/curriculum/challenges/english/01-responsive-web-design/learn-css-colors-by-building-a-color-markers-set/step-081.md index 33623e927c..25e505173b 100644 --- a/curriculum/challenges/english/01-responsive-web-design/learn-css-colors-by-building-a-color-markers-set/step-081.md +++ b/curriculum/challenges/english/01-responsive-web-design/learn-css-colors-by-building-a-color-markers-set/step-081.md @@ -11,14 +11,14 @@ Your border should be visible now. If no color is set, black is used by default. But to make your code more readable, it's better to set the border color explicitly. -In the `sleeve` CSS rule, add the `border-left-color` property with the value `black`. +In the `.sleeve` CSS rule, add the `border-left-color` property with the value `black`. # --hints-- -Test 1 +Your `.sleeve` CSS rule should have a `border-left-color` property and with the value `black`. ```js - +assert(new __helpers.CSSHelp(document).getStyle('.sleeve')?.borderLeftColor === 'black'); ``` # --seed-- diff --git a/curriculum/challenges/english/01-responsive-web-design/learn-css-colors-by-building-a-color-markers-set/step-082.md b/curriculum/challenges/english/01-responsive-web-design/learn-css-colors-by-building-a-color-markers-set/step-082.md index f16bef938b..9148cb6b42 100644 --- a/curriculum/challenges/english/01-responsive-web-design/learn-css-colors-by-building-a-color-markers-set/step-082.md +++ b/curriculum/challenges/english/01-responsive-web-design/learn-css-colors-by-building-a-color-markers-set/step-082.md @@ -15,14 +15,38 @@ Here is the syntax: border-left: width style color; ``` -In the `sleeve` CSS rule, replace the `border-left-width`, `border-left-style`, and `border-left-color` properties with the `border-left` shorthand property. The values for the width, style, and color of the left border should be the same. +In the `.sleeve` CSS rule, replace the `border-left-width`, `border-left-style`, and `border-left-color` properties with the `border-left` shorthand property. The values for the width, style, and color of the left border should be the same. # --hints-- -Test 1 +Your `.sleeve` CSS rule should not have a `border-left-width` property and value. ```js +assert( + !__helpers.removeWhiteSpace($('style').text()).includes('border-left-width:') +); +``` +Your `.sleeve` CSS rule should not have a `border-left-style` property and value. + +```js +assert( + !__helpers.removeWhiteSpace($('style').text()).includes('border-left-style:') +); +``` + +Your `.sleeve` CSS rule should not have a `border-left-color` property and value. + +```js +assert( + !__helpers.removeWhiteSpace($('style').text()).includes('border-left-color:') +); +``` + +Your `.sleeve` CSS rule should have a `border-left` shorthand property and with the value `10px solid black`. + +```js +assert(new __helpers.CSSHelp(document).getStyle('.sleeve')?.borderLeft === '10px solid black'); ``` # --seed-- diff --git a/curriculum/challenges/english/01-responsive-web-design/learn-css-colors-by-building-a-color-markers-set/step-083.md b/curriculum/challenges/english/01-responsive-web-design/learn-css-colors-by-building-a-color-markers-set/step-083.md index f8701e8b37..c606a938ad 100644 --- a/curriculum/challenges/english/01-responsive-web-design/learn-css-colors-by-building-a-color-markers-set/step-083.md +++ b/curriculum/challenges/english/01-responsive-web-design/learn-css-colors-by-building-a-color-markers-set/step-083.md @@ -13,10 +13,10 @@ For the `border-left` shorthand property, change the border style value from `so # --hints-- -Test 1 +Your `.sleeve` CSS rule should have a `border-left` shorthand property and with the value `10px double black`. ```js - +assert(new __helpers.CSSHelp(document).getStyle('.sleeve')?.borderLeft === '10px double black'); ``` # --seed-- diff --git a/curriculum/challenges/english/01-responsive-web-design/learn-css-colors-by-building-a-color-markers-set/step-084.md b/curriculum/challenges/english/01-responsive-web-design/learn-css-colors-by-building-a-color-markers-set/step-084.md index a857f0536a..fb1a692958 100644 --- a/curriculum/challenges/english/01-responsive-web-design/learn-css-colors-by-building-a-color-markers-set/step-084.md +++ b/curriculum/challenges/english/01-responsive-web-design/learn-css-colors-by-building-a-color-markers-set/step-084.md @@ -13,10 +13,10 @@ For the `border-left` shorthand property, use the `rgba` function to set the col # --hints-- -Test 1 +Your `.sleeve` CSS rule should have a `border-left` shorthand property and with the value `10px double rgba(0, 0, 0, 0.75)`. ```js - +assert(new __helpers.CSSHelp(document).getStyle('.sleeve')?.borderLeft === '10px double rgba(0, 0, 0, 0.75)'); ``` # --seed-- diff --git a/curriculum/challenges/english/01-responsive-web-design/learn-css-colors-by-building-a-color-markers-set/step-085.md b/curriculum/challenges/english/01-responsive-web-design/learn-css-colors-by-building-a-color-markers-set/step-085.md index a26d3b6799..f644d161a0 100644 --- a/curriculum/challenges/english/01-responsive-web-design/learn-css-colors-by-building-a-color-markers-set/step-085.md +++ b/curriculum/challenges/english/01-responsive-web-design/learn-css-colors-by-building-a-color-markers-set/step-085.md @@ -9,14 +9,40 @@ dashedName: step-85 Awesome. Your red marker is looking good. Now all you need to do is add the caps and sleeves to your other markers. -In both green and blue marker `div` elements, nest new `cap` and `sleeve` `div` elements. You can just copy the ones from the red marker and paste them into the other two markers. +Add a cap and sleeve to both the green and blue markers. You can just copy the `div` elements from the red marker and paste them into the other two markers. # --hints-- -Test 1 +Your green marker `div` should contain two `div` elements. ```js +const greenMarkerChildren = [...document.querySelector('.green')?.children]; +assert(greenMarkerChildren.every(child => child?.localName === 'div') && greenMarkerChildren.length === 2); +``` +Your green marker's `div.cap` element should be before the `div.sleeve` element. + +```js +const greenMarkerChildren = [...document.querySelector('.green')?.children]; +const greenMarkerCap = document.querySelector('.green .cap'); +const greenMarkerSleeve = document.querySelector('.green .sleeve'); +assert(greenMarkerChildren.indexOf(greenMarkerCap) < greenMarkerChildren.indexOf(greenMarkerSleeve)); +``` + +Your blue marker `div` should contain two `div` elements. + +```js +const blueMarkerChildren = [...document.querySelector('.blue')?.children]; +assert(blueMarkerChildren.every(child => child?.localName === 'div') && blueMarkerChildren.length === 2); +``` + +Your green marker's `div.cap` element should be before the `div.sleeve` element. + +```js +const blueMarkerChildren = [...document.querySelector('.blue')?.children]; +const blueMarkerCap = document.querySelector('.blue .cap'); +const blueMarkerSleeve = document.querySelector('.blue .sleeve'); +assert(blueMarkerChildren.indexOf(blueMarkerCap) < blueMarkerChildren.indexOf(blueMarkerSleeve)); ``` # --seed-- diff --git a/curriculum/challenges/english/01-responsive-web-design/learn-css-colors-by-building-a-color-markers-set/step-086.md b/curriculum/challenges/english/01-responsive-web-design/learn-css-colors-by-building-a-color-markers-set/step-086.md index cfb6d25b88..e6af783e2b 100644 --- a/curriculum/challenges/english/01-responsive-web-design/learn-css-colors-by-building-a-color-markers-set/step-086.md +++ b/curriculum/challenges/english/01-responsive-web-design/learn-css-colors-by-building-a-color-markers-set/step-086.md @@ -17,14 +17,14 @@ box-shadow: offsetX offsetY color; Start by adding a simple shadow to the red marker. -In the `red` CSS rule, add the `box-shadow` property with the values `5px` for `offsetX`, `5px` for `offsetY`, and `red` for `color`. +In the `.red` CSS rule, add the `box-shadow` property with the values `5px` for `offsetX`, `5px` for `offsetY`, and `red` for `color`. # --hints-- -Test 1 +Your `.red` CSS rule should have a `box-shadow` shorthand property and with the value `5px 5px red`. ```js - +assert(new __helpers.CSSHelp(document).getStyle('.red')?.boxShadow === 'red 5px 5px'); ``` # --seed-- diff --git a/curriculum/challenges/english/01-responsive-web-design/learn-css-colors-by-building-a-color-markers-set/step-087.md b/curriculum/challenges/english/01-responsive-web-design/learn-css-colors-by-building-a-color-markers-set/step-087.md index 22102296b1..91519a4a17 100644 --- a/curriculum/challenges/english/01-responsive-web-design/learn-css-colors-by-building-a-color-markers-set/step-087.md +++ b/curriculum/challenges/english/01-responsive-web-design/learn-css-colors-by-building-a-color-markers-set/step-087.md @@ -15,10 +15,10 @@ Update the values for the `box-shadow` property, and set `offsetX` to `-5px`, an # --hints-- -Test 1 +Your `.red` CSS rule should have a `box-shadow` shorthand property and with the value `-5px -5px red`. ```js - +assert(new __helpers.CSSHelp(document).getStyle('.red')?.boxShadow === 'red -5px -5px'); ``` # --seed-- diff --git a/curriculum/challenges/english/01-responsive-web-design/learn-css-colors-by-building-a-color-markers-set/step-088.md b/curriculum/challenges/english/01-responsive-web-design/learn-css-colors-by-building-a-color-markers-set/step-088.md index 07ccd0c027..5a0b5f0504 100644 --- a/curriculum/challenges/english/01-responsive-web-design/learn-css-colors-by-building-a-color-markers-set/step-088.md +++ b/curriculum/challenges/english/01-responsive-web-design/learn-css-colors-by-building-a-color-markers-set/step-088.md @@ -15,14 +15,14 @@ box-shadow: offsetX offsetY blurRadius color; If a `blurRadius` value isn't included, it defaults to `0` and produces sharp edges. The higher the value of `blurRadius`, the greater the blurring effect is. -In the `green` CSS rule, add the `box-shadow` property with the values `5px` for `offsetX`, `5px` for `offsetY`, `5px`, for `blurRadius`, and `green` for `color`. +In the `.green` CSS rule, add the `box-shadow` property with the values `5px` for `offsetX`, `5px` for `offsetY`, `5px`, for `blurRadius`, and `green` for `color`. # --hints-- -Test 1 +Your `.green` CSS rule should have a `box-shadow` shorthand property and with the value `5px 5px 5px green`. ```js - +assert(new __helpers.CSSHelp(document).getStyle('.green')?.boxShadow === 'green 5px 5px 5px'); ``` # --seed-- diff --git a/curriculum/challenges/english/01-responsive-web-design/learn-css-colors-by-building-a-color-markers-set/step-089.md b/curriculum/challenges/english/01-responsive-web-design/learn-css-colors-by-building-a-color-markers-set/step-089.md index 1be4c7aaff..0e5de37b21 100644 --- a/curriculum/challenges/english/01-responsive-web-design/learn-css-colors-by-building-a-color-markers-set/step-089.md +++ b/curriculum/challenges/english/01-responsive-web-design/learn-css-colors-by-building-a-color-markers-set/step-089.md @@ -17,14 +17,15 @@ Like `blurRadius`, `spreadRadius` defaults to `0` if it isn't included. Practice by adding a 5 pixel shadow directly around the blue marker. -In the `blue` CSS rule, add the `box-shadow` property with the values `0` for `offsetX`, `0` for `offsetY`, `0`, for `blurRadius`, `5px` for `spreadRadius`, and `blue` for `color`. +In the `.blue` CSS rule, add the `box-shadow` property with the values `0` for `offsetX`, `0` for `offsetY`, `0`, for `blurRadius`, `5px` for `spreadRadius`, and `blue` for `color`. # --hints-- -Test 1 +Your `.blue` CSS rule should have a `box-shadow` shorthand property and with the value `0 0 0 5px blue`. ```js - +console.log(new __helpers.CSSHelp(document).getStyle('.blue')); +assert(new __helpers.CSSHelp(document).getStyle('.blue')?.boxShadow === 'blue 0px 0px 0px 5px'); ``` # --seed-- diff --git a/curriculum/challenges/english/01-responsive-web-design/learn-css-colors-by-building-a-color-markers-set/step-090.md b/curriculum/challenges/english/01-responsive-web-design/learn-css-colors-by-building-a-color-markers-set/step-090.md index 822e23e2fc..2248c7ba2b 100644 --- a/curriculum/challenges/english/01-responsive-web-design/learn-css-colors-by-building-a-color-markers-set/step-090.md +++ b/curriculum/challenges/english/01-responsive-web-design/learn-css-colors-by-building-a-color-markers-set/step-090.md @@ -7,16 +7,16 @@ dashedName: step-90 # --description-- -Now that you're familiar with the `box-shadow` property, you can finalize the shadows, starting with the one for the red marker. +Now that you're familiar with the `box-shadow` property you can finalize the shadows, starting with the one for the red marker. -In the `red` CSS rule, update the values for the `box-shadow` property so `offsetX` is `0`,`offsetY` is `0`, `blurRadius` is `20px`, and `spreadRadius` is `0`. +In the `.red` CSS rule, update the values for the `box-shadow` property so `offsetX` is `0`,`offsetY` is `0`, `blurRadius` is `20px`, and `spreadRadius` is `0`. # --hints-- -Test 1 +Your `.red` CSS rule should have a `box-shadow` shorthand property and with the value `0 0 20px 0 red`. ```js - +assert(new __helpers.CSSHelp(document).getStyle('.red')?.boxShadow === 'red 0px 0px 20px 0px'); ``` # --seed-- diff --git a/curriculum/challenges/english/01-responsive-web-design/learn-css-colors-by-building-a-color-markers-set/step-091.md b/curriculum/challenges/english/01-responsive-web-design/learn-css-colors-by-building-a-color-markers-set/step-091.md index f809696be4..95fe811170 100644 --- a/curriculum/challenges/english/01-responsive-web-design/learn-css-colors-by-building-a-color-markers-set/step-091.md +++ b/curriculum/challenges/english/01-responsive-web-design/learn-css-colors-by-building-a-color-markers-set/step-091.md @@ -13,10 +13,10 @@ Replace the named color with the `rgba` function. Use the values `83` for red, ` # --hints-- -Test 1 +Your `.red` CSS rule should have a `box-shadow` shorthand property and with the value `0 0 20px 0 rgba(83, 14, 14, 0.8)`. ```js - +assert(new __helpers.CSSHelp(document).getStyle('.red')?.boxShadow === 'rgba(83, 14, 14, 0.8) 0px 0px 20px 0px'); ``` # --seed-- diff --git a/curriculum/challenges/english/01-responsive-web-design/learn-css-colors-by-building-a-color-markers-set/step-092.md b/curriculum/challenges/english/01-responsive-web-design/learn-css-colors-by-building-a-color-markers-set/step-092.md index a0f22c187a..18a055f643 100644 --- a/curriculum/challenges/english/01-responsive-web-design/learn-css-colors-by-building-a-color-markers-set/step-092.md +++ b/curriculum/challenges/english/01-responsive-web-design/learn-css-colors-by-building-a-color-markers-set/step-092.md @@ -9,14 +9,20 @@ dashedName: step-92 The shadows for your green and blue markers will have the same position, blur, and spread. The only difference will be the colors. -In the `green` and `blue` CSS rules, update the values for the `box-shadow` properties so `offsetX` is `0`,`offsetY` is `0`, `blurRadius` is `20px`, and `spreadRadius` is `0`. Leave the colors as `green` and `blue` for now. +In the `.green` and `.blue` CSS rules, update the values for the `box-shadow` properties so `offsetX` is `0`,`offsetY` is `0`, `blurRadius` is `20px`, and `spreadRadius` is `0`. Leave the colors as `green` and `blue` for now. # --hints-- -Test 1 +Your `.green` CSS rule should have a `box-shadow` shorthand property and with the value `0 0 20px 0 green`. ```js +assert(new __helpers.CSSHelp(document).getStyle('.green')?.boxShadow === 'green 0px 0px 20px 0px'); +``` +Your `.blue` CSS rule should have a `box-shadow` shorthand property and with the value `0 0 20px 0 blue`. + +```js +assert(new __helpers.CSSHelp(document).getStyle('.blue')?.boxShadow === 'blue 0px 0px 20px 0px'); ``` # --seed-- diff --git a/curriculum/challenges/english/01-responsive-web-design/learn-css-colors-by-building-a-color-markers-set/step-093.md b/curriculum/challenges/english/01-responsive-web-design/learn-css-colors-by-building-a-color-markers-set/step-093.md index 4fd42d12a5..c6a0b83c8d 100644 --- a/curriculum/challenges/english/01-responsive-web-design/learn-css-colors-by-building-a-color-markers-set/step-093.md +++ b/curriculum/challenges/english/01-responsive-web-design/learn-css-colors-by-building-a-color-markers-set/step-093.md @@ -11,10 +11,10 @@ For the green marker's `box-shadow` property, replace the named color with a hex # --hints-- -Test 1 +Your `.green` CSS rule should have a `box-shadow` shorthand property and with the value `0 0 20px 0 #3B7E20CC`. ```js - +assert(new __helpers.CSSHelp(document).getStyle('.green')?.boxShadow === 'rgba(59, 126, 32, 0.8) 0px 0px 20px 0px'); ``` # --seed-- diff --git a/curriculum/challenges/english/01-responsive-web-design/learn-css-colors-by-building-a-color-markers-set/step-094.md b/curriculum/challenges/english/01-responsive-web-design/learn-css-colors-by-building-a-color-markers-set/step-094.md index c1be194cbb..2d125f242b 100644 --- a/curriculum/challenges/english/01-responsive-web-design/learn-css-colors-by-building-a-color-markers-set/step-094.md +++ b/curriculum/challenges/english/01-responsive-web-design/learn-css-colors-by-building-a-color-markers-set/step-094.md @@ -11,10 +11,10 @@ Finally, for the green marker's `box-shadow` property, replace the named color w # --hints-- -Test 1 +Your `.blue` CSS rule should have a `box-shadow` shorthand property and with the value `0 0 20px 0 hsla(223, 59%, 31%, 0.8)`. ```js - +assert(new __helpers.CSSHelp(document).getStyle('.blue')?.boxShadow === 'rgba(32, 59, 126, 0.8) 0px 0px 20px 0px'); ``` # --seed--