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

fix: simplify text involving classes

Browse Source
This commit is contained in:
Kris Koishigawa
2021-12-18 00:51:37 +09:00
parent 8f4d3febad
commit 45168d1834
25 changed files with 53 additions and 55 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-003.md
View File

@@ -32,7 +32,7 @@ const title = document.querySelector('title');
assert.equal(title?.text?.trim()?.toLowerCase(), 'css color markers') assert.equal(title?.text?.trim()?.toLowerCase(), 'css color markers')
``` ```
Remember, the casing and spelling matter for the title text Remember, casing and spelling matter for the title text.
```js ```js
const title = document.querySelector('title'); const title = document.querySelector('title');

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

@@ -17,7 +17,7 @@ p {
} }
``` ```
Create a new CSS rule that targets the `h1` element, and set the `text-align` property to `center`. Create a new CSS rule that targets the `h1` element, and set its `text-align` property to `center`.
# --hints-- # --hints--

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

@@ -9,7 +9,7 @@ dashedName: step-9
Now you'll add some elements that you'll eventually style into color markers. Now you'll add some elements that you'll eventually style into color markers.
First, within the `body` element, add a `div` element and set its `class` attribute to `container`. Make sure the `div` element is below the `h1` element. First, within the `body`, add a `div` element and set its `class` attribute to `container`. Make sure the `div` element is below the `h1` element.
# --hints-- # --hints--

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

@@ -7,7 +7,7 @@ dashedName: step-10
# --description-- # --description--
Next, within the `container` `div`, add another `div` element and set its `class` to `marker`. Next, within the `div`, add another `div` element and give it a class of `marker`.
# --hints-- # --hints--
@@ -23,13 +23,13 @@ Your new `div` element should have a closing tag.
assert([...code.matchAll(/<\/div\s*>/gi)][1]); assert([...code.matchAll(/<\/div\s*>/gi)][1]);
``` ```
Your new `div` element should be within the `container` `div` element. You should nest your new `div` element within the `div` with the class `container`.
```js ```js
assert(document.querySelector('.container')?.children[0]?.localName === 'div'); assert(document.querySelector('.container')?.children[0]?.localName === 'div');
``` ```
Your new `div` element should have a `class` attribute set to `marker`. You should give your new `div` element a class of `container`.
```js ```js
const containerChildren = [...document.querySelector('.container')?.children]; const containerChildren = [...document.querySelector('.container')?.children];

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

@@ -9,7 +9,7 @@ dashedName: step-11
It's time to add some color to the page. Remember that one way to add color to an element is to use a <dfn>color keyword</dfn> like `black`, `cyan`, or `yellow`. It's time to add some color to the page. Remember that one way to add color to an element is to use a <dfn>color keyword</dfn> like `black`, `cyan`, or `yellow`.
Use a class selector to target `marker` and apply a background color to it. As a reminder, here's how to target the `class` `freecodecamp`: Use a class selector to target the class `marker` and apply a background color to it. As a reminder, here's how to target the class `freecodecamp`:
```css ```css
.freecodecamp { .freecodecamp {
@@ -17,11 +17,11 @@ Use a class selector to target `marker` and apply a background color to it. As a
} }
``` ```
Create a new CSS rule that targets the `marker` `class`, and set its `background-color` property to `red`. Create a new CSS rule that targets the class `marker`, and set its `background-color` property to `red`.
# --hints-- # --hints--
You should create a class selector to target the `marker` `class`. You should create a class selector to target the `marker` class.
```js ```js
assert(new __helpers.CSSHelp(document).getStyle('.marker')); assert(new __helpers.CSSHelp(document).getStyle('.marker'));

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

@@ -9,7 +9,7 @@ dashedName: step-14
Now that you've got one marker centered with color, it's time to add the other markers. Now that you've got one marker centered with color, it's time to add the other markers.
In the `container` `div`, add two more `div` elements with the `class` `marker`. In the `container` `div`, add two more `div` elements and give them each a class of `marker`.
# --hints-- # --hints--
@@ -37,14 +37,14 @@ Your second new `div` element should have a closing tag.
assert([...code.matchAll(/<\/div\s*>/gi)][3]); assert([...code.matchAll(/<\/div\s*>/gi)][3]);
``` ```
Your new `div` elements should be within the `div.container` element. Your new `div` elements should be within the `div` with the class `container`.
```js ```js
const containerChildren = [...document.querySelector('.container')?.children]; const containerChildren = [...document.querySelector('.container')?.children];
assert(containerChildren.every(child => child?.localName === 'div') && containerChildren.length === 3); assert(containerChildren.every(child => child?.localName === 'div') && containerChildren.length === 3);
``` ```
Your new `div` elements should both have their `class` attributes set to `marker`. Your new `div` elements should both have a class of `marker`.
```js ```js
const containerChildren = [...document.querySelector('.container')?.children]; const containerChildren = [...document.querySelector('.container')?.children];

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

@@ -15,7 +15,7 @@ First, add the `class` `one` to the first marker `div` element.
# --hints-- # --hints--
You should add the `class` `one` to the first marker `div` element in the `container` `div`. You should add the class `one` to the first marker `div` element.
```js ```js
const containerFirstChild = [...document.querySelector('.container')?.children][0]; const containerFirstChild = [...document.querySelector('.container')?.children][0];

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

@@ -7,11 +7,11 @@ dashedName: step-18
# --description-- # --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-- # --hints--
You should use a class selector to target the `class` `one`. You should use a class selector to target the class `one`.
```js ```js
assert(new __helpers.CSSHelp(document).getStyle('.one')); assert(new __helpers.CSSHelp(document).getStyle('.one'));

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

@@ -7,11 +7,11 @@ dashedName: step-19
# --description-- # --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-- # --hints--
You should add the `class` `two` to the second marker `div` element in the `container` `div`. You should add the class `two` to the second marker `div` element in the `container` `div`.
```js ```js
const containerSecondChild = [...document.querySelector('.container')?.children][1]; const containerSecondChild = [...document.querySelector('.container')?.children][1];
@@ -25,7 +25,7 @@ const containerSecondChild = [...document.querySelector('.container')?.children]
assert(containerSecondChild?.classList?.contains('marker') && containerSecondChild.classList?.contains('two')); 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`. You should add the class `three` to the third marker `div` element in the `container` `div`.
```js ```js
const containerThirdChild = [...document.querySelector('.container')?.children][2]; const containerThirdChild = [...document.querySelector('.container')?.children][2];

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

@@ -7,13 +7,13 @@ dashedName: step-20
# --description-- # --description--
Create a CSS rule that targets the `class` `two` and set its `background-color` property to `green`. Create a CSS rule that targets the class `two` and set its `background-color` property to `green`.
Also, create a separate CSS rule that targets the `class` `three` and set its `background-color` to `blue`. Also, create a separate CSS rule that targets the class `three` and set its `background-color` to `blue`.
# --hints-- # --hints--
You should use a class selector to target the `class` `two`. You should use a class selector to target the class `two`.
```js ```js
assert(new __helpers.CSSHelp(document).getStyle('.two')); assert(new __helpers.CSSHelp(document).getStyle('.two'));
@@ -25,7 +25,7 @@ Your `.two` CSS rule should have a `background-color` property set to `green`.
assert(new __helpers.CSSHelp(document).getStyle('.two')?.backgroundColor === 'green'); assert(new __helpers.CSSHelp(document).getStyle('.two')?.backgroundColor === 'green');
``` ```
You should use a class selector to target the `class` `three`. You should use a class selector to target the class `three`.
```js ```js
assert(new __helpers.CSSHelp(document).getStyle('.three')); assert(new __helpers.CSSHelp(document).getStyle('.three'));

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

@@ -11,11 +11,11 @@ Earlier you learned that the RGB color model is additive. This means that colors
An easy way to see this is with the CSS `rgb` function. An easy way to see this is with the CSS `rgb` function.
Create a new CSS rule that targets the `container` `class` and set its `background-color` to black with `rgb(0, 0, 0)`. Create a new CSS rule that targets the class `container` and set its `background-color` to black with `rgb(0, 0, 0)`.
# --hints-- # --hints--
You should use a class selector to target the `container` `class`. You should use a class selector to target the class `container`.
```js ```js
assert(new __helpers.CSSHelp(document).getStyle('.container')); assert(new __helpers.CSSHelp(document).getStyle('.container'));

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

@@ -9,11 +9,11 @@ dashedName: step-41
Now it's time time to add other details to the markers, starting with the first one. Now it's time time to add other details to the markers, starting with the first one.
First, change the `class` attribute of the first marker `div` element from `one` to `red`. In the first marker `div` element, change the class `one` to `red`.
# --hints-- # --hints--
Your first marker `div` should not have the `class` `one`. Your first marker `div` should not have the class `one`.
```js ```js
const containerFirstChild = [...document.querySelector('.container')?.children][0]; const containerFirstChild = [...document.querySelector('.container')?.children][0];

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

@@ -7,7 +7,7 @@ dashedName: step-42
# --description-- # --description--
Update the `.one` class selector to target the new `red` `class`. Update the `.one` class selector to target the new `red` class.
# --hints-- # --hints--
@@ -17,7 +17,7 @@ Your code should no longer have a `.one` class selector.
assert(!new __helpers.CSSHelp(document).getStyle('.one')); assert(!new __helpers.CSSHelp(document).getStyle('.one'));
``` ```
You should use a class selector to target the `class` `red`. You should use a class selector to target the class `red`.
```js ```js
assert(new __helpers.CSSHelp(document).getStyle('.red')); assert(new __helpers.CSSHelp(document).getStyle('.red'));

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

@@ -7,11 +7,11 @@ dashedName: step-44
# --description-- # --description--
Next, change the `class` of the second marker `div` from `two` to `green`, and the `class` of the third marker `div` from `three` to `blue`. Next, change the class `two` to `green` in the second marker `div`, and the class `three` to `blue` in the third marker `div`.
# --hints-- # --hints--
Your second marker `div` should not have the `class` `two`. Your second marker `div` should not have the class `two`.
```js ```js
const containerSecondChild = [...document.querySelector('.container')?.children][1]; const containerSecondChild = [...document.querySelector('.container')?.children][1];
@@ -25,7 +25,7 @@ const containerSecondChild = [...document.querySelector('.container')?.children]
assert(containerSecondChild?.classList?.contains('marker') && containerSecondChild?.classList?.contains('green')); assert(containerSecondChild?.classList?.contains('marker') && containerSecondChild?.classList?.contains('green'));
``` ```
Your third marker `div` should not have the `class` `three`. Your third marker `div` should not have the class `three`.
```js ```js
const containerThirdChild = [...document.querySelector('.container')?.children][2]; const containerThirdChild = [...document.querySelector('.container')?.children][2];

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

@@ -7,7 +7,7 @@ dashedName: step-45
# --description-- # --description--
Update the CSS class selector `.two` so it targets the new `green` `class`. And update the `.three` selector so it targets the new `blue` `class`. Update the CSS class selector `.two` so it targets the new `green` class. And update the `.three` selector so it targets the new `blue` class.
# --hints-- # --hints--
@@ -17,7 +17,7 @@ Your code should no longer have a `.two` class selector.
assert(!new __helpers.CSSHelp(document).getStyle('.two')); assert(!new __helpers.CSSHelp(document).getStyle('.two'));
``` ```
You should use a class selector to target the `class` `green`. You should use a class selector to target the class `green`.
```js ```js
assert(new __helpers.CSSHelp(document).getStyle('.green')); assert(new __helpers.CSSHelp(document).getStyle('.green'));
@@ -35,7 +35,7 @@ Your code should no longer have a `.three` class selector.
assert(!new __helpers.CSSHelp(document).getStyle('.three')); assert(!new __helpers.CSSHelp(document).getStyle('.three'));
``` ```
You should use a class selector to target the `class` `blue`. You should use a class selector to target the class `blue`.
```js ```js
assert(new __helpers.CSSHelp(document).getStyle('.blue')); assert(new __helpers.CSSHelp(document).getStyle('.blue'));

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

@@ -17,7 +17,7 @@ Saturation is the intensity of a color from 0%, or gray, to 100% for pure color.
Lightness is how bright a color appears, from 0%, or complete black, to 100%, complete white, with 50% being neutral. Lightness is how bright a color appears, from 0%, or complete black, to 100%, complete white, with 50% being neutral.
In the `blue` CSS rule, use the `hsl` function to change the `background-color` property to pure blue. Set the hue to `240`, the saturation to `100%`, and the lightness to `50%`. In the `.blue` CSS rule, use the `hsl` function to change the `background-color` property to pure blue. Set the hue to `240`, the saturation to `100%`, and the lightness to `50%`.
# --hints-- # --hints--

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

@@ -7,7 +7,7 @@ dashedName: step-54
# --description-- # --description--
Color-stops allow you to fine tune where colors are placed along the gradient line. They a length unit like `px` or percentages that follow a color in the `linear-gradient` function. Color-stops allow you to fine-tune where colors are placed along the gradient line. They a length unit like `px` or percentages that follow a color in the `linear-gradient` function.
For example, in this red-black gradient, the transition from red to black takes place at the 90% point along the gradient line, so red takes up most of the available space: For example, in this red-black gradient, the transition from red to black takes place at the 90% point along the gradient line, so red takes up most of the available space:

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

@@ -9,18 +9,18 @@ dashedName: step-70
Now that the markers have the correct colors, it's time to build the marker sleeves. Start with the red marker. Now that the markers have the correct colors, it's time to build the marker sleeves. Start with the red marker.
Inside the `div.red` element, create a new `div` with the `class` attribute set to `sleeve`. Inside the red marker `div`, create a new `div` and give it a class of `sleeve`.
# --hints-- # --hints--
Your new `div` element should be within the `div.red` element. Your new `div` element should be within the red marker's `div` element.
```js ```js
const redMarkerChildren = [...document.querySelector('.red')?.children]; const redMarkerChildren = [...document.querySelector('.red')?.children];
assert(redMarkerChildren.every(child => child?.localName === 'div') && redMarkerChildren.length === 1); assert(redMarkerChildren.every(child => child?.localName === 'div') && redMarkerChildren.length === 1);
``` ```
Your new `div` element should have a `class` attribute set to `sleeve`. Your new `div` element should have a class of `sleeve`.
```js ```js
const redMarkerChild = [...document.querySelector('.red')?.children][0]; const redMarkerChild = [...document.querySelector('.red')?.children][0];

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

@@ -7,13 +7,11 @@ dashedName: step-71
# --description-- # --description--
Create a new CSS rule that targets the `class` attribute, `sleeve`. Create a new CSS rule that targets the class `sleeve`. Set the `width` property to `110px`, and the `height` property to `25px`.
Inside the new rule, set the `width` property to `110px`, and the `height` property to `25px`.
# --hints-- # --hints--
You should use a class selector to target the `class` attribute, `sleeve`. You should use a class selector to target class `sleeve`.
```js ```js
assert(new __helpers.CSSHelp(document).getStyle('.sleeve')); assert(new __helpers.CSSHelp(document).getStyle('.sleeve'));

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

@@ -9,7 +9,7 @@ dashedName: step-72
To make the marker look more realistic, give the sleeve a transparent white color. To make the marker look more realistic, give the sleeve a transparent white color.
First, set the `div.sleeve` element's `background-color` to `white`. First, set the sleeve element's `background-color` to `white`.
# --hints-- # --hints--

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

@@ -11,7 +11,7 @@ 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. 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. Inside the `.sleeve` rule, remove the `opacity` property and value.
# --hints-- # --hints--

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

@@ -7,27 +7,27 @@ dashedName: step-76
# --description-- # --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 `div.sleeve` element 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 sleeve to push it to the right.
Add a new `div` element with the `class` attribute set to `cap` before the `div.sleeve` element. Add a new `div` with the class `cap` before the sleeve `div` element.
# --hints-- # --hints--
Your new `div` element should be within the `div.red` element. Your new `div` element should be within the red marker `div`.
```js ```js
const redMarkerChildren = [...document.querySelector('div.red')?.children]; const redMarkerChildren = [...document.querySelector('div.red')?.children];
assert(redMarkerChildren.every(child => child?.localName === 'div') && redMarkerChildren.length === 2); assert(redMarkerChildren.every(child => child?.localName === 'div') && redMarkerChildren.length === 2);
``` ```
Your new `div` element should have a `class` attribute set to `cap`. Your new `div` element should have a class of `cap`.
```js ```js
const redMarkerChildren = [...document.querySelector('div.red')?.children]; const redMarkerChildren = [...document.querySelector('div.red')?.children];
assert(redMarkerChildren.some(child => child?.classList?.contains('cap'))); assert(redMarkerChildren.some(child => child?.classList?.contains('cap')));
``` ```
Your `div.cap` element should be before the `div.sleeve` element. Your cap `div` should be before the sleeve `div`.
```js ```js
const redMarkerChildren = [...document.querySelector('div.red')?.children]; const redMarkerChildren = [...document.querySelector('div.red')?.children];

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

@@ -7,11 +7,11 @@ dashedName: step-77
# --description-- # --description--
Create a new CSS rule to target `cap`. In the new rule, set the `width` property to `60px`, and the `height` to `25px`. Create a new CSS rule to target the class `cap`. In the new rule, set the `width` property to `60px`, and the `height` to `25px`.
# --hints-- # --hints--
You should use a class selector to target the `class` attribute, `cap`. You should use a class selector to target the class `cap`.
```js ```js
assert(new __helpers.CSSHelp(document).getStyle('.cap')); assert(new __helpers.CSSHelp(document).getStyle('.cap'));

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

@@ -7,7 +7,7 @@ dashedName: step-78
# --description-- # --description--
It looks like your sleeve disappeared, but don't worry -- it's still there. What happened is that your new `cap` `div` is taking up the entire width of the marker, and is pushing the sleeve down to the next line. It looks like your sleeve disappeared, but don't worry -- it's still there. What happened is that your new cap `div` is taking up the entire width of the marker, and is pushing the sleeve down to the next line.
This is because the default `display` property for `div` elements is `block`. So when two `block` elements are next to each other, they stack like actual blocks. For example, your marker elements are all stacked on top of each other. This is because the default `display` property for `div` elements is `block`. So when two `block` elements are next to each other, they stack like actual blocks. For example, your marker elements are all stacked on top of each other.

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

@@ -20,7 +20,7 @@ const greenMarkerChildren = [...document.querySelector('.green')?.children];
assert(greenMarkerChildren.every(child => child?.localName === 'div') && greenMarkerChildren.length === 2); assert(greenMarkerChildren.every(child => child?.localName === 'div') && greenMarkerChildren.length === 2);
``` ```
Your green marker's `div.cap` element should be before the `div.sleeve` element. Your green marker's cap `div` element should be before the sleeve `div` element.
```js ```js
const greenMarkerChildren = [...document.querySelector('.green')?.children]; const greenMarkerChildren = [...document.querySelector('.green')?.children];
@@ -36,7 +36,7 @@ const blueMarkerChildren = [...document.querySelector('.blue')?.children];
assert(blueMarkerChildren.every(child => child?.localName === 'div') && blueMarkerChildren.length === 2); assert(blueMarkerChildren.every(child => child?.localName === 'div') && blueMarkerChildren.length === 2);
``` ```
Your green marker's `div.cap` element should be before the `div.sleeve` element. Your green marker's cap `div` element should be before the sleeve `div` element.
```js ```js
const blueMarkerChildren = [...document.querySelector('.blue')?.children]; const blueMarkerChildren = [...document.querySelector('.blue')?.children];