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

fix(curriculum): css and html test issues (#42045)

Browse Source 
* fix: css and html issues

* fix: issues with css test

* fix: allow spaces in solution css

* fix: css tests for use-rgb-to-mix-colors
This commit is contained in:
Seth Falco
2021-05-21 13:18:42 +02:00
committed by GitHub
parent efffe56dfd
commit 4d024f3e4b
13 changed files with 26 additions and 26 deletions
Download Patch File Download Diff File Expand all files Collapse all files

6
curriculum/challenges/english/01-responsive-web-design/applied-visual-design/adjust-the-hue-of-a-color.md
View File

@ -30,19 +30,19 @@ Change the `background-color` of each `div` element based on the class names (`g
Your code should use the `hsl()` property to declare the color `green`.
```js
assert(code.match(/\.green\s*?{\s*?background-color:\s*?hsl/gi));
assert(code.match(/\.green\s*?{\s*?background-color\s*:\s*?hsl/gi));
```
Your code should use the `hsl()` property to declare the color `cyan`.
```js
assert(code.match(/\.cyan\s*?{\s*?background-color:\s*?hsl/gi));
assert(code.match(/\.cyan\s*?{\s*?background-color\s*:\s*?hsl/gi));
```
Your code should use the `hsl()` property to declare the color `blue`.
```js
assert(code.match(/\.blue\s*?{\s*?background-color:\s*?hsl/gi));
assert(code.match(/\.blue\s*?{\s*?background-color\s*:\s*?hsl/gi));
```
The `div` element with class `green` should have a `background-color` of green.

2
curriculum/challenges/english/01-responsive-web-design/basic-css/give-a-background-color-to-a-div-element.md
View File

@ -40,7 +40,7 @@ assert($('div').css('background-color') === 'rgb(192, 192, 192)');
A class named `silver-background` should be defined within the `style` element and the value of `silver` should be assigned to the `background-color` property.
```js
assert(code.match(/\.silver-background\s*{\s*background-color:\s*silver;\s*}/));
assert(code.match(/\.silver-background\s*{\s*background-color\s*:\s*silver\s*;?\s*}/));
```
# --seed--

2
curriculum/challenges/english/01-responsive-web-design/basic-css/prioritize-one-style-over-another.md
View File

@ -32,7 +32,7 @@ assert($('h1').hasClass('pink-text'));
Your `<style>` should have a `pink-text` CSS class that changes the `color`.
```js
assert(code.match(/\.pink-text\s*\{\s*color\s*:\s*.+\s*;\s*\}/g));
assert(code.match(/\.pink-text\s*\{\s*color\s*:\s*.+\s*;?\s*\}/g));
```
Your `h1` element should be pink.

4
curriculum/challenges/english/01-responsive-web-design/basic-css/size-your-images.md
View File

@ -31,8 +31,8 @@ Your `img` element should have the class `smaller-image`.
```js
assert(
$("img[src='https://bit.ly/fcc-relaxing-cat']").attr('class') ===
'smaller-image'
$("img[src='https://bit.ly/fcc-relaxing-cat']").attr('class')
.trim().split(/\s+/g).includes('smaller-image')
);
```

2
curriculum/challenges/english/01-responsive-web-design/basic-css/specify-how-fonts-should-degrade.md
View File

@ -47,7 +47,7 @@ Your h2 element should degrade to the font `monospace` when `Lobster` is not ava
```js
assert(
/\s*h2\s*\{\s*font-family\:\s*(\'|")?Lobster(\'|")?,\s*monospace\s*;\s*\}/gi.test(
/\s*h2\s*\{\s*font-family\s*\:\s*(\'|"|)Lobster\1\s*,\s*monospace\s*;?\s*\}/gi.test(
code
)
);

2
curriculum/challenges/english/01-responsive-web-design/basic-css/understand-absolute-versus-relative-units.md
View File

@ -37,7 +37,7 @@ assert(
Your `red-box` class should give elements 1.5em of `padding`.
```js
assert(code.match(/\.red-box\s*?{[\s\S]*padding:\s*?1\.5em/gi));
assert(code.match(/\.red-box\s*?{[\s\S]*padding\s*:\s*?1\.5em/gi));
```
# --seed--

2
curriculum/challenges/english/01-responsive-web-design/basic-css/use-a-css-class-to-style-an-element.md
View File

@ -46,7 +46,7 @@ assert($('h2').hasClass('red-text'));
Your stylesheet should declare a `red-text` class and have its color set to `red`.
```js
assert(code.match(/\.red-text\s*\{\s*color\s*:\s*red;\s*\}/g));
assert(code.match(/\.red-text\s*\{\s*color\s*:\s*red;?\s*\}/g));
```
You should not use inline style declarations like `style="color: red"` in your `h2` element.

8
curriculum/challenges/english/01-responsive-web-design/basic-css/use-abbreviated-hex-code.md
View File

@ -32,7 +32,7 @@ assert($('.red-text').css('color') === 'rgb(255, 0, 0)');
The abbreviated `hex code` for the color red should be used instead of the hex code `#FF0000`.
```js
assert(code.match(/\.red-text\s*?{\s*?color:\s*?#F00\s*?;\s*?}/gi));
assert(code.match(/\.red-text\s*?{\s*?color\s*:\s*?#F00\s*?;?\s*?}/gi));
```
Your `h1` element with the text `I am green!` should be given the `color` green.
@ -44,7 +44,7 @@ assert($('.green-text').css('color') === 'rgb(0, 255, 0)');
The abbreviated `hex code` for the color green should be used instead of the hex code `#00FF00`.
```js
assert(code.match(/\.green-text\s*?{\s*?color:\s*?#0F0\s*?;\s*?}/gi));
assert(code.match(/\.green-text\s*?{\s*?color\s*:\s*?#0F0\s*?;?\s*?}/gi));
```
Your `h1` element with the text `I am cyan!` should be given the `color` cyan.
@ -56,7 +56,7 @@ assert($('.cyan-text').css('color') === 'rgb(0, 255, 255)');
The abbreviated `hex code` for the color cyan should be used instead of the hex code `#00FFFF`.
```js
assert(code.match(/\.cyan-text\s*?{\s*?color:\s*?#0FF\s*?;\s*?}/gi));
assert(code.match(/\.cyan-text\s*?{\s*?color\s*:\s*?#0FF\s*?;?\s*?}/gi));
```
Your `h1` element with the text `I am fuchsia!` should be given the `color` fuchsia.
@ -68,7 +68,7 @@ assert($('.fuchsia-text').css('color') === 'rgb(255, 0, 255)');
The abbreviated `hex code` for the color fuchsia should be used instead of the hex code `#FF00FF`.
```js
assert(code.match(/\.fuchsia-text\s*?{\s*?color:\s*?#F0F\s*?;\s*?}/gi));
assert(code.match(/\.fuchsia-text\s*?{\s*?color\s*:\s*?#F0F\s*?;?\s*?}/gi));
```
# --seed--

8
curriculum/challenges/english/01-responsive-web-design/basic-css/use-hex-code-to-mix-colors.md
View File

@ -36,7 +36,7 @@ assert($('.red-text').css('color') === 'rgb(255, 0, 0)');
The `hex code` for the color red should be used instead of the word `red`.
```js
assert(code.match(/\.red-text\s*?{\s*?color:\s*?(#FF0000|#F00)\s*?;\s*?}/gi));
assert(code.match(/\.red-text\s*?{\s*?color\s*:\s*?(#FF0000|#F00)\s*?;?\s*?}/gi));
```
Your `h1` element with the text `I am green!` should be given the `color` green.
@ -48,7 +48,7 @@ assert($('.green-text').css('color') === 'rgb(0, 255, 0)');
The `hex code` for the color green should be used instead of the word `green`.
```js
assert(code.match(/\.green-text\s*?{\s*?color:\s*?(#00FF00|#0F0)\s*?;\s*?}/gi));
assert(code.match(/\.green-text\s*?{\s*?color\s*:\s*?(#00FF00|#0F0)\s*?;?\s*?}/gi));
```
Your `h1` element with the text `I am dodger blue!` should be given the `color` dodger blue.
@ -60,7 +60,7 @@ assert($('.dodger-blue-text').css('color') === 'rgb(30, 144, 255)');
The `hex code` for the color dodger blue should be used instead of the word `dodgerblue`.
```js
assert(code.match(/\.dodger-blue-text\s*?{\s*?color:\s*?#1E90FF\s*?;\s*?}/gi));
assert(code.match(/\.dodger-blue-text\s*?{\s*?color\s*:\s*?#1E90FF\s*?;?\s*?}/gi));
```
Your `h1` element with the text `I am orange!` should be given the `color` orange.
@ -72,7 +72,7 @@ assert($('.orange-text').css('color') === 'rgb(255, 165, 0)');
The `hex code` for the color orange should be used instead of the word `orange`.
```js
assert(code.match(/\.orange-text\s*?{\s*?color:\s*?#FFA500\s*?;\s*?}/gi));
assert(code.match(/\.orange-text\s*?{\s*?color\s*:\s*?#FFA500\s*?;?\s*?}/gi));
```
# --seed--

8
curriculum/challenges/english/01-responsive-web-design/basic-css/use-rgb-to-mix-colors.md
View File

@ -30,7 +30,7 @@ You should use `rgb` for the color red.
```js
assert(
code.match(
/\.red-text\s*?{\s*?color:\s*?rgb\(\s*?255\s*?,\s*?0\s*?,\s*?0\s*?\)\s*?;\s*?}/gi
/\.red-text\s*{\s*color\s*:\s*rgb\(\s*255\s*,\s*0\s*,\s*0\s*\)\s*;?\s*}/gi
)
);
```
@ -46,7 +46,7 @@ You should use `rgb` for the color orchid.
```js
assert(
code.match(
/\.orchid-text\s*?{\s*?color:\s*?rgb\(\s*?218\s*?,\s*?112\s*?,\s*?214\s*?\)\s*?;\s*?}/gi
/\.orchid-text\s*{\s*color\s*:\s*rgb\(\s*218\s*,\s*112\s*,\s*214\s*\)\s*;?\s*}/gi
)
);
```
@ -62,7 +62,7 @@ You should use `rgb` for the color blue.
```js
assert(
code.match(
/\.blue-text\s*?{\s*?color:\s*?rgb\(\s*?0\s*?,\s*?0\s*?,\s*?255\s*?\)\s*?;\s*?}/gi
/\.blue-text\s*{\s*color\s*:\s*rgb\(\s*0\s*,\s*0\s*,\s*255\s*\)\s*;?\s*}/gi
)
);
```
@ -78,7 +78,7 @@ You should use `rgb` for the color sienna.
```js
assert(
code.match(
/\.sienna-text\s*?{\s*?color:\s*?rgb\(\s*?160\s*?,\s*?82\s*?,\s*?45\s*?\)\s*?;\s*?}/gi
/\.sienna-text\s*{\s*color\s*:\s*rgb\(\s*160\s*,\s*82\s*,\s*45\s*\)\s*;?\s*}/gi
)
);
```

4
curriculum/challenges/english/03-front-end-libraries/sass/store-data-with-sass-variables.md
View File

@ -39,13 +39,13 @@ Create a variable `$text-color` and set it to `red`. Then change the value of th
Your code should have a Sass variable declared for `$text-color` with a value of `red`.
```js
assert(code.match(/\$text-color:\s*?red;/g));
assert(code.match(/\$text-color\s*:\s*?red\s*;/g));
```
Your code should use the `$text-color` variable to change the `color` for the `.blog-post` and `h2` items.
```js
assert(code.match(/color:\s*?\$text-color;/g));
assert(code.match(/color\s*:\s*\$text-color\s*;?/g));
```
Your `.blog-post` element should have a `color` of red.

2
curriculum/challenges/english/04-data-visualization/data-visualization-with-d3/add-a-hover-effect-to-a-d3-element.md
View File

@ -21,7 +21,7 @@ Use the `attr()` method to add a class of `bar` to all the `rect` elements. This
Your `rect` elements should have a class of `bar`.
```js
assert($('rect').attr('class') == 'bar');
assert($('rect').attr('class').trim().split(/\s+/g).includes('bar'));
```
# --seed--

2
curriculum/challenges/english/04-data-visualization/data-visualization-with-d3/add-classes-with-d3.md
View File

@ -27,7 +27,7 @@ Add the `attr()` method to the code in the editor and put a class of `bar` on th
Your `div` elements should have a class of `bar`.
```js
assert($('div').attr('class') == 'bar');
assert($('div').attr('class').trim().split(/\s+/g).includes('bar'));
```
Your code should use the `attr()` method.