jprdonnelly/freeCodeCamp
1
0
Fork 0
mirror of https://github.com/freeCodeCamp/freeCodeCamp.git synced 2026-03-01 08:05:25 -05:00
Code Issues Projects Releases Wiki Activity

fix(curriculum): tests and instructions in book inventory lab (#57996)

Browse Source
This commit is contained in:
Dario-DC
2025-01-09 18:29:24 +01:00
committed by GitHub
parent a8ae17502f
commit 3e8dbfcaec
1 changed files with 58 additions and 32 deletions
Download Patch File Download Diff File Expand all files Collapse all files

90
curriculum/challenges/english/25-front-end-development/lab-book-inventory-app/66a207974c806a19d6607073.md
View File

@@ -27,9 +27,9 @@ Fulfill the user stories below and get all the tests to pass to complete the lab
1. You should use an attribute selector to target the `span` elements with the class of `status` that are descendants of `tr` elements with the class of `in-progress` and set their `border` and `background-image` properties.
1. You should use an attribute selector to target the `span` elements with the class of `status` and the `span` elements with the class value starting with `rate` and set their `height`, `width`, and `padding` properties.
1. You should use an attribute selector to target the `span` elements which are direct children of `span` elements with the `class` value starting with `rate` and set their `border`, `border-radius`, `margin`, `height`, `width`, and `background-color` properties.
1. You should use an attribute selector to target the first descendant of `span` elements that have `one` as a part of their `class` value and set its `background-image` property to use a `linear-gradient`.
1. You should use an attribute selector to target the first two descendants of `span` elements that have `two` as a part of their `class` value and set their `background-image` property to use a `linear-gradient`.
1. You should use an attribute selector to target the three `span` elements that are descendants of `span` elements that have `three` as a part of their `class` value and set their `background-image` property to use a `linear-gradient`.
1. You should use an attribute selector to target the first descendant of `span` elements that have the word `one` as a part of their `class` value and set its `background-image` property to use a `linear-gradient`.
1. You should use an attribute selector to target the first two descendants of `span` elements that have the word `two` as a part of their `class` value and set their `background-image` property to use a `linear-gradient`.
1. You should use an attribute selector to target the three `span` elements that are descendants of `span` elements that have the word `three` as a part of their `class` value and set their `background-image` property to use a `linear-gradient`.
# --hints--
@@ -363,56 +363,82 @@ You should use an attribute selector to target the `span` elements which are dir
assert.isNotEmpty(new __helpers.CSSHelp(document).getStyle('span[class^="rate"] > span')?.getPropVal('background-color'));
```
You should have an attribute selector to target the first descendant of `span` elements that have `one` as a part of their `class` value.
You should have an attribute selector to target the first descendant of `span` elements that have the word `one` as a part of their `class` value.
```js
const selector1 = new __helpers.CSSHelp(document).getStyle('span[class~="one"] :first-child');
const selector2 = new __helpers.CSSHelp(document).getStyle('span[class~="one"] :nth-child(1)');
assert.exists(selector1 || selector2);
const selectors = [
'span[class~="one"] :first-child',
'span[class~="one"] :nth-child(1)',
'span[class~="one"] :first-of-type',
'span[class~="one"] span:first-child',
'span[class~="one"] span:nth-child(1)',
'span[class~="one"] span:first-of-type'
]
assert.isNotNull(new __helpers.CSSHelp(document).getStyleAny(selectors));
```
You should use an attribute selector to target the first descendant of `span` elements that have `one` as a part of their `class` value and set its `background-image` property to use a `linear-gradient`.
You should use an attribute selector to target the first descendant of `span` elements that have the word `one` as a part of their `class` value and set its `background-image` property to use a `linear-gradient`.
```js
const selector1 = new __helpers.CSSHelp(document).getStyle('span[class~="one"] :first-child');
const selector2 = new __helpers.CSSHelp(document).getStyle('span[class~="one"] :nth-child(1)');
assert.isTrue(selector1?.getPropVal('background-image').includes('linear-gradient(') || selector2?.getPropVal('background-image').includes('linear-gradient('));
const selectors = [
'span[class~="one"] :first-child',
'span[class~="one"] :nth-child(1)',
'span[class~="one"] :first-of-type',
'span[class~="one"] span:first-child',
'span[class~="one"] span:nth-child(1)',
'span[class~="one"] span:first-of-type'
]
assert.isTrue(new __helpers.CSSHelp(document).getStyleAny(selectors)?.getPropVal('background-image').includes('linear-gradient('));
```
You should have an attribute selector to target the first two descendants of `span` elements that have `two` as a part of their `class` value.
You should have an attribute selector to target the first two descendants of `span` elements that have the word `two` as a part of their `class` value.
```js
const selector1 = new __helpers.CSSHelp(document).getStyle('span[class~="two"] :nth-child(1), span[class~="two"] :nth-child(2)');
const selector2 = new __helpers.CSSHelp(document).getStyle('span[class~="two"] :nth-child(2), span[class~="two"] :nth-child(1)');
const selector3 = new __helpers.CSSHelp(document).getStyle('span[class~="two"] :first-child, span[class~="two"] :nth-child(2)');
const selector4 = new __helpers.CSSHelp(document).getStyle('span[class~="two"] :nth-child(2), span[class~="two"] :first-child');
assert.exists(selector1 || selector2 || selector3 || selector4);
const selectors = [
'span[class~="two"] :nth-child(1), span[class~="two"] :nth-child(2)',
'span[class~="two"] :nth-child(2), span[class~="two"] :nth-child(1)',
'span[class~="two"] :first-child, span[class~="two"] :nth-child(2)',
'span[class~="two"] :nth-child(2), span[class~="two"] :first-child',
'span[class~="two"] :nth-of-type(-n+2)',
'span[class~="two"] :nth-child(-n+2)',
'span[class~="two"] span:nth-child(1), span[class~="two"] span:nth-child(2)',
'span[class~="two"] span:nth-child(2), span[class~="two"] span:nth-child(1)',
'span[class~="two"] span:first-child, span[class~="two"] span:nth-child(2)',
'span[class~="two"] span:nth-child(2), span[class~="two"] span:first-child',
'span[class~="two"] span:nth-of-type(-n+2)',
'span[class~="two"] span:nth-child(-n+2)'
]
assert.isNotNull(new __helpers.CSSHelp(document).getStyleAny(selectors));
```
You should use an attribute selector to target the first two descendants of `span` elements that have `two` as a part of their `class` value and set their `background-image` property to use a `linear-gradient`.
You should use an attribute selector to target the first two descendants of `span` elements that have the word `two` as a part of their `class` value and set their `background-image` property to use a `linear-gradient`.
```js
const selector1 = new __helpers.CSSHelp(document).getStyle('span[class~="two"] :nth-child(1), span[class~="two"] :nth-child(2)');
const selector2 = new __helpers.CSSHelp(document).getStyle('span[class~="two"] :nth-child(2), span[class~="two"] :nth-child(1)');
const selector3 = new __helpers.CSSHelp(document).getStyle('span[class~="two"] :first-child, span[class~="two"] :nth-child(2)');
const selector4 = new __helpers.CSSHelp(document).getStyle('span[class~="two"] :nth-child(2), span[class~="two"] :first-child');
const selectors = [selector1, selector2, selector3, selector4];
let containsSelector = false;
for (let selector of selectors) {
if (selector?.backgroundImage.includes('linear-gradient(')) {
containsSelector = true;
}
}
assert.isTrue(containsSelector);
const selectors = [
'span[class~="two"] :nth-child(1), span[class~="two"] :nth-child(2)',
'span[class~="two"] :nth-child(2), span[class~="two"] :nth-child(1)',
'span[class~="two"] :first-child, span[class~="two"] :nth-child(2)',
'span[class~="two"] :nth-child(2), span[class~="two"] :first-child',
'span[class~="two"] :nth-of-type(-n+2)',
'span[class~="two"] :nth-child(-n+2)',
'span[class~="two"] span:nth-child(1), span[class~="two"] span:nth-child(2)',
'span[class~="two"] span:nth-child(2), span[class~="two"] span:nth-child(1)',
'span[class~="two"] span:first-child, span[class~="two"] span:nth-child(2)',
'span[class~="two"] span:nth-child(2), span[class~="two"] span:first-child',
'span[class~="two"] span:nth-of-type(-n+2)',
'span[class~="two"] span:nth-child(-n+2)'
]
assert.isTrue(new __helpers.CSSHelp(document).getStyleAny(selectors)?.backgroundImage.includes('linear-gradient('))
```
You should have an attribute selector to target the `span` elements that are descendants of `span` elements that have `three` as a part of their `class` value.
You should have an attribute selector to target the `span` elements that are descendants of `span` elements that have the word `three` as a part of their `class` value.
```js
assert.exists(new __helpers.CSSHelp(document).getStyle('span[class~="three"] span'));
```
You should use an attribute selector to target the `span` elements that are descendants of `span` elements that have `three` as a part of their `class` value and set their `background-image` property to use a `linear-gradient`.
You should use an attribute selector to target the `span` elements that are descendants of `span` elements that have the word `three` as a part of their `class` value and set their `background-image` property to use a `linear-gradient`.
```js
assert.include(new __helpers.CSSHelp(document).getStyle('span[class~="three"] span')?.getPropVal('background-image'), 'linear-gradient(');