gaspersic/freeCodeCamp
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

feat: finish first draft of color marker tests

Browse Source
This commit is contained in:
Kris Koishigawa
2021-12-17 23:06:39 +09:00
parent d48f3bad70
commit 8f4d3febad
23 changed files with 153 additions and 61 deletions
Download Patch File Download Diff File Expand all files Collapse all files

6
curriculum/challenges/english/01-responsive-web-design/learn-css-colors-by-building-a-color-markers-set/step-072.md
View File

@@ -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--

8
curriculum/challenges/english/01-responsive-web-design/learn-css-colors-by-building-a-color-markers-set/step-073.md
View File

@@ -9,16 +9,16 @@ dashedName: step-73
<dfn>Opacity</dfn> 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--

6
curriculum/challenges/english/01-responsive-web-design/learn-css-colors-by-building-a-color-markers-set/step-074.md
View File

@@ -11,14 +11,14 @@ Another way to set the opacity for an element is with the <dfn>alpha channel</df
You've already set sleeve's opacity with a named color and the `opacity` property, but you can add an alpha channel to the other CSS color properties.
First, inside the `sleeve` rule, remove the `opacity` property and value.
First, inside the `.sleeve` rule, remove the `opacity` property and value.
# --hints--
Test 1
Your `.sleeve` CSS rule should not have an `opacity` property and value.
```js
assert(!new __helpers.CSSHelp(document).getStyle('.sleeve')?.opacity);
```
# --seed--

8
curriculum/challenges/english/01-responsive-web-design/learn-css-colors-by-building-a-color-markers-set/step-075.md
View File

@@ -9,20 +9,20 @@ dashedName: step-75
You're already familiar with using the `rgb` function to set colors. To add an alpha channel to an `rgb` color, use the `rgba` function instead.
The `rgba` function works just like the `rgb` function, but takes one more number from 0 to 1.0 for the alpha channel:
The `rgba` function works just like the `rgb` function, but takes one more number from `0` to `1.0` for the alpha channel:
```css
rgba(redValue, greenValue, blueValue, alphaValue);
```
In the `sleeve` rule, use the `rgba` function to set the `background-color` property to pure white with 50% opacity.
In the `.sleeve` rule, use the `rgba` function to set the `background-color` property to pure white with 50% opacity.
# --hints--
Test 1
Your `.sleeve` CSS rule should have a `background-color` property set to `rgba(255, 255, 255, 0.5)`.
```js
assert(new __helpers.CSSHelp(document).getStyle('.sleeve')?.backgroundColor === 'rgba(255, 255, 255, 0.5)');
```
# --seed--

23
curriculum/challenges/english/01-responsive-web-design/learn-css-colors-by-building-a-color-markers-set/step-076.md
View File

@@ -7,16 +7,33 @@ dashedName: step-76
# --description--
Your sleeve is looking good, but it would look even better if it was positioned more toward the right side of the marker. One way to do that is to add another element before the `sleeve` `div` to push the sleeve to the right.
Your sleeve is looking good, but it would look even better if it was positioned more toward the right side of the marker. One way to do that is to add another element before the `div.sleeve` element to push the sleeve to the right.
In the red marker `div`, add a new `div` element with the `class` `cap` before the `sleeve` `div`.
Add a new `div` element with the `class` attribute set to `cap` before the `div.sleeve` element.
# --hints--
Test 1
Your new `div` element should be within the `div.red` element.
```js
const redMarkerChildren = [...document.querySelector('div.red')?.children];
assert(redMarkerChildren.every(child => 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--

16
curriculum/challenges/english/01-responsive-web-design/learn-css-colors-by-building-a-color-markers-set/step-077.md
View File

@@ -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--

8
curriculum/challenges/english/01-responsive-web-design/learn-css-colors-by-building-a-color-markers-set/step-078.md
View File

@@ -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--

8
curriculum/challenges/english/01-responsive-web-design/learn-css-colors-by-building-a-color-markers-set/step-079.md
View File

@@ -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--

6
curriculum/challenges/english/01-responsive-web-design/learn-css-colors-by-building-a-color-markers-set/step-080.md
View File

@@ -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--

6
curriculum/challenges/english/01-responsive-web-design/learn-css-colors-by-building-a-color-markers-set/step-081.md
View File

@@ -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--

28
curriculum/challenges/english/01-responsive-web-design/learn-css-colors-by-building-a-color-markers-set/step-082.md
View File

@@ -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--

4
curriculum/challenges/english/01-responsive-web-design/learn-css-colors-by-building-a-color-markers-set/step-083.md
View File

@@ -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--

4
curriculum/challenges/english/01-responsive-web-design/learn-css-colors-by-building-a-color-markers-set/step-084.md
View File

@@ -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--

30
curriculum/challenges/english/01-responsive-web-design/learn-css-colors-by-building-a-color-markers-set/step-085.md
View File

@@ -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--

6
curriculum/challenges/english/01-responsive-web-design/learn-css-colors-by-building-a-color-markers-set/step-086.md
View File

@@ -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--

4
curriculum/challenges/english/01-responsive-web-design/learn-css-colors-by-building-a-color-markers-set/step-087.md
View File

@@ -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--

6
curriculum/challenges/english/01-responsive-web-design/learn-css-colors-by-building-a-color-markers-set/step-088.md
View File

@@ -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--

7
curriculum/challenges/english/01-responsive-web-design/learn-css-colors-by-building-a-color-markers-set/step-089.md
View File

@@ -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--

8
curriculum/challenges/english/01-responsive-web-design/learn-css-colors-by-building-a-color-markers-set/step-090.md
View File

@@ -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--

4
curriculum/challenges/english/01-responsive-web-design/learn-css-colors-by-building-a-color-markers-set/step-091.md
View File

@@ -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--

10
curriculum/challenges/english/01-responsive-web-design/learn-css-colors-by-building-a-color-markers-set/step-092.md
View File

@@ -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--

4
curriculum/challenges/english/01-responsive-web-design/learn-css-colors-by-building-a-color-markers-set/step-093.md
View File

@@ -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--

4
curriculum/challenges/english/01-responsive-web-design/learn-css-colors-by-building-a-color-markers-set/step-094.md
View File

@@ -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--