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

feat: add more tests, fix wording and some CSS values

Browse Source
This commit is contained in:
Kris Koishigawa
2021-12-16 16:26:53 +09:00
parent 2c98805208
commit 9cabc1db5c
25 changed files with 173 additions and 69 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -21,7 +21,7 @@ Create a new CSS rule that targets the `h1` element, and set the `text-align` pr
# --hints--
You should create an `h1` selector.
You should use an `h1` selector.
```js
assert(new __helpers.CSSHelp(document).getStyle('h1'));

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

@@ -27,7 +27,7 @@ You should create a `class` selector to target the `marker` `class`.
assert(new __helpers.CSSHelp(document).getStyle('.marker'));
```
Your `marker` CSS rule should have a `background-color` property set to `red`.
Your `.marker` CSS rule should have a `background-color` property set to `red`.
```js
assert(new __helpers.CSSHelp(document).getStyle('.marker')?.backgroundColor === 'red');

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

@@ -7,19 +7,19 @@ dashedName: step-12
# --description--
Notice that your marker doesn't seem to have any color. The background color was actually applied, but since the `marker` element is empty, it doesn't have any width or height by default.
Notice that your marker doesn't seem to have any color. The background color was actually applied, but since the `marker` `div` element is empty, it doesn't have any width or height by default.
In your `marker` CSS rule, set the `width` property to `200px` and the `height` property to `25px`.
In your `.marker` CSS rule, set the `width` property to `200px` and the `height` property to `25px`.
# --hints--
Your `marker` CSS rule should have a `width` property set to `200px`.
Your `.marker` CSS rule should have a `width` property set to `200px`.
```js
assert(new __helpers.CSSHelp(document).getStyle('.marker')?.width === '200px');
```
Your `marker` CSS rule should have a `height` property set to `25px`.
Your `.marker` CSS rule should have a `height` property set to `25px`.
```js
assert(new __helpers.CSSHelp(document).getStyle('.marker')?.height === '25px');

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

@@ -15,7 +15,7 @@ To center your marker on the page, set its `margin` property to `auto`. This set
# --hints--
Your `marker` CSS rule should have a `margin` property set to `auto`.
Your `.marker` CSS rule should have a `margin` property set to `auto`.
```js
assert(new __helpers.CSSHelp(document).getStyle('.marker')?.margin === 'auto');

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

@@ -11,11 +11,11 @@ While you have three separate `marker` elements, they look like one big rectangl
When the shorthand `margin` property has two values, it sets `margin-top` and `margin-bottom` to the first value, and `margin-left` and `margin-right` to the second value.
In your `marker` CSS rule, set the `margin` property to `10px auto`.
In your `.marker` CSS rule, set the `margin` property to `10px auto`.
# --hints--
Your `marker` CSS rule should have a `margin` property set to `10px auto`.
Your `.marker` CSS rule should have a `margin` property set to `10px auto`.
```js
assert(new __helpers.CSSHelp(document).getStyle('.marker')?.margin === '10px auto');

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

@@ -15,10 +15,18 @@ First, add the `class` `one` to the first `marker` `div` element.
# --hints--
Test 1
You should add the `class` `one` to the first `marker` `div` element in the `container` `div`.
```js
const containerFirstChild = [...document.querySelector('.container')?.children][0];
assert(containerFirstChild?.classList?.contains('one'));
```
Your first `marker` `div` should have the classes `marker` and `one`.
```js
const containerFirstChild = [...document.querySelector('.container')?.children][0];
assert(containerFirstChild?.classList?.contains('marker') && containerFirstChild?.classList?.contains('one'));
```
# --seed--

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

@@ -7,14 +7,14 @@ dashedName: step-17
# --description--
Next, remove the `background-color` property and its value from the `marker` CSS rule.
Next, remove the `background-color` property and its value from the `.marker` CSS rule.
# --hints--
Test 1
Your `.marker` CSS rule should not have a `background-color` property and value.
```js
assert(!code.includes('background-color') && !new __helpers.CSSHelp(document).getStyle('.marker')?.backgroundColor);
```
# --seed--

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

@@ -7,14 +7,20 @@ dashedName: step-18
# --description--
Then, create a new CSS rule that targets the class `one` and set its `background-color` property to `red`.
Then, create a new CSS rule that targets the `class` `one` and set its `background-color` property to `red`.
# --hints--
Test 1
You should use a `class` selector to target the `class` `one`.
```js
assert(new __helpers.CSSHelp(document).getStyle('.one'));
```
Your `.one` CSS rule should have a `background-color` property set to `red`.
```js
assert(new __helpers.CSSHelp(document).getStyle('.one')?.backgroundColor === 'red');
```
# --seed--

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

@@ -7,14 +7,36 @@ dashedName: step-19
# --description--
Add the `class` `two` to the second `marker` `div`, and the `class` `three` to the third marker `div`.
Add the `class` `two` to the second `marker` `div`, and the `class` `three` to the third `marker` `div`.
# --hints--
Test 1
You should add the `class` `two` to the second `marker` `div` element in the `container` `div`.
```js
const containerSecondChild = [...document.querySelector('.container')?.children][1];
assert(containerSecondChild?.classList?.contains('two'));
```
Your second `marker` `div` should have the classes `marker` and `two`.
```js
const containerSecondChild = [...document.querySelector('.container')?.children][1];
assert(containerSecondChild?.classList?.contains('marker') && containerSecondChild.classList?.contains('two'));
```
You should add the `class` `three` to the third `marker` `div` element in the `container` `div`.
```js
const containerThirdChild = [...document.querySelector('.container')?.children][2];
assert(containerThirdChild?.classList?.contains('three'));
```
Your third `marker` `div` should have the classes `marker` and `three`.
```js
const containerThirdChild = [...document.querySelector('.container')?.children][2];
assert(containerThirdChild?.classList?.contains('marker') && containerThirdChild?.classList?.contains('three'));
```
# --seed--

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

@@ -13,10 +13,28 @@ Also, create a separate CSS rule that targets the `class` `three` and set its `b
# --hints--
Test 1
You should use a `class` selector to target the `class` `two`.
```js
assert(new __helpers.CSSHelp(document).getStyle('.two'));
```
Your `.two` CSS rule should have a `background-color` property set to `green`.
```js
assert(new __helpers.CSSHelp(document).getStyle('.two')?.backgroundColor === 'green');
```
You should use a `class` selector to target the `class` `three`.
```js
assert(new __helpers.CSSHelp(document).getStyle('.three'));
```
Your `.three` CSS rule should have a `background-color` property set to `blue`.
```js
assert(new __helpers.CSSHelp(document).getStyle('.three')?.backgroundColor === 'blue');
```
# --seed--

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

@@ -15,10 +15,16 @@ Create a new CSS rule that targets the `container` `class` and set its `backgrou
# --hints--
Test 1
You should use a `class` selector to target the `container` `class`.
```js
assert(new __helpers.CSSHelp(document).getStyle('.container'));
```
Your `.container` CSS rule should have a `background-color` property set to `rgb(0, 0, 0)`.
```js
assert(new __helpers.CSSHelp(document).getStyle('.container')?.backgroundColor === 'rgb(0, 0, 0)');
```
# --seed--

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

@@ -7,22 +7,28 @@ dashedName: step-22
# --description--
A function is a piece of code that can take input and perform a specific action. The CSS `rgb` function accepts a values, or arguments, for red, green and blue, and produces a color:
A function is a piece of code that can take an input and perform a specific action. The CSS `rgb` function accepts a values, or <dfn>arguments</dfn>, for red, green, and blue, and produces a color:
```css
rgb(red, green, blue);
```
Each red, green, and blue value is a number from 0 to 255. 0 means that there's 0% of that color, and is black. 255 means that there's 100% of that color.
Each red, green, and blue value is a number from `0` to `255`. `0` means that there's 0% of that color, and is black. `255` means that there's 100% of that color.
In the `one` CSS rule, replace the color keyword `red` with the `rgb` function. For the `rgb` function, set the value for red to `255`, the value for green to `0`, and the value for blue to `0`.
In the `.one` CSS rule, replace the color keyword `red` with the `rgb` function. For the `rgb` function, set the value for red to `255`, the value for green to `0`, and the value for blue to `0`.
# --hints--
Test 1
Your `.one` CSS rule should not use the `red` color keyword to set the `background-color` property.
```js
assert(new __helpers.CSSHelp(document).getStyle('.one')?.backgroundColor !== 'red');
```
Your `.one` CSS rule should have a `background-color` property set to `rgb(255, 0, 0)`.
```js
assert(new __helpers.CSSHelp(document).getStyle('.one')?.backgroundColor === 'rgb(255, 0, 0)');
```
# --seed--

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

@@ -7,16 +7,36 @@ dashedName: step-23
# --description--
Notice that the `background-color` for `one` is still red. This is because you set the red value of the `rgb` function to the max of 255, or 100% red, and set both the green and blue values to 0.
Notice that the `background-color` for your marker is still red. This is because you set the red value of the `rgb` function to the max of `255`, or 100% red, and set both the green and blue values to `0`.
Now do the same for the other colors. In the `two` CSS rule, use the `rgb` function to set the `background-color` to the max value for green. And in the `three` CSS rule, use the `rgb` function to set the `background-color` to the max value for blue.
Now use the `rgb` function to set the other colors.
In the `.two` CSS rule, use the `rgb` function to set the `background-color` to the max value for green, and `0` for the other values. And in the `.three` CSS rule, use the `rgb` function to set the `background-color` to the max value for blue, and `0` for the other values.
# --hints--
Test 1
Your `.two` CSS rule should not use the `green` color keyword to set the `background-color` property.
```js
assert(new __helpers.CSSHelp(document).getStyle('.two')?.backgroundColor !== 'green');
```
Your `.two` CSS rule should have a `background-color` property set to `rgb(0, 255, 0)`.
```js
assert(new __helpers.CSSHelp(document).getStyle('.two')?.backgroundColor === 'rgb(0, 255, 0)');
```
Your `.three` CSS rule should not use the `blue` color keyword to set the `background-color` property.
```js
assert(new __helpers.CSSHelp(document).getStyle('.three')?.backgroundColor !== 'blue');
```
Your `.three` CSS rule should have a `background-color` property set to `rgb(0, 0, 255)`.
```js
assert(new __helpers.CSSHelp(document).getStyle('.three')?.backgroundColor === 'rgb(0, 0, 255)');
```
# --seed--

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

@@ -9,14 +9,14 @@ dashedName: step-24
While the red and blue markers look the same, the green one is much lighter than it was before. This is because the `green` color keyword is actually a darker shade, and is about halfway between black and the maximum value for green.
In the `two` CSS rule, set the green value in the `rgb` function to `127` to lower its intensity.
In the `two` CSS rule, set the green value in the `rgb` function to `128` to lower its intensity.
# --hints--
Test 1
Your `.two` CSS rule should have a `background-color` property set to `rgb(0, 127, 0)`.
```js
assert(new __helpers.CSSHelp(document).getStyle('.two')?.backgroundColor === 'rgb(0, 127, 0)');
```
# --seed--

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

@@ -9,14 +9,20 @@ dashedName: step-25
Now add a little more vertical space between your markers and the edge of the `container` element they're in.
Use the shorthand `padding` property to add `10px` of top and bottom padding, and set the left and right padding to `0`. This works similarly to the shorthand `margin` property you used earlier.
In the `.container` CSS rule, use the shorthand `padding` property to add `10px` of top and bottom padding, and set the left and right padding to `0`. This works similarly to the shorthand `margin` property you used earlier.
# --hints--
Test 1
You should not remove the `background-color` property and its value from the `.container` CSS rule.
```js
assert(new __helpers.CSSHelp(document).getStyle('.container')?.backgroundColor === 'rgb(0, 0, 0)');
```
Your `.container` CSS rule should have a `padding` property set to `10px 0`.
```js
assert(new __helpers.CSSHelp(document).getStyle('.container')?.padding === '10px 0px');
```
# --seed--

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

@@ -9,14 +9,14 @@ dashedName: step-26
In the additive RGB color model, <dfn>primary colors</dfn> are colors that, when combined, create pure white. But for this to happen, each color needs to be at its highest intensity.
Before you combine colors, set your green marker back to pure green. For the `rgb` function in the `two` CSS rule, set green back to the max value of `255`.
Before you combine colors, set your green marker back to pure green. For the `rgb` function in the `.two` CSS rule, set green back to the max value of `255`.
# --hints--
Test 1
Your `.two` CSS rule should have a `background-color` property set to `rgb(0, 255, 0)`.
```js
assert(new __helpers.CSSHelp(document).getStyle('.two')?.backgroundColor === 'rgb(0, 255, 0)');
```
# --seed--

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

@@ -9,14 +9,14 @@ dashedName: step-27
Now that you have the primary RGB colors, it's time to combine them.
For the `rgb` function in the `container` rule, set the red, green, and blue values to the max of `255`.
For the `rgb` function in the `.container` rule, set the red, green, and blue values to the max of `255`.
# --hints--
Test 1
Your `.container` CSS rule should have a `background-color` property set to `rgb(255, 255, 255)`.
```js
assert(new __helpers.CSSHelp(document).getStyle('.container')?.backgroundColor === 'rgb(255, 255, 255)');
```
# --seed--

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

@@ -9,14 +9,14 @@ dashedName: step-28
<dfn>Secondary colors</dfn> are the colors you get when you combine primary colors. You might have noticed some secondary colors in the last step as you changed the red, green, and blue values.
To create the first secondary color, yellow, update the `rgb` function in the `one` CSS rule to combine pure red and pure green.
To create the first secondary color, yellow, update the `rgb` function in the `.one` CSS rule to combine pure red and pure green.
# --hints--
Test 1
Your `.one` CSS rule should have a `background-color` property set to `rgb(255, 255, 0)`.
```js
assert(new __helpers.CSSHelp(document).getStyle('.one')?.backgroundColor === 'rgb(255, 255, 0)');
```
# --seed--

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

@@ -7,14 +7,14 @@ dashedName: step-29
# --description--
To create the next secondary color, cyan, update the `rgb` function in the `two` CSS rule to combine pure green and pure blue.
To create the next secondary color, cyan, update the `rgb` function in the `.two` CSS rule to combine pure green and pure blue.
# --hints--
Test 1
Your `.two` CSS rule should have a `background-color` property set to `rgb(0, 255, 255)`.
```js
assert(new __helpers.CSSHelp(document).getStyle('.two')?.backgroundColor === 'rgb(0, 255, 255)');
```
# --seed--

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

@@ -7,14 +7,14 @@ dashedName: step-30
# --description--
To create the final secondary color, magenta, update the `rgb` function in the `three` CSS rule to combine pure blue and pure red.
To create the final secondary color, magenta, update the `rgb` function in the `.three` CSS rule to combine pure blue and pure red.
# --hints--
Test 1
Your `.three` CSS rule should have a `background-color` property set to `rgb(255, 0, 255)`.
```js
assert(new __helpers.CSSHelp(document).getStyle('.three')?.backgroundColor === 'rgb(255, 0, 255)');
```
# --seed--

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

@@ -9,14 +9,14 @@ dashedName: step-31
Now that you're familiar with secondary colors, you'll learn how to create <dfn>tertiary colors</dfn>. Tertiary colors are created by combining a primary with a nearby secondary color.
To create the tertiary color orange, update the `rgb` function in `one` so that red is at the max value, and set green to `128`.
To create the tertiary color orange, update the `rgb` function in the `.one` CSS rule so that red is at the max value, and set green to `127`.
# --hints--
Test 1
Your `.one` CSS rule should have a `background-color` property set to `rgb(255, 127, 0)`.
```js
assert(new __helpers.CSSHelp(document).getStyle('.one')?.backgroundColor === 'rgb(255, 127, 0)');
```
# --seed--

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

@@ -9,14 +9,14 @@ dashedName: step-32
Notice that, to create orange, you had to increase the intensity of red and decrease the intensity of the green `rgb` values. This is because orange is the combination of red and yellow, and falls between the two colors on the color wheel.
To create the tertiary color spring green, combine cyan with green. Update the `rgb` function in `two` so that green is at the max value, and set blue to `128`.
To create the tertiary color spring green, combine cyan with green. Update the `rgb` function in the `.two` CSS rule so that green is at the max value, and set blue to `127`.
# --hints--
Test 1
Your `.two` CSS rule should have a `background-color` property set to `rgb(0, 255, 127)`.
```js
assert(new __helpers.CSSHelp(document).getStyle('.two')?.backgroundColor === 'rgb(0, 255, 127)');
```
# --seed--
@@ -63,7 +63,7 @@ h1 {
}
.one {
background-color: rgb(255, 128, 0);
background-color: rgb(255, 127, 0);
}
--fcc-editable-region--

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

@@ -7,14 +7,14 @@ dashedName: step-33
# --description--
And to create the tertiary color violet, combine magenta with blue. Update the `rgb` function in `three` so that blue is at the max value, and set red to `128`.
And to create the tertiary color violet, combine magenta with blue. Update the `rgb` function in the `.three` CSS rule so that blue is at the max value, and set red to `127`.
# --hints--
Test 1
Your `.three` CSS rule should have a `background-color` property set to `rgb(127, 0, 255)`.
```js
assert(new __helpers.CSSHelp(document).getStyle('.three')?.backgroundColor === 'rgb(127, 0, 255)');
```
# --seed--
@@ -61,11 +61,11 @@ h1 {
}
.one {
background-color: rgb(255, 128, 0);
background-color: rgb(255, 127, 0);
}
.two {
background-color: rgb(0, 255, 128);
background-color: rgb(0, 255, 127);
}
--fcc-editable-region--

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

@@ -9,18 +9,30 @@ dashedName: step-34
There are three more tertiary colors: chartreuse green (green + yellow), azure (blue + cyan), and rose (red + magenta).
To create chartreuse green, update the `rgb` function in `one` so that red is at `128`, and set green to the max value.
To create chartreuse green, update the `rgb` function in the `.one` rule so that red is at `127`, and set green to the max value.
For azure, update the `rgb` function in `two` so that green is at `128` and blue is at the max value.
For azure, update the `rgb` function in the `.two` rule so that green is at `127` and blue is at the max value.
And for rose, which is sometimes called bright pink, update the `rgb` function in `three` so that green is at `128` and red is at the max value.
And for rose, which is sometimes called bright pink, update the `rgb` function in the `.three` rule so that blue is at `127` and red is at the max value.
# --hints--
Test 1
Your `.one` CSS rule should have a `background-color` property set to `rgb(127, 255, 0)`.
```js
assert(new __helpers.CSSHelp(document).getStyle('.one')?.backgroundColor === 'rgb(127, 255, 0)');
```
Your `.two` CSS rule should have a `background-color` property set to `rgb(0, 127, 255)`.
```js
assert(new __helpers.CSSHelp(document).getStyle('.two')?.backgroundColor === 'rgb(0, 127, 255)');
```
Your `.three` CSS rule should have a `background-color` property set to `rgb(255, 0, 127)`.
```js
assert(new __helpers.CSSHelp(document).getStyle('.three')?.backgroundColor === 'rgb(255, 0, 127)');
```
# --seed--
@@ -68,15 +80,15 @@ h1 {
--fcc-editable-region--
.one {
background-color: rgb(255, 128, 0);
background-color: rgb(255, 127, 0);
}
.two {
background-color: rgb(0, 255, 128);
background-color: rgb(0, 255, 127);
}
.three {
background-color: rgb(128, 0, 255);
background-color: rgb(127, 0, 255);
}
--fcc-editable-region--

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

@@ -9,7 +9,7 @@ dashedName: step-35
Now that you've gone through all the primary, secondary, and tertiary colors on a color wheel, it'll be easier to understand other color theory concepts and how they impact design.
First, in `one`, `two`, and `three`, adjust the values in the `rgb` function so that the `background-color` of each element is set to pure black.
First, in the `.one`, `.two`, and `.three`, adjust the values in the `rgb` function so that the `background-color` of each element is set to pure black.
# --hints--
@@ -64,15 +64,15 @@ h1 {
--fcc-editable-region--
.one {
background-color: rgb(128, 255, 0);
background-color: rgb(127, 255, 0);
}
.two {
background-color: rgb(0, 128, 255);
background-color: rgb(0, 127, 255);
}
.three {
background-color: rgb(255, 0, 128);
background-color: rgb(255, 0, 127);
}
--fcc-editable-region--