jprdonnelly/freeCodeCamp
1
0
Fork 0
mirror of https://github.com/freeCodeCamp/freeCodeCamp.git synced 2026-05-20 12:03:11 -04:00
Code Issues Projects Releases Wiki Activity

chore(i18n,learn): processed translations (#49131)

Browse Source
This commit is contained in:
camperbot
2023-01-26 15:26:20 +05:30
committed by GitHub
parent 57317a4a32
commit 49dce5a9f9
152 changed files with 457 additions and 457 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
curriculum/challenges/chinese-traditional/02-javascript-algorithms-and-data-structures/basic-javascript/manipulate-arrays-with-pop.md
View File

@@ -1,6 +1,6 @@
---
id: 56bbb991ad1ed5201cd392cc
title: Manipulate Arrays With pop Method
title: 使用 pop 方法操作數組
challengeType: 1
videoUrl: 'https://scrimba.com/c/cRbVZAB'
forumTopicId: 18236

2
curriculum/challenges/chinese-traditional/02-javascript-algorithms-and-data-structures/basic-javascript/manipulate-arrays-with-push.md
View File

@@ -1,6 +1,6 @@
---
id: 56bbb991ad1ed5201cd392cb
title: Manipulate Arrays With push Method
title: 使用 push 方法操作數組
challengeType: 1
videoUrl: 'https://scrimba.com/c/cnqmVtJ'
forumTopicId: 18237

2
curriculum/challenges/chinese-traditional/02-javascript-algorithms-and-data-structures/basic-javascript/manipulate-arrays-with-shift.md
View File

@@ -1,6 +1,6 @@
---
id: 56bbb991ad1ed5201cd392cd
title: Manipulate Arrays With shift Method
title: 使用 shift 方法操作數組
challengeType: 1
videoUrl: 'https://scrimba.com/c/cRbVETW'
forumTopicId: 18238

2
curriculum/challenges/chinese-traditional/02-javascript-algorithms-and-data-structures/basic-javascript/manipulate-arrays-with-unshift.md
View File

@@ -1,6 +1,6 @@
---
id: 56bbb991ad1ed5201cd392ce
title: Manipulate Arrays With unshift Method
title: 使用 unshift 方法操作數組
challengeType: 1
videoUrl: 'https://scrimba.com/c/ckNDESv'
forumTopicId: 18239

2
curriculum/challenges/chinese-traditional/05-back-end-development-and-apis/basic-node-and-express/serve-json-on-a-specific-route.md
View File

@@ -18,7 +18,7 @@ HTML 服務器提供 HTML 服務，而 API 提供數據服務。 <dfn>REST</dfn>
# --hints--
The endpoint `/json` should serve the JSON object `{"message": "Hello json"}`
端口 `/json` 應該返回一個 JSON 對象 `{"message": "Hello json"}`
```js
(getUserInput) =>

4
curriculum/challenges/chinese-traditional/06-quality-assurance/quality-assurance-projects/american-british-translator.md
View File

@@ -282,7 +282,7 @@ async (getUserInput) => {
};
```
All 24 unit tests are complete and passing.
所有 24 項單元測試都已完成並通過。
```js
async (getUserInput) => {
@@ -307,7 +307,7 @@ async (getUserInput) => {
};
```
All 6 functional tests are complete and passing.
所有 6 項功能測試都已完成並通過。
```js
async (getUserInput) => {

4
curriculum/challenges/chinese-traditional/06-quality-assurance/quality-assurance-projects/sudoku-solver.md
View File

@@ -352,7 +352,7 @@ async (getUserInput) => {
};
```
All 12 unit tests are complete and passing.
所有 12 項單元測試都已完成並通過。
```js
async (getUserInput) => {
@@ -377,7 +377,7 @@ async (getUserInput) => {
};
```
All 14 functional tests are complete and passing.
所有 14 項功能測試都已完成並通過。
```js
async (getUserInput) => {

6
curriculum/challenges/chinese-traditional/14-responsive-web-design-22/learn-typography-by-building-a-nutrition-label/615f42a021625f656101ef93.md
View File

@@ -9,7 +9,7 @@ dashedName: step-22
同樣重要的元素之間的水平間距可以增加文本的可讀性。
Wrap the text `2/3 cup (55g)` in a `span` element.
將文本 `2/3 cup (55g)` 放在一個 `span` 元素內。
# --hints--
@@ -19,13 +19,13 @@ Wrap the text `2/3 cup (55g)` in a `span` element.
assert(document.querySelector('span'));
```
Your `span` element should have the text `2/3 cup (55g)`.
你的 `span` 元素應包含文本 `2/3 cup (55g)`。
```js
assert(document.querySelector('span')?.textContent?.trim() === '2/3 cup (55g)');
```
Your `p` element should still have the text `Serving size 2/3 cup (55g)`.
`p` 元素仍應包含文本 `Serving size 2/3 cup (55g)`。
```js
assert(document.querySelectorAll('p')?.[1]?.innerText === 'Serving size 2/3 cup (55g)');

6
curriculum/challenges/chinese-traditional/14-responsive-web-design-22/learn-typography-by-building-a-nutrition-label/615f4bfb9de4a16703b56eb6.md
View File

@@ -7,17 +7,17 @@ dashedName: step-23
# --description--
Now we can add the horizontal spacing using `flex`. In your `p` selector, add a `display` property set to `flex` and a `justify-content` property set to `space-between`.
現在我們可以使用 `flex` 添加水平間距。 在你的 `p` 選擇器中， 添加 `display` 屬性設置爲 `flex`，以及 `justify-content` 屬性設置爲 `space-between`。
# --hints--
Your `p` selector should have a `display` property set to `flex`.
你的 `p` 選擇器應該有一個 `display` 屬性設置爲 `flex`。
```js
assert(new __helpers.CSSHelp(document).getStyle('p')?.display === 'flex');
```
Your `p` selector should have a `justify-content` property set to `space-between`.
你的 `p` 選擇器應具有 `justify-content` 屬性設置爲 `space-between`。
```js
assert(new __helpers.CSSHelp(document).getStyle('p')?.justifyContent === 'space-between');

4
curriculum/challenges/chinese-traditional/14-responsive-web-design-22/learn-typography-by-building-a-nutrition-label/615f4ec58334106a4170c2a8.md
View File

@@ -7,7 +7,7 @@ dashedName: step-26
# --description--
Create a new `div` element below your `header` element, and give it a `class` attribute set to `divider large`.
在你的 `header` 元素下創建一個新的 `div` 元素，並將其 `class` 屬性設置爲 `divider large`。
# --hints--
@@ -23,7 +23,7 @@ assert(document.querySelectorAll('div')?.length === 3);
assert(document.querySelector('.label')?.lastElementChild?.localName === 'div');
```
Your new `div` element should have the `class` attribute set to `divider large`.
你的新 `div` 元素應該將 `class` 屬性設置爲 `divider large`。
```js
const div = document.querySelector('.label')?.lastElementChild;

10
curriculum/challenges/chinese-traditional/14-responsive-web-design-22/learn-typography-by-building-a-nutrition-label/615f4f9e4a40566b776a8f38.md
View File

@@ -7,29 +7,29 @@ dashedName: step-27
# --description--
Create a new `.large` selector and give it a `height` property set to `10px`. Also create an `.large, .medium` selector and set the `background-color` property to `black`.
創建一個新的 `.large` 選擇器，並將其 `height` 屬性設置爲 `10px`。 同時創建一個 `.large, .medium` 選擇器，並將 `background-color` 屬性設置爲 `black`。
# --hints--
You should have a new `.large` selector.
你應該有一個新的 `.large` 選擇器。
```js
assert(new __helpers.CSSHelp(document).getStyle('.large'));
```
Your `.large` selector should have a `height` property set to `10px`.
你的 `.large` 選擇器應該將 `height` 屬性設置爲 `10px`。
```js
assert(new __helpers.CSSHelp(document).getStyle('.large')?.height === '10px');
```
You should have a new `.large, .medium` selector.
你應該有一個新的 `.large, .medium` 選擇器。
```js
assert(new __helpers.CSSHelp(document).getStyle('.large, .medium'));
```
Your `.large, .medium` selector should have a `background-color` property set to `black`.
你的 `.large, .medium` 選擇器應該有一個 `background-color` 屬性設置爲 `black`。
```js
assert(new __helpers.CSSHelp(document).getStyle('.large, .medium')?.backgroundColor === 'black');

6
curriculum/challenges/chinese-traditional/14-responsive-web-design-22/learn-typography-by-building-a-nutrition-label/615f50473cc0196c6dd3892a.md
View File

@@ -7,13 +7,13 @@ dashedName: step-28
# --description--
You may notice there is still a small border at the bottom of your `.large` element. To reset this, give your `.large, .medium` selector a `border` property set to `0`.
你可能會注意到 `.large` 元素的底部仍有一個小邊框。 要重置它，給 `.large, .medium` 選擇器一個 `border` 屬性設置爲 `0`。
Note: the `medium`(medium) class will be utilized in step 37 for the thinner bars of the nutrition label.
注意：`medium`（中等）類將在步驟 37 中用於營養標籤的較細柱狀圖。
# --hints--
Your `.large, .medium` selector should have a `border` property set to `0`.
你的 `.large, .medium` 選擇器應該有一個 `border` 屬性設置爲 `0`。
```js
assert(new __helpers.CSSHelp(document).getStyle('.large, .medium')?.borderWidth === '0px');

4
curriculum/challenges/chinese-traditional/14-responsive-web-design-22/learn-typography-by-building-a-nutrition-label/615f51257a8a516d80b6c743.md
View File

@@ -7,7 +7,7 @@ dashedName: step-29
# --description--
Create a new `div` below your `.large` element and give it a `class` attribute set to `calories-info`.
在你的 `.large` 元素下創建一個新的 `div`，並將 `class` 屬性設置爲 `calories-info`。
# --hints--
@@ -23,7 +23,7 @@ assert(document.querySelectorAll('div')?.length === 4);
assert(document.querySelector('.label')?.lastElementChild?.classList?.contains('calories-info'));
```
Your new `div` should come after the `.large` element.
你的新 `div` 應該在 `.large` 元素之後。
```js
assert(document.querySelector('.label')?.lastElementChild?.previousElementSibling?.classList?.contains('large'));

12
curriculum/challenges/chinese-traditional/14-responsive-web-design-22/learn-typography-by-building-a-nutrition-label/615f51e4e5b24a6e80eccce1.md
View File

@@ -7,36 +7,36 @@ dashedName: step-30
# --description--
Within your `.calories-info` element, create a `div` element. Give that `div` element a `class` attribute set to `left-container`. Within the newly created `div` element, create a `h2` element with the text `Amount per serving`. Give the `h2` element a `class` attribute set to `bold small-text`.
在你的 `.calories-info` 元素中，創建一個 `div` 元素。 給那個 `div` 元素一個 `class` 屬性設置爲 `left-container`。 在新創建的 `div` 元素中，創建一個帶有文本 `Amount per serving` 的 `h2` 元素。 給 `h2` 元素一個 `class` 屬性設置爲 `bold small-text`。
# --hints--
You should create a new `div` element within your `.calories-info` element.
你應該在你的 `.calories-info` 元素中創建一個新的 `div` 元素。
```js
assert(document.querySelector('.calories-info')?.children?.[0]?.localName === 'div');
```
Your new `div` element should have a `class` attribute set to `left-container`.
你的新 `div` 元素應該有一個 `class` 屬性值爲 `left-container`。
```js
assert(document.querySelector('.calories-info')?.children?.[0]?.classList.contains('left-container'));
```
You should create a new `h2` element within your `.left-container` element.
你應該在你的 `.left-container` 元素中創建一個新的 `h2` 元素。
```js
assert(document.querySelector('.left-container')?.children?.[0]?.localName === 'h2');
```
Your new `h2` element should have a `class` attribute set to `bold small-text`.
你的新 `h2` 元素應該有一個 `class` 屬性設置爲 `bold small-text`。
```js
assert(document.querySelector('.left-container')?.children?.[0]?.classList.contains('bold'));
assert(document.querySelector('.left-container')?.children?.[0]?.classList.contains('small-text'));
```
Your new `h2` element should have the text `Amount per serving`.
你的新 `h2` 元素應包含文本 `Amount per serving`。
```js
assert(document.querySelector('.left-container')?.children?.[0]?.innerText === 'Amount per serving');

6
curriculum/challenges/chinese-traditional/14-responsive-web-design-22/learn-typography-by-building-a-nutrition-label/615f522dea4f776f64dc3e91.md
View File

@@ -9,17 +9,17 @@ dashedName: step-31
`rem` 單位代表 `root em`，與 `html` 元素的字體大小有關。
Create an `.small-text` selector and set the `font-size` to `0.85rem`, which would calculate to be roughly `13.6px` (remember that you set your `html` to have a `font-size` of `16px`).
創建一個 `.small-text` 選擇器，並將 `font-size` 設置爲 `0.85rem`，計算結果大致爲 `13.6px`（記得你之前將 `html` 設置爲具有 `16px` 的 `font-size`）。
# --hints--
You should have an `.small-text` selector.
你應該有一個 `.small-text` 選擇器。
```js
assert(new __helpers.CSSHelp(document).getStyle('.small-text'));
```
Your `.small-text` selector should have a `font-size` property set to `0.85rem`.
你的 `.small-text` 選擇器應該有一個 `font-size` 屬性設置爲 `0.85rem`。
```js
assert(new __helpers.CSSHelp(document).getStyle('.small-text')?.fontSize === '0.85rem');

14
curriculum/challenges/chinese-traditional/14-responsive-web-design-22/learn-typography-by-building-a-nutrition-label/615f5486b8fd4b71633f69b0.md
View File

@@ -1,41 +1,41 @@
---
id: 615f5486b8fd4b71633f69b0
title: Step 33
title: 步驟 33
challengeType: 0
dashedName: step-33
---
# --description--
Below your `.small-text` element, create a new `p` element with the text `Calories`. Also below the `.left-container` element, create a new `span` element with the text `230`.
在你的 `.small-text` 元素下方，創建一個新的 `p` 元素，具有文本 `Calories`。 在你的 `.left-container` 元素下方，創建一個新的 `span` 元素，具有文本 `230`。
# --hints--
You should have a new `p` element within your `.calories-info` element.
你應該在 `.calories-info` 元素中創建一個新的 `p` 元素。
```js
assert(document.querySelector('.calories-info')?.querySelector('p'))
```
You should have a new `span` element within your `.calories-info` element.
你應該在 `.calories-info` 元素中創建一個新的 `span` 元素。
```js
assert(document.querySelector('.calories-info')?.querySelector('span'))
```
Your `p` element should come after your `.small-text` element.
你的 `p` 元素應該在 `.small-text` 元素之後。
```js
assert(document.querySelector('.small-text')?.nextElementSibling?.localName === 'p');
```
Your `p` element should have the text `Calories`.
你的 `p` 元素應包含文本 `Calories`。
```js
assert(document.querySelector('.left-container')?.lastElementChild?.innerText === 'Calories');
```
Your `span` element should come after your `.left-container` element.
你的 `span` 元素應該位於 `.left-container` 元素之後。
```js
assert(document.querySelector('.left-container')?.nextElementSibling?.localName ==='span');

12
curriculum/challenges/chinese-traditional/14-responsive-web-design-22/learn-typography-by-building-a-nutrition-label/615f575b50b91e72af079480.md
View File

@@ -1,23 +1,23 @@
---
id: 615f575b50b91e72af079480
title: Step 35
title: 步驟 35
challengeType: 0
dashedName: step-35
---
# --description--
Create a new `.left-container p` selector setting the top and bottom margin to `-5px`, and the left and right margin to `-2px`. Also set the `font-size` to `2em` and `font-weight` to `700`.
創建一個新的 `.left-container p` 選擇器，將上下邊距設置爲 `-5px`，將左右邊距設置爲 `-2px`。 也將 `font-size` 設置爲 `2em`，將 `font-weight` 設置爲 `700`。
# --hints--
You should have a new `.left-container p` selector.
你應該有一個新的 `.left-container p` 選擇器。
```js
assert(new __helpers.CSSHelp(document).getStyle('.left-container p'));
```
Your new `.left-container p` selector should have a `margin` property set to `-5px -2px`.
你的新 `.left-container p` 選擇器應將 `margin` 屬性設置爲 `-5px -2px`。
```js
assert.equal(new __helpers.CSSHelp(document).getStyle('.left-container p')?.marginTop, '-5px');
@@ -26,13 +26,13 @@ assert.equal(new __helpers.CSSHelp(document).getStyle('.left-container p')?.marg
assert.equal(new __helpers.CSSHelp(document).getStyle('.left-container p')?.marginRight, '-2px');
```
Your new `.left-container p` selector should have a `font-size` property set to `2em`.
你的新 `.left-container p` 選擇器應將 `font-size` 屬性設置爲 `2em`。
```js
assert(new __helpers.CSSHelp(document).getStyle('.left-container p')?.fontSize === '2em');
```
Your new `.left-container p` selector should have a `font-weight` property set to `700`.
你的新 `.left-container p` 選擇器應該有一個 `font-weight` 屬性設置爲 `700`。
```js
assert(new __helpers.CSSHelp(document).getStyle('.left-container p')?.fontWeight === '700');

8
curriculum/challenges/chinese-traditional/14-responsive-web-design-22/learn-typography-by-building-a-nutrition-label/615f5af373a68e744a3c5a76.md
View File

@@ -1,13 +1,13 @@
---
id: 615f5af373a68e744a3c5a76
title: Step 36
title: 步驟 36
challengeType: 0
dashedName: step-36
---
# --description--
Create a `.calories-info span` selector, set its `font-size` to `2.4em` and `font-weight` to `700`.
創建一個 `.calories-info span` 選擇器，將其 `font-size` 設置爲 `2.4em`，`font-weight` 設置爲 `700`。
# --hints--
@@ -17,13 +17,13 @@ Create a `.calories-info span` selector, set its `font-size` to `2.4em` and `fon
assert(new __helpers.CSSHelp(document).getStyle('.calories-info span'));
```
Your `.calories-info span` selector should have a `font-size` property set to `2.4em`.
你的 `.calories-info span` 選擇器應該有一個 `font-size` 屬性設置爲 `2.4em`。
```js
assert(new __helpers.CSSHelp(document).getStyle('.calories-info span')?.fontSize === '2.4em');
```
Your `.calories-info span` selector should have a `font-weight` property set to `700`.
你的 `.calories-info span` 選擇器應該有一個 `font-weight` 屬性設置爲 `700`。
```js
assert(new __helpers.CSSHelp(document).getStyle('.calories-info span')?.fontWeight === '700');

6
curriculum/challenges/chinese-traditional/14-responsive-web-design-22/learn-typography-by-building-a-nutrition-label/615f5fd85d0062761f288364.md
View File

@@ -1,6 +1,6 @@
---
id: 615f5fd85d0062761f288364
title: Step 37
title: 步驟 37
challengeType: 0
dashedName: step-37
---
@@ -9,11 +9,11 @@ dashedName: step-37
排版往往是藝術而非科學。 你可能需要調整對齊等內容，直到它看起來正確爲止。
Give your `.calories-info span` selector a `margin` set to `-7px -2px`. 這會將 `230` 文本移動到位。
給你的 `.calories-info span` 選擇器一個 `margin` 設置爲 `-7px -2px`。 這會將 `230` 文本移動到位。
# --hints--
Your `.calories-info span` selector should have a `margin` set to `-7px -2px`.
你的 `.calories-info span` 選擇器應將 `margin` 設置爲 `-7px -2px`。
```js
assert(new __helpers.CSSHelp(document).getStyle('.calories-info span')?.margin === '-7px -2px');

6
curriculum/challenges/chinese-traditional/14-responsive-web-design-22/learn-typography-by-building-a-nutrition-label/615f61338c8ca176d6445574.md
View File

@@ -1,13 +1,13 @@
---
id: 615f61338c8ca176d6445574
title: Step 38
title: 步驟 38
challengeType: 0
dashedName: step-38
---
# --description--
Below your `.calories-info` element, add a `div` with the `class` attribute set to `divider medium`.
在你的 `.calories-info` 元素下方，添加一個 `div`，並將 `class` 屬性設置爲 `divider medium`。
# --hints--
@@ -17,7 +17,7 @@ Below your `.calories-info` element, add a `div` with the `class` attribute set
assert(document.querySelectorAll('.label > div')?.length === 3)
```
Your new `div` should have the `class` attribute set to `divider medium`. 這個 div 應該是 `.label` 元素中的最後一個元素。
你的新的 `div` 應該將 `class` 屬性設置爲 `divider medium`。 這個 div 應該是 `.label` 元素中的最後一個元素。
```js
const div = document.querySelector('.label')?.lastElementChild;

8
curriculum/challenges/chinese-traditional/14-responsive-web-design-22/learn-typography-by-building-a-nutrition-label/615f666ac5edea782feb7e75.md
View File

@@ -1,23 +1,23 @@
---
id: 615f666ac5edea782feb7e75
title: Step 39
title: 步驟 39
challengeType: 0
dashedName: step-39
---
# --description--
Create an `.medium` selector and give it a `height` property of `5px`.
創建一個 `.medium` 選擇器，併爲其設置 `height` 屬性爲 `5px`。
# --hints--
You should create an `.medium` selector.
你應該創建一個 `.medium` 選擇器。
```js
assert(new __helpers.CSSHelp(document).getStyle('.medium'));
```
Your `.medium` selector should have a `height` property set to `5px`.
你的`.medium` 選擇器應該將 `height` 屬性設置爲 `5px`。
```js
assert(new __helpers.CSSHelp(document).getStyle('.medium')?.height === '5px');

10
curriculum/challenges/chinese-traditional/14-responsive-web-design-22/learn-typography-by-building-a-nutrition-label/615f671b6d1919792745aa5d.md
View File

@@ -1,17 +1,17 @@
---
id: 615f671b6d1919792745aa5d
title: Step 40
title: 步驟 40
challengeType: 0
dashedName: step-40
---
# --description--
Create a new `div` element below your `.medium` element. Give it a `class` attribute set to `daily-value small-text`. Within this new `div`, add a `p` element with the text `% Daily Value *`, and set the `class` attribute to `bold right`.
在你的 `.medium` 元素下創建一個新的 `div` 元素。 給它一個 `class` 屬性設置爲 `daily-value small-text`。 在這個新的 `div` 中，添加一個帶有文本 `% Daily Value *` 的 `p` 元素，並設置 `class` 屬性爲 `bold right`。
# --hints--
You should create a new `div` element after your `.medium` element.
你應該在 `.medium` 元素之後創建一個新的 `div` 元素。
```js
assert(document.querySelector('.label')?.lastElementChild?.localName === 'div');
@@ -19,7 +19,7 @@ assert(document.querySelector('.label')?.lastElementChild?.previousElementSiblin
assert(document.querySelector('.label')?.lastElementChild?.previousElementSibling?.classList?.contains('medium'));
```
Your new `div` should have a `class` attribute set to `daily-value small-text`.
你的新 `div` 應該有一個 `class` 屬性設置爲 `daily-value small-text`。
```js
assert(document.querySelector('.label')?.lastElementChild?.classList?.contains('daily-value'));
@@ -38,7 +38,7 @@ assert(document.querySelector('.label')?.lastElementChild?.firstElementChild?.lo
assert(document.querySelector('.label')?.lastElementChild?.firstElementChild?.textContent === '% Daily Value *');
```
Your new `p` element should have a `class` attribute set to `bold right`.
你的新 `p` 元素應該有一個 `class` 屬性設置爲 `bold right`。
```js
assert(document.querySelector('.label')?.lastElementChild?.firstElementChild?.classList?.contains('bold'));

6
curriculum/challenges/chinese-traditional/14-responsive-web-design-22/learn-typography-by-building-a-nutrition-label/615f6823d0815b7a991f2a75.md
View File

@@ -1,17 +1,17 @@
---
id: 615f6823d0815b7a991f2a75
title: Step 42
title: 步驟 42
challengeType: 0
dashedName: step-42
---
# --description--
Use your existing `.divider` element as an example to add a new divider after the `p` element.
以現有的 `.divider` 元素爲例，在 `p` 元素之後添加新的分隔符。
# --hints--
You should create a new `div` within your `.daily-value` element.
你應該在 `.daily-value` 元素之後創建一個新的 `div`。
```js
assert(document.querySelectorAll('.daily-value.small-text > div')?.length === 1)

16
curriculum/challenges/chinese-traditional/14-responsive-web-design-22/learn-typography-by-building-a-nutrition-label/615f6b2d164f81809efd9bdc.md
View File

@@ -1,13 +1,13 @@
---
id: 615f6b2d164f81809efd9bdc
title: Step 43
title: 步驟 43
challengeType: 0
dashedName: step-43
---
# --description--
在最後一個 `.divider` 元素之後，創建一個 `p` 元素併爲其指定文本 `Total Fat 8g 10%`。 將 `Total Fat` 包裹在 `span` 元素中，並將 `class` 設置爲 `bold`。 Wrap `10%` in another `span` element with the `class` set to `bold`. Finally, nest the `Total Fat` `span` element and the text `8g` in an additional `span` element for alignment.
在最後一個 `.divider` 元素之後，創建一個 `p` 元素併爲其指定文本 `Total Fat 8g 10%`。 將 `Total Fat` 包裹在 `span` 元素中，並將 `class` 設置爲 `bold`。 將 `10%` 包裹在另一個 `span` 元素中，並將 `class` 設置爲 `bold`。 最後：嵌套 `Total Fat` `span` 元素和文本 `8g` 在另一個 `span` 元素中，以實現對齊。
# --hints--
@@ -23,37 +23,37 @@ assert(document.querySelector('.daily-value.small-text')?.lastElementChild?.loca
assert(document.querySelector('.daily-value.small-text')?.lastElementChild?.innerText?.match(/Total Fat[\s|\n]+8g[\s|\n]+10%/));
```
Your `p` element should have three `span` elements.
你的 `p` 元素應該有三個 `span` 元素。
```js
assert(document.querySelector('.daily-value.small-text')?.lastElementChild?.querySelectorAll('span')?.length === 3);
```
One `span` element should wrap the text `Total Fat`.
一個 `span` 元素應該包含文本 `Total Fat`。
```js
assert(document.querySelector('.daily-value.small-text')?.lastElementChild?.querySelector('span > span')?.innerText === 'Total Fat');
```
The `span` element around `Total Fat` should have the `class` set to `bold`.
包裹 `Total Fat` 的 `span` 元素應該有 `class` 爲 `bold`。
```js
assert(document.querySelector('.daily-value.small-text')?.lastElementChild?.querySelector('span > span')?.className === 'bold');
```
A `span` element should wrap the text `10%`.
一個 `span` 元素應該包含文本 `10%`。
```js
assert(document.querySelector('.daily-value.small-text')?.lastElementChild?.querySelector('span + span')?.innerText === '10%');
```
The `span` element around `10%` should have the `class` set to `bold`.
包裹 `10%` 的 `span` 元素應該有 `class` 爲 `bold`。
```js
assert(document.querySelector('.daily-value.small-text')?.lastElementChild?.querySelectorAll('span')?.[1]?.className === 'bold');
```
A `span` element should have the text `Total Fat 8g`.
一個 `span` 元素應該包含文本 `Total Fat 8g`。
```js
assert(document.querySelector('.daily-value.small-text')?.lastElementChild?.innerText?.match(/Total Fat[\s|\n]+8g/));

6
curriculum/challenges/chinese-traditional/14-responsive-web-design-22/learn-typography-by-building-a-nutrition-label/615f6cc778f7698258467596.md
View File

@@ -1,13 +1,13 @@
---
id: 615f6cc778f7698258467596
title: Step 44
title: 步驟 44
challengeType: 0
dashedName: step-44
---
# --description--
在帶有 `Total Fat` 文本的元素下方，使用文本 `Saturated Fat 1g 5%` 創建一個新的 `p` 元素。 Wrap the `5%` in a `span` with the `class` attribute set to `bold`. In this case this is enough to align the percentage to `5%`.
在帶有 `Total Fat` 文本的元素下方，使用文本 `Saturated Fat 1g 5%` 創建一個新的 `p` 元素。 將 `5%` 包裹在一個 `span` 中，並將 `class` 屬性設置爲 `bold`。 在這種情況下，將百分比設置爲 `5%` 足夠了。
# --hints--
@@ -30,7 +30,7 @@ assert(document.querySelector('.daily-value.small-text')?.lastElementChild?.inne
assert(document.querySelector('.daily-value.small-text')?.lastElementChild?.lastElementChild?.localName === 'span');
```
Your `span` element should have the `class` attribute set to `bold`.
你的 `span` 元素應該將 `class` 屬性設置爲 `bold`。
```js
assert(document.querySelector('.daily-value.small-text')?.lastElementChild?.lastElementChild?.classList?.contains('bold'));

2
curriculum/challenges/chinese-traditional/14-responsive-web-design-22/learn-typography-by-building-a-nutrition-label/615f6fddaac1e083502d3e6a.md
View File

@@ -1,6 +1,6 @@
---
id: 615f6fddaac1e083502d3e6a
title: Step 45
title: 步驟 45
challengeType: 0
dashedName: step-45
---

2
curriculum/challenges/chinese-traditional/14-responsive-web-design-22/learn-typography-by-building-a-nutrition-label/615f70077a4ff98424236c1e.md
View File

@@ -1,6 +1,6 @@
---
id: 615f70077a4ff98424236c1e
title: Step 46
title: 步驟 46
challengeType: 0
dashedName: step-46
---

2
curriculum/challenges/chinese-traditional/14-responsive-web-design-22/learn-typography-by-building-a-nutrition-label/615f72a872354a850d4f533e.md
View File

@@ -1,6 +1,6 @@
---
id: 615f72a872354a850d4f533e
title: Step 47
title: 步驟 47
challengeType: 0
dashedName: step-47
---

2
curriculum/challenges/chinese-traditional/14-responsive-web-design-22/learn-typography-by-building-a-nutrition-label/615f74a71f1e498619e38ee8.md
View File

@@ -1,6 +1,6 @@
---
id: 615f74a71f1e498619e38ee8
title: Step 48
title: 步驟 48
challengeType: 0
dashedName: step-48
---

2
curriculum/challenges/chinese-traditional/14-responsive-web-design-22/learn-typography-by-building-a-nutrition-label/615f7ad94380408d971d14f6.md
View File

@@ -1,6 +1,6 @@
---
id: 615f7ad94380408d971d14f6
title: Step 49
title: 步驟 49
challengeType: 0
dashedName: step-49
---

4
curriculum/challenges/chinese-traditional/14-responsive-web-design-22/learn-typography-by-building-a-nutrition-label/615f7bc680f7168ea01ebf99.md
View File

@@ -1,6 +1,6 @@
---
id: 615f7bc680f7168ea01ebf99
title: Step 50
title: 步驟 50
challengeType: 0
dashedName: step-50
---
@@ -13,7 +13,7 @@ dashedName: step-50
# --hints--
You should create a new `div` at the end of your `.daily-value` element.
你應該在 `.daily-value` 元素的末尾創建一個新的 `div`。
```js
assert(document.querySelector('.daily-value.small-text')?.lastElementChild?.localName === 'div');

10
curriculum/challenges/chinese-traditional/14-responsive-web-design-22/learn-typography-by-building-a-nutrition-label/615f7c71eab8218f846e4503.md
View File

@@ -1,17 +1,17 @@
---
id: 615f7c71eab8218f846e4503
title: Step 51
title: 步驟 51
challengeType: 0
dashedName: step-51
---
# --description--
在最後一個 `.divider` 之後，創建另一個 `p` 元素，其中包含文本 `Trans Fat 0g`。 通過將單詞 `Trans` 包裝在 `i` 元素中，將其變爲斜體。 給新的 `p` 元素的 `class` 屬性設置爲 `indent no-divider`。 Wrap `Trans Fat 0g` in a `span` element for alignment.
在最後一個 `.divider` 之後，創建另一個 `p` 元素，其中包含文本 `Trans Fat 0g`。 通過將單詞 `Trans` 包裝在 `i` 元素中，將其變爲斜體。 給新的 `p` 元素的 `class` 屬性設置爲 `indent no-divider`。 將 `Trans Fat 0g` 放在一個 `span` 元素中，以對齊它。
# --hints--
You should create a new `p` element at the end of your `.daily-value` element.
你應該在 `.daily-value` 元素的末尾創建一個新的 `p` 元素。
```js
assert(document.querySelector('.daily-value.small-text')?.lastElementChild?.localName === 'p');
@@ -43,13 +43,13 @@ assert(document.querySelector('.daily-value.small-text')?.lastElementChild?.quer
assert(document.querySelector('.daily-value.small-text')?.lastElementChild?.querySelector('i')?.innerText === 'Trans');
```
Your new `p` element should have a `span` element.
你的新 `p` 元素應該有一個 `span` 元素。
```js
assert(document.querySelector('.daily-value.small-text')?.lastElementChild?.querySelector('span'));
```
Your `span` element should wrap the text `Trans Fat 0g`.
你的 `span` 元素應該包含文本 `Trans Fat 0g`。
```js
assert(document.querySelector('.daily-value.small-text')?.lastElementChild?.querySelector('span')?.innerText?.match(/Trans[\s|\n]+Fat 0g/));

4
curriculum/challenges/chinese-traditional/14-responsive-web-design-22/learn-typography-by-building-a-nutrition-label/615f7d489a581590d1350288.md
View File

@@ -1,6 +1,6 @@
---
id: 615f7d489a581590d1350288
title: Step 52
title: 步驟 52
challengeType: 0
dashedName: step-52
---
@@ -11,7 +11,7 @@ dashedName: step-52
# --hints--
You should create a new `div` element at the end of your `.daily-value` element.
你應該在 `.daily-value` 元素的末尾創建一個新的 `div` 元素。
```js
assert(document.querySelector('.daily-value.small-text')?.lastElementChild?.localName === 'div');

18
curriculum/challenges/chinese-traditional/14-responsive-web-design-22/learn-typography-by-building-a-nutrition-label/615f7de4487b64919bb4aa5e.md
View File

@@ -1,17 +1,17 @@
---
id: 615f7de4487b64919bb4aa5e
title: Step 53
title: 步驟 53
challengeType: 0
dashedName: step-53
---
# --description--
在最後一個 `.divider` 之後，使用文本 `Cholesterol 0mg 0%` 創建一個新的 `p` 元素。 將文本 `Cholesterol` 包裹在 `span` 元素中，並將 `span` 元素的 `class` 屬性設置爲 `bold`。 Wrap the text `0%` in another `span` element, with the `class` set to `bold`. Finally, nest the `Cholesterol` and `0mg` span elements inside an additional span element for alignment.
在最後一個 `.divider` 之後，使用文本 `Cholesterol 0mg 0%` 創建一個新的 `p` 元素。 將文本 `Cholesterol` 包裹在 `span` 元素中，並將 `span` 元素的 `class` 屬性設置爲 `bold`。 將文本 `0%` 包裹在另一個 `span` 元素中，並將 `class` 設置爲 `bold`。 最後，嵌套 `Cholesterol` 和 `0mg` span 元素在另一個 span 元素中，以實現對齊。
# --hints--
You should create a new `p` element at the end of your `.daily-value` element.
你應該在 `.daily-value` 元素的末尾創建一個新的 `p` 元素。
```js
assert(document.querySelector('.daily-value.small-text')?.lastElementChild?.localName === 'p');
@@ -23,37 +23,37 @@ assert(document.querySelector('.daily-value.small-text')?.lastElementChild?.loca
assert(document.querySelector('.daily-value.small-text')?.lastElementChild?.innerText?.match(/Cholesterol[\s|\n]+0mg[\s|\n]+0%/));
```
Your new `p` element should have three `span` elements.
你的新的 `p` 元素應該有三個 `span` 元素。
```js
assert(document.querySelector('.daily-value.small-text')?.lastElementChild?.querySelectorAll('span')?.length === 3);
```
Your first `span` `Cholesterol` element should have the `class` attribute set to `bold`.
你的第一個 `span` `Cholesterol` 元素應該將 `class` 屬性設置爲 `bold`。
```js
assert(document.querySelector('.daily-value.small-text')?.lastElementChild?.firstElementChild?.firstElementChild?.classList?.contains('bold'));
```
Your first `span` element should wrap the text `Cholesterol 0mg`.
你的第一個 `span` 元素應該包含文本 `Cholesterol 0mg`。
```js
assert(document.querySelector('.daily-value.small-text')?.lastElementChild?.firstElementChild?.innerText?.match(/Cholesterol[\s|\n]+0mg/));
```
Your first `span` element should wrap the text `Cholesterol`.
你的第一個 `span` 元素應該包含文本 `Cholesterol`。
```js
assert(document.querySelector('.daily-value.small-text')?.lastElementChild?.firstElementChild?.firstElementChild?.innerText === 'Cholesterol');
```
Your second `span` element should have the `class` attribute set to `bold`.
你的第二個 `span` 元素應該將 `class` 屬性設置爲 `bold`。
```js
assert(document.querySelector('.daily-value.small-text')?.lastElementChild?.lastElementChild?.classList?.contains('bold'));
```
Your second `span` element should wrap the text `0%`.
你的第二個 `span` 元素應該包含文本 `0%`。
```js
assert(document.querySelector('.daily-value.small-text')?.lastElementChild?.lastElementChild?.innerText === '0%');

18
curriculum/challenges/chinese-traditional/14-responsive-web-design-22/learn-typography-by-building-a-nutrition-label/615f7e7281626a92bbd62da8.md
View File

@@ -1,17 +1,17 @@
---
id: 615f7e7281626a92bbd62da8
title: Step 54
title: 步驟 54
challengeType: 0
dashedName: step-54
---
# --description--
在最後一個 `p` 元素下方，使用文本 `Sodium 160mg 7%` 創建另一個 `p` 元素。 將文本 `Sodium` 包裹在 `span` 元素中，並將 `class` 屬性設置爲 `bold`。 Wrap the `7%` text in another `span` element with the `class` set to `bold`. Also add an additional `span` element around `Sodium 160mg` for aligning it correctly.
在最後一個 `p` 元素下方，使用文本 `Sodium 160mg 7%` 創建另一個 `p` 元素。 將文本 `Sodium` 包裹在 `span` 元素中，並將 `class` 屬性設置爲 `bold`。 將 `7%` 文本包裹在另一個 `span` 元素中，其中 `class` 設置爲 `bold`。 另外在 `Sodium 160mg` 外面添加一個 `span` 元素，以便正確地對齊。
# --hints--
You should create a new `p` element at the end of your `.daily-value` element.
你應該在 `.daily-value` 元素的末尾創建一個新的 `p` 元素。
```js
assert(document.querySelector('.daily-value.small-text')?.lastElementChild?.localName === 'p');
@@ -23,37 +23,37 @@ assert(document.querySelector('.daily-value.small-text')?.lastElementChild?.loca
assert(document.querySelector('.daily-value.small-text')?.lastElementChild?.innerText?.match(/Sodium[\s|\n]160mg[\s|\n]+7%/));
```
Your new `p` element should have three `span` elements.
你的新的 `p` 元素應該有三個 `span` 元素。
```js
assert(document.querySelector('.daily-value.small-text')?.lastElementChild?.querySelectorAll('span')?.length === 3);
```
A `span` element should wrap the text `Sodium 360mg`.
一個 `span` 元素應該包含文本 `Sodium 360mg`。
```js
assert(document.querySelector('.daily-value.small-text')?.lastElementChild?.firstElementChild?.innerText?.match(/Sodium[\s|\n]160mg/));
```
A `span` element should wrap the text `Sodium`.
一個 `span` 元素應該包含文本 `Sodium`。
```js
assert(document.querySelector('.daily-value.small-text')?.lastElementChild?.firstElementChild?.firstElementChild?.innerText === "Sodium");
```
The `span` around `Sodium` should have the `class` attribute set to `bold`.
包裹 `Sodium` 的 `span` 元素應該有 `class` 爲 `bold`。
```js
assert(document.querySelector('.daily-value.small-text')?.lastElementChild?.firstElementChild?.firstElementChild?.classList?.contains('bold'));
```
A `span` element should wrap the text `7%`.
一個 `span` 元素應該包含文本 `7%`。
```js
assert(document.querySelector('.daily-value.small-text')?.lastElementChild?.lastElementChild?.innerText === '7%');
```
The `span` element around `7%` should have the `class` attribute set to `bold`.
包裹 `7%` 的 `span` 元素應該有 `class` 屬性爲 `bold`。
```js
assert(document.querySelector('.daily-value.small-text')?.lastElementChild?.lastElementChild?.classList?.contains('bold'));

20
curriculum/challenges/chinese-traditional/14-responsive-web-design-22/learn-typography-by-building-a-nutrition-label/615f7ecb09de9a938ef94756.md
View File

@@ -1,17 +1,17 @@
---
id: 615f7ecb09de9a938ef94756
title: Step 55
title: 步驟 55
challengeType: 0
dashedName: step-55
---
# --description--
添加另一個 `p` 元素，其文本爲 `Total Carbohydrate 37g 13%`。 Like before, use `span` elements to make the text `Total Carbohydrate` and `13%` bold. Also add an additional `span` element to wrap the `Total Carbohydrate 37g` text in a span element so to have it aligned to the left, and `13%` to the right.
添加另一個 `p` 元素，其文本爲 `Total Carbohydrate 37g 13%`。 像之前一樣，使用 `span` 元素使文本 `Total Carbohydrate` 和 `13%` 加粗。 再添加一個 `span` 元素來包裹 `Total Carbohydrate 37g` 文本，使其對齊到左邊，`13%` 對齊到右邊。
# --hints--
You should create a new `p` element at the end of your `.daily-value` element.
你應該在 `.daily-value` 元素的末尾創建一個新的 `p` 元素。
```js
assert(document.querySelector('.daily-value.small-text')?.lastElementChild?.localName === 'p');
@@ -23,43 +23,43 @@ assert(document.querySelector('.daily-value.small-text')?.lastElementChild?.loca
assert(document.querySelector('.daily-value.small-text')?.lastElementChild?.innerText?.match(/Total Carbohydrate[\s|\n]+37g[\s|\n]+13%/));
```
Your new `p` element should have three `span` elements.
你的新的 `p` 元素應該有三個 `span` 元素。
```js
assert(document.querySelector('.daily-value.small-text')?.lastElementChild?.querySelectorAll('span')?.length === 3);
```
One `span` element should wrap the text `Total Carbohydrate 37g`.
一個 `span` 元素應該包含文本 `Total Carbohydrate 37g`。
```js
assert(document.querySelector('.daily-value.small-text')?.lastElementChild?.firstElementChild?.innerText?.match(/Total Carbohydrate[\s|\n]+37g/));
```
One `span` element should wrap the text `Total Carbohydrate`.
一個 `span` 元素應該包含文本 `Total Carbohydrate`。
```js
assert(document.querySelector('.daily-value.small-text')?.lastElementChild?.firstElementChild?.firstElementChild?.innerText === 'Total Carbohydrate');
```
The `span` element around `Total Carbohydrate` should have the `class` attribute set to `bold`.
包裹 `Total Carbohydrate` 的 `span` 元素應該有 `class` 爲 `bold`。
```js
assert(document.querySelector('.daily-value.small-text')?.lastElementChild?.firstElementChild?.firstElementChild?.classList?.contains('bold'));
```
A `span` element should wrap the text `13%`.
一個 `span` 元素應該包含文本 `13%`。
```js
assert(document.querySelector('.daily-value.small-text')?.lastElementChild?.lastElementChild?.innerText === '13%');
```
The `span` element around `13%` should have the `class` attribute set to `bold`.
包裹 `13%` 的 `span` 元素應該有 `class` 屬性爲 `bold`。
```js
assert(document.querySelector('.daily-value.small-text')?.lastElementChild?.lastElementChild?.classList?.contains('bold'));
```
Your second `span` element should wrap the text `13%`.
你的第二個 `span` 元素應該包含文本 `13%`。
```js
assert(document.querySelector('.daily-value.small-text')?.lastElementChild?.lastElementChild?.innerText === '13%');

4
curriculum/challenges/chinese-traditional/14-responsive-web-design-22/learn-typography-by-building-a-nutrition-label/615f7fa959ab75948f96a0d6.md
View File

@@ -1,6 +1,6 @@
---
id: 615f7fa959ab75948f96a0d6
title: Step 56
title: 步驟 56
challengeType: 0
dashedName: step-56
---
@@ -11,7 +11,7 @@ dashedName: step-56
# --hints--
You should create a new `p` and `div` element at the end of your `.daily-value` element.
你應該在 `.daily-value` 元素的末尾創建一個新的 `p` 和 `div` 元素。
```js
assert(document.querySelector('.daily-value.small-text')?.lastElementChild?.previousElementSibling?.localName === 'p');

4
curriculum/challenges/chinese-traditional/14-responsive-web-design-22/learn-typography-by-building-a-nutrition-label/615f808d85793195b0f53be9.md
View File

@@ -1,6 +1,6 @@
---
id: 615f808d85793195b0f53be9
title: Step 57
title: 步驟 57
challengeType: 0
dashedName: step-57
---
@@ -11,7 +11,7 @@ dashedName: step-57
# --hints--
You should create a new `p` and `div` element at the end of your `.daily-value` element.
你應該在 `.daily-value` 元素的末尾創建一個新的 `p` 和 `div` 元素。
```js
assert(document.querySelector('.daily-value.small-text')?.lastElementChild?.previousElementSibling?.localName === 'p');

6
curriculum/challenges/chinese-traditional/14-responsive-web-design-22/learn-typography-by-building-a-nutrition-label/615f829d07b18f96f6f6684b.md
View File

@@ -1,17 +1,17 @@
---
id: 615f829d07b18f96f6f6684b
title: Step 58
title: 步驟 58
challengeType: 0
dashedName: step-58
---
# --description--
創建這些分隔線的好處是你可以應用特定的類來單獨設置它們的樣式。 Add `double-indent` to the `class` for your last `.divider`.
創建這些分隔線的好處是你可以應用特定的類來單獨設置它們的樣式。 將 `double-indent` 添加到你的最後一個 `.divider` 的 `class`。
# --hints--
Your last `.divider` element should have `double-indent` added to the `class`. 不要刪除現有值。
你的最後一個 `.divider` 元素應該將 `double-indent` 添加到 `class`。 不要刪除現有值。
```js
const last = document.querySelector('.daily-value.small-text')?.lastElementChild;

8
curriculum/challenges/chinese-traditional/14-responsive-web-design-22/learn-typography-by-building-a-nutrition-label/615f83ef928ec9982b785b6a.md
View File

@@ -1,23 +1,23 @@
---
id: 615f83ef928ec9982b785b6a
title: Step 59
title: 步驟 59
challengeType: 0
dashedName: step-59
---
# --description--
Create a `.double-indent` selector and give it a left margin of `2em`.
創建一個 `.double-indent` 選擇器，並給它一個 `2em` 的左邊距。
# --hints--
You should have a new `.double-indent` selector.
你應該有一個新的 `.double-indent` 選擇器。
```js
assert(new __helpers.CSSHelp(document).getStyle('.double-indent'));
```
Your `.double-indent` selector should have a `margin-left` property set to `2em`.
你的 `.double-indent` 選擇器應該有一個 `margin-left` 屬性設置爲 `2em`。
```js
assert(new __helpers.CSSHelp(document).getStyle('.double-indent')?.marginLeft === '2em');

10
curriculum/challenges/chinese-traditional/14-responsive-web-design-22/learn-typography-by-building-a-nutrition-label/615f84f246e8ba98e3cd97be.md
View File

@@ -1,19 +1,19 @@
---
id: 615f84f246e8ba98e3cd97be
title: Step 60
title: 步驟 60
challengeType: 0
dashedName: step-60
---
# --description--
Below your `.double-indent` element, add a new `p` element with the text `Includes 10g Added Sugars 20%`. 新的 `p` 元素也應該是雙縮進的，並且沒有下邊框。 使用 `span` 使 `20%` 加粗並右對齊。
在你的 `.double-indent` 元素的下方，添加一個新的 `p` 元素，其中包含文本 `Includes 10g Added Sugars 20%`。 新的 `p` 元素也應該是雙縮進的，並且沒有下邊框。 使用 `span` 使 `20%` 加粗並右對齊。
然後在該 `p` 元素之後創建另一個分隔線。
# --hints--
You should create a new `p` and `div` element at the end of your `.daily-value` element.
你應該在 `.daily-value` 元素的末尾創建一個新的 `p` 和 `div` 元素。
```js
assert(document.querySelector('.daily-value.small-text')?.lastElementChild?.previousElementSibling?.localName === 'p');
@@ -26,7 +26,7 @@ assert(document.querySelector('.daily-value.small-text')?.lastElementChild?.loca
assert(document.querySelector('.daily-value.small-text p:last-of-type')?.innerText.match(/Includes 10g Added Sugars[\s|\n]+20%/));
```
Your new `p` element should have the `class` attribute set to `double-indent no-divider`.
你的新 `p` 元素應該將 `class` 屬性設置爲 `double-indent no-divider`。
```js
assert(document.querySelector('.daily-value.small-text p:last-of-type')?.classList?.contains('double-indent'));
@@ -39,7 +39,7 @@ assert(document.querySelector('.daily-value.small-text p:last-of-type')?.classLi
assert(document.querySelector('.daily-value.small-text p:last-of-type')?.firstElementChild?.localName === 'span');
```
Your `span` element should have the `class` attribute set to `bold`.
你的 `span` 元素應該將 `class` 屬性設置爲 `bold`。
```js
assert(document.querySelector('.daily-value.small-text p:last-of-type')?.firstElementChild?.classList?.contains('bold'));

6
curriculum/challenges/chinese-traditional/14-responsive-web-design-22/learn-typography-by-building-a-nutrition-label/615f887466db4ba14b5342cc.md
View File

@@ -1,6 +1,6 @@
---
id: 615f887466db4ba14b5342cc
title: Step 61
title: 步驟 61
challengeType: 0
dashedName: step-61
---
@@ -13,7 +13,7 @@ dashedName: step-61
# --hints--
You should create a new `p` and `div` element at the end of your `.daily-value` element.
你應該在 `.daily-value` 元素的末尾創建一個新的 `p` 和 `div` 元素。
```js
assert(document.querySelector('.daily-value.small-text')?.lastElementChild?.previousElementSibling?.localName === 'p');
@@ -32,7 +32,7 @@ assert(document.querySelector('.daily-value.small-text p:last-of-type')?.innerTe
assert(document.querySelector('.daily-value.small-text p:last-of-type')?.classList?.contains('no-divider'));
```
Your new `div` should have the `class` attribute set to `divider large`.
你的新 `div` 應該將 `class` 屬性設置爲 `divider large`。
```js
assert(document.querySelector('.daily-value.small-text')?.lastElementChild?.classList?.contains('divider'));

12
curriculum/challenges/chinese-traditional/14-responsive-web-design-22/learn-typography-by-building-a-nutrition-label/615f89e055040ba294719d2f.md
View File

@@ -1,6 +1,6 @@
---
id: 615f89e055040ba294719d2f
title: Step 62
title: 步驟 62
challengeType: 0
dashedName: step-62
---
@@ -9,29 +9,29 @@ dashedName: step-62
在大分隔線下方創建另一個 `p` 元素。 爲 `p` 元素提供文本 `Vitamin D 2mcg 10%`。
The `p` element contains only text, you can wrap the percentage in a `span` element so that it is considered a separate entity from the rest of the text, and it's moved to the right.
`p` 元素只包含文本，你可以將百分比放在 `span` 元素中，這樣它就可以被視爲與其餘文本分開的內容，並且它被移動到右邊。
# --hints--
You should create a new `p` element at the end of your `.daily-value` element.
你應該在 `.daily-value` 元素的末尾創建一個新的 `p` 元素。
```js
assert(document.querySelector('.daily-value.small-text')?.lastElementChild?.localName === 'p');
```
Your new `p` element should have the text `Vitamin D 2mcg 10%`.
你的新 `p` 元素應包含文本 `Vitamin D 2mcg 10%`。
```js
assert(document.querySelector('.daily-value.small-text')?.lastElementChild?.innerText?.match(/Vitamin D 2mcg[\s|\n]+10%/));
```
Your new `p` element should have a `span` element.
你的新 `p` 元素應該有一個 `span` 元素。
```js
assert(document.querySelector('.daily-value.small-text')?.lastElementChild?.querySelectorAll('span')?.length === 1);
```
Your `span` element should not be bold.
你的 `span` 元素不應該是粗體。
```js
assert(!document.querySelector('.daily-value.small-text')?.lastElementChild?.querySelector('span')?.classList?.contains('bold'));

8
curriculum/challenges/chinese-traditional/14-responsive-web-design-22/learn-typography-by-building-a-nutrition-label/615f8bfe0f30a1a3c340356b.md
View File

@@ -1,6 +1,6 @@
---
id: 615f8bfe0f30a1a3c340356b
title: Step 63
title: 步驟 63
challengeType: 0
dashedName: step-63
---
@@ -11,7 +11,7 @@ dashedName: step-63
# --hints--
You should create two new `p` elements at the end of your `.daily-value` element.
你應該在 `.daily-value` 元素的末尾創建一個新的 `p` 元素。
```js
assert(document.querySelector('.daily-value.small-text')?.lastElementChild?.localName === 'p');
@@ -30,7 +30,7 @@ assert(document.querySelector('.daily-value.small-text')?.lastElementChild?.prev
assert(document.querySelector('.daily-value.small-text')?.lastElementChild?.previousElementSibling?.firstElementChild?.localName === 'span');
```
Your first `span` element should not be bold.
你的第一個 `span` 元素不應該是粗體。
```js
assert(!document.querySelector('.daily-value.small-text')?.lastElementChild?.previousElementSibling?.firstElementChild?.classList?.contains('bold'));
@@ -54,7 +54,7 @@ assert(document.querySelector('.daily-value.small-text')?.lastElementChild?.inne
assert(document.querySelector('.daily-value.small-text')?.lastElementChild?.firstElementChild?.localName === 'span');
```
Your second `span` element should not be bold.
你的第二個 `span` 元素不應該是粗體。
```js
assert(!document.querySelector('.daily-value.small-text')?.lastElementChild?.firstElementChild?.classList?.contains('bold'));

6
curriculum/challenges/chinese-traditional/14-responsive-web-design-22/learn-typography-by-building-a-nutrition-label/615f8f1223601fa546e93f31.md
View File

@@ -1,6 +1,6 @@
---
id: 615f8f1223601fa546e93f31
title: Step 64
title: 步驟 64
challengeType: 0
dashedName: step-64
---
@@ -11,7 +11,7 @@ dashedName: step-64
# --hints--
You should create a new `p` element at the end of your `.daily-value` element.
你應該在 `.daily-value` 元素的末尾創建一個新的 `p` 元素。
```js
assert(document.querySelector('.daily-value.small-text')?.lastElementChild?.localName === 'p');
@@ -35,7 +35,7 @@ assert(document.querySelector('.daily-value.small-text')?.lastElementChild?.inne
assert(document.querySelector('.daily-value.small-text')?.lastElementChild?.querySelectorAll('span')?.length === 1);
```
Your `span` element should not be bold.
你的 `span` 元素不應該是粗體。
```js
assert(!document.querySelector('.daily-value.small-text')?.lastElementChild?.querySelector('span')?.classList?.contains('bold'));

4
curriculum/challenges/chinese-traditional/14-responsive-web-design-22/learn-typography-by-building-a-nutrition-label/615f905fbd1017a65ca224eb.md
View File

@@ -1,6 +1,6 @@
---
id: 615f905fbd1017a65ca224eb
title: Step 65
title: 步驟 65
challengeType: 0
dashedName: step-65
---
@@ -23,7 +23,7 @@ dashedName: step-65
assert(document.querySelector('.daily-value').nextElementSibling?.localName === 'div');
```
Your new `div` should have the `class` set to `divider medium`.
你的新 `div` 應該將 `class` 設置爲 `divider medium`。
```js
assert(document.querySelector('.daily-value')?.nextElementSibling?.classList?.contains('divider'));

2
curriculum/challenges/chinese-traditional/14-responsive-web-design-22/learn-typography-by-building-a-nutrition-label/615f94786869e1a7fec54375.md
View File

@@ -1,6 +1,6 @@
---
id: 615f94786869e1a7fec54375
title: Step 66
title: 步驟 66
challengeType: 0
dashedName: step-66
---

2
curriculum/challenges/chinese-traditional/14-responsive-web-design-22/learn-typography-by-building-a-nutrition-label/615f951dff9317a900ef683f.md
View File

@@ -1,6 +1,6 @@
---
id: 615f951dff9317a900ef683f
title: Step 67
title: 步驟 67
challengeType: 0
dashedName: step-67
---

8
curriculum/challenges/chinese-traditional/14-responsive-web-design-22/learn-typography-by-building-a-nutrition-label/635bde33c91c80540eae239b.md
View File

@@ -1,17 +1,17 @@
---
id: 635bde33c91c80540eae239b
title: Step 41
title: 步驟 41
challengeType: 0
dashedName: step-41
---
# --description--
The text `* Daily Value %` should be aligned to the right. Create a `.right` selector and use the `justify-content` property to do it.
文本 `* Daily Value %` 應該右對齊。 創建一個 `.right` 選擇器，並使用 `justify-content` 屬性來實現它。
# --hints--
You should have a `.right` selector.
你應該有一個 `.right` 選擇器。
```js
const hasRight = new __helpers.CSSHelp(document).getStyle('.right');
@@ -19,7 +19,7 @@ assert(hasRight);
```
The `.right` selector should have the `justify-content` property set to `flex-end`.
`.right` 選擇器應該將 `justify-content` 屬性設置爲 `flex-end`。
```js
const rightJustifyContent = new __helpers.CSSHelp(document).getStyle('.right')?.getPropertyValue('justify-content');

8
curriculum/challenges/chinese-traditional/14-responsive-web-design-22/learn-typography-by-building-a-nutrition-label/6395d33ab5d91bf317107c48.md
View File

@@ -1,23 +1,23 @@
---
id: 6395d33ab5d91bf317107c48
title: Step 32
title: 步驟 32
challengeType: 0
dashedName: step-32
---
# --description--
Create a `.calories-info h2` selector and remove all margins.
創建一個 `.calories-info h2` 選擇器並刪除所有邊距。
# --hints--
Create a `.calories-info h2` selector.
創建一個 `.calories-info h2` 選擇器。
```js
assert(new __helpers.CSSHelp(document).getStyle('.calories-info h2'));
```
Your `.calories-info h2` selector should have a `margin` set to `0`.
你的 `.calories-info h2` 選擇器應將 `margin` 設置爲 `0`。
```js
assert(new __helpers.CSSHelp(document).getStyle('.calories-info h2')?.margin === '0px');

12
curriculum/challenges/chinese-traditional/14-responsive-web-design-22/learn-typography-by-building-a-nutrition-label/6396e33fe478dd264ebbf278.md
View File

@@ -1,35 +1,35 @@
---
id: 6396e33fe478dd264ebbf278
title: Step 34
title: 步驟 34
challengeType: 0
dashedName: step-34
---
# --description--
Create a new `.calories-info` selector and give it a `display` property set to `flex`. Also give it a `justify-content` property set to `space-between` and `align-items` property set to `flex-end`.
創建一個新的 `.calories-info` 選擇器，並將其 `display` 屬性設置爲 `flex`。 也給它一個 `justify-content` 屬性設置爲 `space-between`，以及 `align-items` 屬性設置爲 `flex-end`。
# --hints--
You should create a `.calories-info` selector.
你應該創建一個 `.calories-info` 選擇器。
```js
assert(new __helpers.CSSHelp(document).getStyle('.calories-info'));
```
Your `.calories-info` selector should have a `display` property set to `flex`.
你的 `.calories-info` 選擇器應該將 `display` 屬性設置爲 `flex`。
```js
assert(new __helpers.CSSHelp(document).getStyle('.calories-info')?.display === 'flex');
```
Your `.calories-info` selector should have a `justify-content` property set to `space-between`.
你的 `.calories-info` 選擇器應具有 `justify-content` 屬性設置爲 `space-between`。
```js
assert(new __helpers.CSSHelp(document).getStyle('.calories-info')?.justifyContent === 'space-between');
```
Your `.calories-info` selector should have a `align-items` property set to `flex-end`.
你的 `.calories-info` 選擇器應該將 `align-items` 屬性設置爲 `flex-end`。
```js
assert(new __helpers.CSSHelp(document).getStyle('.calories-info')?.alignItems === 'flex-end');

2
curriculum/challenges/chinese/02-javascript-algorithms-and-data-structures/basic-javascript/manipulate-arrays-with-pop.md
View File

@@ -1,6 +1,6 @@
---
id: 56bbb991ad1ed5201cd392cc
title: Manipulate Arrays With pop Method
title: 使用 pop 方法操作数组
challengeType: 1
videoUrl: 'https://scrimba.com/c/cRbVZAB'
forumTopicId: 18236

2
curriculum/challenges/chinese/02-javascript-algorithms-and-data-structures/basic-javascript/manipulate-arrays-with-push.md
View File

@@ -1,6 +1,6 @@
---
id: 56bbb991ad1ed5201cd392cb
title: Manipulate Arrays With push Method
title: 使用 push 方法操作数组
challengeType: 1
videoUrl: 'https://scrimba.com/c/cnqmVtJ'
forumTopicId: 18237

2
curriculum/challenges/chinese/02-javascript-algorithms-and-data-structures/basic-javascript/manipulate-arrays-with-shift.md
View File

@@ -1,6 +1,6 @@
---
id: 56bbb991ad1ed5201cd392cd
title: Manipulate Arrays With shift Method
title: 使用 shift 方法操作数组
challengeType: 1
videoUrl: 'https://scrimba.com/c/cRbVETW'
forumTopicId: 18238

2
curriculum/challenges/chinese/02-javascript-algorithms-and-data-structures/basic-javascript/manipulate-arrays-with-unshift.md
View File

@@ -1,6 +1,6 @@
---
id: 56bbb991ad1ed5201cd392ce
title: Manipulate Arrays With unshift Method
title: 使用 unshift 方法操作数组
challengeType: 1
videoUrl: 'https://scrimba.com/c/ckNDESv'
forumTopicId: 18239

2
curriculum/challenges/chinese/05-back-end-development-and-apis/basic-node-and-express/serve-json-on-a-specific-route.md
View File

@@ -18,7 +18,7 @@ HTML 服务器提供 HTML 服务，而 API 提供数据服务。 <dfn>REST</dfn>
# --hints--
The endpoint `/json` should serve the JSON object `{"message": "Hello json"}`
端口 `/json` 应该返回一个 JSON 对象 `{"message": "Hello json"}`
```js
(getUserInput) =>

4
curriculum/challenges/chinese/06-quality-assurance/quality-assurance-projects/american-british-translator.md
View File

@@ -282,7 +282,7 @@ async (getUserInput) => {
};
```
All 24 unit tests are complete and passing.
所有 24 项单元测试都已完成并通过。
```js
async (getUserInput) => {
@@ -307,7 +307,7 @@ async (getUserInput) => {
};
```
All 6 functional tests are complete and passing.
所有 6 项功能测试都已完成并通过。
```js
async (getUserInput) => {

4
curriculum/challenges/chinese/06-quality-assurance/quality-assurance-projects/sudoku-solver.md
View File

@@ -352,7 +352,7 @@ async (getUserInput) => {
};
```
All 12 unit tests are complete and passing.
所有 12 项单元测试都已完成并通过。
```js
async (getUserInput) => {
@@ -377,7 +377,7 @@ async (getUserInput) => {
};
```
All 14 functional tests are complete and passing.
所有 14 项功能测试都已完成并通过。
```js
async (getUserInput) => {

6
curriculum/challenges/chinese/14-responsive-web-design-22/learn-typography-by-building-a-nutrition-label/615f42a021625f656101ef93.md
View File

@@ -9,7 +9,7 @@ dashedName: step-22
同样重要的元素之间的水平间距可以增加文本的可读性。
Wrap the text `2/3 cup (55g)` in a `span` element.
将文本 `2/3 cup (55g)` 放在一个 `span` 元素内。
# --hints--
@@ -19,13 +19,13 @@ Wrap the text `2/3 cup (55g)` in a `span` element.
assert(document.querySelector('span'));
```
Your `span` element should have the text `2/3 cup (55g)`.
你的 `span` 元素应包含文本 `2/3 cup (55g)`。
```js
assert(document.querySelector('span')?.textContent?.trim() === '2/3 cup (55g)');
```
Your `p` element should still have the text `Serving size 2/3 cup (55g)`.
`p` 元素仍应包含文本 `Serving size 2/3 cup (55g)`。
```js
assert(document.querySelectorAll('p')?.[1]?.innerText === 'Serving size 2/3 cup (55g)');

6
curriculum/challenges/chinese/14-responsive-web-design-22/learn-typography-by-building-a-nutrition-label/615f4bfb9de4a16703b56eb6.md
View File

@@ -7,17 +7,17 @@ dashedName: step-23
# --description--
Now we can add the horizontal spacing using `flex`. In your `p` selector, add a `display` property set to `flex` and a `justify-content` property set to `space-between`.
现在我们可以使用 `flex` 添加水平间距。 在你的 `p` 选择器中， 添加 `display` 属性设置为 `flex`，以及 `justify-content` 属性设置为 `space-between`。
# --hints--
Your `p` selector should have a `display` property set to `flex`.
你的 `p` 选择器应该有一个 `display` 属性设置为 `flex`。
```js
assert(new __helpers.CSSHelp(document).getStyle('p')?.display === 'flex');
```
Your `p` selector should have a `justify-content` property set to `space-between`.
你的 `p` 选择器应具有 `justify-content` 属性设置为 `space-between`。
```js
assert(new __helpers.CSSHelp(document).getStyle('p')?.justifyContent === 'space-between');

4
curriculum/challenges/chinese/14-responsive-web-design-22/learn-typography-by-building-a-nutrition-label/615f4ec58334106a4170c2a8.md
View File

@@ -7,7 +7,7 @@ dashedName: step-26
# --description--
Create a new `div` element below your `header` element, and give it a `class` attribute set to `divider large`.
在你的 `header` 元素下创建一个新的 `div` 元素，并将其 `class` 属性设置为 `divider large`。
# --hints--
@@ -23,7 +23,7 @@ assert(document.querySelectorAll('div')?.length === 3);
assert(document.querySelector('.label')?.lastElementChild?.localName === 'div');
```
Your new `div` element should have the `class` attribute set to `divider large`.
你的新 `div` 元素应该将 `class` 属性设置为 `divider large`。
```js
const div = document.querySelector('.label')?.lastElementChild;

10
curriculum/challenges/chinese/14-responsive-web-design-22/learn-typography-by-building-a-nutrition-label/615f4f9e4a40566b776a8f38.md
View File

@@ -7,29 +7,29 @@ dashedName: step-27
# --description--
Create a new `.large` selector and give it a `height` property set to `10px`. Also create an `.large, .medium` selector and set the `background-color` property to `black`.
创建一个新的 `.large` 选择器，并将其 `height` 属性设置为 `10px`。 同时创建一个 `.large, .medium` 选择器，并将 `background-color` 属性设置为 `black`。
# --hints--
You should have a new `.large` selector.
你应该有一个新的 `.large` 选择器。
```js
assert(new __helpers.CSSHelp(document).getStyle('.large'));
```
Your `.large` selector should have a `height` property set to `10px`.
你的 `.large` 选择器应该将 `height` 属性设置为 `10px`。
```js
assert(new __helpers.CSSHelp(document).getStyle('.large')?.height === '10px');
```
You should have a new `.large, .medium` selector.
你应该有一个新的 `.large, .medium` 选择器。
```js
assert(new __helpers.CSSHelp(document).getStyle('.large, .medium'));
```
Your `.large, .medium` selector should have a `background-color` property set to `black`.
你的 `.large, .medium` 选择器应该有一个 `background-color` 属性设置为 `black`。
```js
assert(new __helpers.CSSHelp(document).getStyle('.large, .medium')?.backgroundColor === 'black');

6
curriculum/challenges/chinese/14-responsive-web-design-22/learn-typography-by-building-a-nutrition-label/615f50473cc0196c6dd3892a.md
View File

@@ -7,13 +7,13 @@ dashedName: step-28
# --description--
You may notice there is still a small border at the bottom of your `.large` element. To reset this, give your `.large, .medium` selector a `border` property set to `0`.
你可能会注意到 `.large` 元素的底部仍有一个小边框。 要重置它，给 `.large, .medium` 选择器一个 `border` 属性设置为 `0`。
Note: the `medium`(medium) class will be utilized in step 37 for the thinner bars of the nutrition label.
注意：`medium`（中等）类将在步骤 37 中用于营养标签的较细柱状图。
# --hints--
Your `.large, .medium` selector should have a `border` property set to `0`.
你的 `.large, .medium` 选择器应该有一个 `border` 属性设置为 `0`。
```js
assert(new __helpers.CSSHelp(document).getStyle('.large, .medium')?.borderWidth === '0px');

4
curriculum/challenges/chinese/14-responsive-web-design-22/learn-typography-by-building-a-nutrition-label/615f51257a8a516d80b6c743.md
View File

@@ -7,7 +7,7 @@ dashedName: step-29
# --description--
Create a new `div` below your `.large` element and give it a `class` attribute set to `calories-info`.
在你的 `.large` 元素下创建一个新的 `div`，并将 `class` 属性设置为 `calories-info`。
# --hints--
@@ -23,7 +23,7 @@ assert(document.querySelectorAll('div')?.length === 4);
assert(document.querySelector('.label')?.lastElementChild?.classList?.contains('calories-info'));
```
Your new `div` should come after the `.large` element.
你的新 `div` 应该在 `.large` 元素之后。
```js
assert(document.querySelector('.label')?.lastElementChild?.previousElementSibling?.classList?.contains('large'));

12
curriculum/challenges/chinese/14-responsive-web-design-22/learn-typography-by-building-a-nutrition-label/615f51e4e5b24a6e80eccce1.md
View File

@@ -7,36 +7,36 @@ dashedName: step-30
# --description--
Within your `.calories-info` element, create a `div` element. Give that `div` element a `class` attribute set to `left-container`. Within the newly created `div` element, create a `h2` element with the text `Amount per serving`. Give the `h2` element a `class` attribute set to `bold small-text`.
在你的 `.calories-info` 元素中，创建一个 `div` 元素。 给那个 `div` 元素一个 `class` 属性设置为 `left-container`。 在新创建的 `div` 元素中，创建一个带有文本 `Amount per serving` 的 `h2` 元素。 给 `h2` 元素一个 `class` 属性设置为 `bold small-text`。
# --hints--
You should create a new `div` element within your `.calories-info` element.
你应该在你的 `.calories-info` 元素中创建一个新的 `div` 元素。
```js
assert(document.querySelector('.calories-info')?.children?.[0]?.localName === 'div');
```
Your new `div` element should have a `class` attribute set to `left-container`.
你的新 `div` 元素应该有一个 `class` 属性值为 `left-container`。
```js
assert(document.querySelector('.calories-info')?.children?.[0]?.classList.contains('left-container'));
```
You should create a new `h2` element within your `.left-container` element.
你应该在你的 `.left-container` 元素中创建一个新的 `h2` 元素。
```js
assert(document.querySelector('.left-container')?.children?.[0]?.localName === 'h2');
```
Your new `h2` element should have a `class` attribute set to `bold small-text`.
你的新 `h2` 元素应该有一个 `class` 属性设置为 `bold small-text`。
```js
assert(document.querySelector('.left-container')?.children?.[0]?.classList.contains('bold'));
assert(document.querySelector('.left-container')?.children?.[0]?.classList.contains('small-text'));
```
Your new `h2` element should have the text `Amount per serving`.
你的新 `h2` 元素应包含文本 `Amount per serving`。
```js
assert(document.querySelector('.left-container')?.children?.[0]?.innerText === 'Amount per serving');

6
curriculum/challenges/chinese/14-responsive-web-design-22/learn-typography-by-building-a-nutrition-label/615f522dea4f776f64dc3e91.md
View File

@@ -9,17 +9,17 @@ dashedName: step-31
`rem` 单位代表 `root em`，与 `html` 元素的字体大小有关。
Create an `.small-text` selector and set the `font-size` to `0.85rem`, which would calculate to be roughly `13.6px` (remember that you set your `html` to have a `font-size` of `16px`).
创建一个 `.small-text` 选择器，并将 `font-size` 设置为 `0.85rem`，计算结果大致为 `13.6px`（记得你之前将 `html` 设置为具有 `16px` 的 `font-size`）。
# --hints--
You should have an `.small-text` selector.
你应该有一个 `.small-text` 选择器。
```js
assert(new __helpers.CSSHelp(document).getStyle('.small-text'));
```
Your `.small-text` selector should have a `font-size` property set to `0.85rem`.
你的 `.small-text` 选择器应该有一个 `font-size` 属性设置为 `0.85rem`。
```js
assert(new __helpers.CSSHelp(document).getStyle('.small-text')?.fontSize === '0.85rem');

14
curriculum/challenges/chinese/14-responsive-web-design-22/learn-typography-by-building-a-nutrition-label/615f5486b8fd4b71633f69b0.md
View File

@@ -1,41 +1,41 @@
---
id: 615f5486b8fd4b71633f69b0
title: Step 33
title: 步骤 33
challengeType: 0
dashedName: step-33
---
# --description--
Below your `.small-text` element, create a new `p` element with the text `Calories`. Also below the `.left-container` element, create a new `span` element with the text `230`.
在你的 `.small-text` 元素下方，创建一个新的 `p` 元素，具有文本 `Calories`。 在你的 `.left-container` 元素下方，创建一个新的 `span` 元素，具有文本 `230`。
# --hints--
You should have a new `p` element within your `.calories-info` element.
你应该在 `.calories-info` 元素中创建一个新的 `p` 元素。
```js
assert(document.querySelector('.calories-info')?.querySelector('p'))
```
You should have a new `span` element within your `.calories-info` element.
你应该在 `.calories-info` 元素中创建一个新的 `span` 元素。
```js
assert(document.querySelector('.calories-info')?.querySelector('span'))
```
Your `p` element should come after your `.small-text` element.
你的 `p` 元素应该在 `.small-text` 元素之后。
```js
assert(document.querySelector('.small-text')?.nextElementSibling?.localName === 'p');
```
Your `p` element should have the text `Calories`.
你的 `p` 元素应包含文本 `Calories`。
```js
assert(document.querySelector('.left-container')?.lastElementChild?.innerText === 'Calories');
```
Your `span` element should come after your `.left-container` element.
你的 `span` 元素应该位于 `.left-container` 元素之后。
```js
assert(document.querySelector('.left-container')?.nextElementSibling?.localName ==='span');

12
curriculum/challenges/chinese/14-responsive-web-design-22/learn-typography-by-building-a-nutrition-label/615f575b50b91e72af079480.md
View File

@@ -1,23 +1,23 @@
---
id: 615f575b50b91e72af079480
title: Step 35
title: 步骤 35
challengeType: 0
dashedName: step-35
---
# --description--
Create a new `.left-container p` selector setting the top and bottom margin to `-5px`, and the left and right margin to `-2px`. Also set the `font-size` to `2em` and `font-weight` to `700`.
创建一个新的 `.left-container p` 选择器，将上下边距设置为 `-5px`，将左右边距设置为 `-2px`。 也将 `font-size` 设置为 `2em`，将 `font-weight` 设置为 `700`。
# --hints--
You should have a new `.left-container p` selector.
你应该有一个新的 `.left-container p` 选择器。
```js
assert(new __helpers.CSSHelp(document).getStyle('.left-container p'));
```
Your new `.left-container p` selector should have a `margin` property set to `-5px -2px`.
你的新 `.left-container p` 选择器应将 `margin` 属性设置为 `-5px -2px`。
```js
assert.equal(new __helpers.CSSHelp(document).getStyle('.left-container p')?.marginTop, '-5px');
@@ -26,13 +26,13 @@ assert.equal(new __helpers.CSSHelp(document).getStyle('.left-container p')?.marg
assert.equal(new __helpers.CSSHelp(document).getStyle('.left-container p')?.marginRight, '-2px');
```
Your new `.left-container p` selector should have a `font-size` property set to `2em`.
你的新 `.left-container p` 选择器应将 `font-size` 属性设置为 `2em`。
```js
assert(new __helpers.CSSHelp(document).getStyle('.left-container p')?.fontSize === '2em');
```
Your new `.left-container p` selector should have a `font-weight` property set to `700`.
你的新 `.left-container p` 选择器应该有一个 `font-weight` 属性设置为 `700`。
```js
assert(new __helpers.CSSHelp(document).getStyle('.left-container p')?.fontWeight === '700');

8
curriculum/challenges/chinese/14-responsive-web-design-22/learn-typography-by-building-a-nutrition-label/615f5af373a68e744a3c5a76.md
View File

@@ -1,13 +1,13 @@
---
id: 615f5af373a68e744a3c5a76
title: Step 36
title: 步骤 36
challengeType: 0
dashedName: step-36
---
# --description--
Create a `.calories-info span` selector, set its `font-size` to `2.4em` and `font-weight` to `700`.
创建一个 `.calories-info span` 选择器，将其 `font-size` 设置为 `2.4em`，`font-weight` 设置为 `700`。
# --hints--
@@ -17,13 +17,13 @@ Create a `.calories-info span` selector, set its `font-size` to `2.4em` and `fon
assert(new __helpers.CSSHelp(document).getStyle('.calories-info span'));
```
Your `.calories-info span` selector should have a `font-size` property set to `2.4em`.
你的 `.calories-info span` 选择器应该有一个 `font-size` 属性设置为 `2.4em`。
```js
assert(new __helpers.CSSHelp(document).getStyle('.calories-info span')?.fontSize === '2.4em');
```
Your `.calories-info span` selector should have a `font-weight` property set to `700`.
你的 `.calories-info span` 选择器应该有一个 `font-weight` 属性设置为 `700`。
```js
assert(new __helpers.CSSHelp(document).getStyle('.calories-info span')?.fontWeight === '700');

6
curriculum/challenges/chinese/14-responsive-web-design-22/learn-typography-by-building-a-nutrition-label/615f5fd85d0062761f288364.md
View File

@@ -1,6 +1,6 @@
---
id: 615f5fd85d0062761f288364
title: Step 37
title: 步骤 37
challengeType: 0
dashedName: step-37
---
@@ -9,11 +9,11 @@ dashedName: step-37
排版往往是艺术而非科学。 你可能需要调整对齐等内容，直到它看起来正确为止。
Give your `.calories-info span` selector a `margin` set to `-7px -2px`. 这会将 `230` 文本移动到位。
给你的 `.calories-info span` 选择器一个 `margin` 设置为 `-7px -2px`。 这会将 `230` 文本移动到位。
# --hints--
Your `.calories-info span` selector should have a `margin` set to `-7px -2px`.
你的 `.calories-info span` 选择器应将 `margin` 设置为 `-7px -2px`。
```js
assert(new __helpers.CSSHelp(document).getStyle('.calories-info span')?.margin === '-7px -2px');

6
curriculum/challenges/chinese/14-responsive-web-design-22/learn-typography-by-building-a-nutrition-label/615f61338c8ca176d6445574.md
View File

@@ -1,13 +1,13 @@
---
id: 615f61338c8ca176d6445574
title: Step 38
title: 步骤 38
challengeType: 0
dashedName: step-38
---
# --description--
Below your `.calories-info` element, add a `div` with the `class` attribute set to `divider medium`.
在你的 `.calories-info` 元素下方，添加一个 `div`，并将 `class` 属性设置为 `divider medium`。
# --hints--
@@ -17,7 +17,7 @@ Below your `.calories-info` element, add a `div` with the `class` attribute set
assert(document.querySelectorAll('.label > div')?.length === 3)
```
Your new `div` should have the `class` attribute set to `divider medium`. 这个 div 应该是 `.label` 元素中的最后一个元素。
你的新的 `div` 应该将 `class` 属性设置为 `divider medium`。 这个 div 应该是 `.label` 元素中的最后一个元素。
```js
const div = document.querySelector('.label')?.lastElementChild;

8
curriculum/challenges/chinese/14-responsive-web-design-22/learn-typography-by-building-a-nutrition-label/615f666ac5edea782feb7e75.md
View File

@@ -1,23 +1,23 @@
---
id: 615f666ac5edea782feb7e75
title: Step 39
title: 步骤 39
challengeType: 0
dashedName: step-39
---
# --description--
Create an `.medium` selector and give it a `height` property of `5px`.
创建一个 `.medium` 选择器，并为其设置 `height` 属性为 `5px`。
# --hints--
You should create an `.medium` selector.
你应该创建一个 `.medium` 选择器。
```js
assert(new __helpers.CSSHelp(document).getStyle('.medium'));
```
Your `.medium` selector should have a `height` property set to `5px`.
你的`.medium` 选择器应该将 `height` 属性设置为 `5px`。
```js
assert(new __helpers.CSSHelp(document).getStyle('.medium')?.height === '5px');

10
curriculum/challenges/chinese/14-responsive-web-design-22/learn-typography-by-building-a-nutrition-label/615f671b6d1919792745aa5d.md
View File

@@ -1,17 +1,17 @@
---
id: 615f671b6d1919792745aa5d
title: Step 40
title: 步骤 40
challengeType: 0
dashedName: step-40
---
# --description--
Create a new `div` element below your `.medium` element. Give it a `class` attribute set to `daily-value small-text`. Within this new `div`, add a `p` element with the text `% Daily Value *`, and set the `class` attribute to `bold right`.
在你的 `.medium` 元素下创建一个新的 `div` 元素。 给它一个 `class` 属性设置为 `daily-value small-text`。 在这个新的 `div` 中，添加一个带有文本 `% Daily Value *` 的 `p` 元素，并设置 `class` 属性为 `bold right`。
# --hints--
You should create a new `div` element after your `.medium` element.
你应该在 `.medium` 元素之后创建一个新的 `div` 元素。
```js
assert(document.querySelector('.label')?.lastElementChild?.localName === 'div');
@@ -19,7 +19,7 @@ assert(document.querySelector('.label')?.lastElementChild?.previousElementSiblin
assert(document.querySelector('.label')?.lastElementChild?.previousElementSibling?.classList?.contains('medium'));
```
Your new `div` should have a `class` attribute set to `daily-value small-text`.
你的新 `div` 应该有一个 `class` 属性设置为 `daily-value small-text`。
```js
assert(document.querySelector('.label')?.lastElementChild?.classList?.contains('daily-value'));
@@ -38,7 +38,7 @@ assert(document.querySelector('.label')?.lastElementChild?.firstElementChild?.lo
assert(document.querySelector('.label')?.lastElementChild?.firstElementChild?.textContent === '% Daily Value *');
```
Your new `p` element should have a `class` attribute set to `bold right`.
你的新 `p` 元素应该有一个 `class` 属性设置为 `bold right`。
```js
assert(document.querySelector('.label')?.lastElementChild?.firstElementChild?.classList?.contains('bold'));

6
curriculum/challenges/chinese/14-responsive-web-design-22/learn-typography-by-building-a-nutrition-label/615f6823d0815b7a991f2a75.md
View File

@@ -1,17 +1,17 @@
---
id: 615f6823d0815b7a991f2a75
title: Step 42
title: 步骤 42
challengeType: 0
dashedName: step-42
---
# --description--
Use your existing `.divider` element as an example to add a new divider after the `p` element.
以现有的 `.divider` 元素为例，在 `p` 元素之后添加新的分隔符。
# --hints--
You should create a new `div` within your `.daily-value` element.
你应该在 `.daily-value` 元素之后创建一个新的 `div`。
```js
assert(document.querySelectorAll('.daily-value.small-text > div')?.length === 1)

16
curriculum/challenges/chinese/14-responsive-web-design-22/learn-typography-by-building-a-nutrition-label/615f6b2d164f81809efd9bdc.md
View File

@@ -1,13 +1,13 @@
---
id: 615f6b2d164f81809efd9bdc
title: Step 43
title: 步骤 43
challengeType: 0
dashedName: step-43
---
# --description--
在最后一个 `.divider` 元素之后，创建一个 `p` 元素并为其指定文本 `Total Fat 8g 10%`。 将 `Total Fat` 包裹在 `span` 元素中，并将 `class` 设置为 `bold`。 Wrap `10%` in another `span` element with the `class` set to `bold`. Finally, nest the `Total Fat` `span` element and the text `8g` in an additional `span` element for alignment.
在最后一个 `.divider` 元素之后，创建一个 `p` 元素并为其指定文本 `Total Fat 8g 10%`。 将 `Total Fat` 包裹在 `span` 元素中，并将 `class` 设置为 `bold`。 将 `10%` 包裹在另一个 `span` 元素中，并将 `class` 设置为 `bold`。 最后：嵌套 `Total Fat` `span` 元素和文本 `8g` 在另一个 `span` 元素中，以实现对齐。
# --hints--
@@ -23,37 +23,37 @@ assert(document.querySelector('.daily-value.small-text')?.lastElementChild?.loca
assert(document.querySelector('.daily-value.small-text')?.lastElementChild?.innerText?.match(/Total Fat[\s|\n]+8g[\s|\n]+10%/));
```
Your `p` element should have three `span` elements.
你的 `p` 元素应该有三个 `span` 元素。
```js
assert(document.querySelector('.daily-value.small-text')?.lastElementChild?.querySelectorAll('span')?.length === 3);
```
One `span` element should wrap the text `Total Fat`.
一个 `span` 元素应该包含文本 `Total Fat`。
```js
assert(document.querySelector('.daily-value.small-text')?.lastElementChild?.querySelector('span > span')?.innerText === 'Total Fat');
```
The `span` element around `Total Fat` should have the `class` set to `bold`.
包裹 `Total Fat` 的 `span` 元素应该有 `class` 为 `bold`。
```js
assert(document.querySelector('.daily-value.small-text')?.lastElementChild?.querySelector('span > span')?.className === 'bold');
```
A `span` element should wrap the text `10%`.
一个 `span` 元素应该包含文本 `10%`。
```js
assert(document.querySelector('.daily-value.small-text')?.lastElementChild?.querySelector('span + span')?.innerText === '10%');
```
The `span` element around `10%` should have the `class` set to `bold`.
包裹 `10%` 的 `span` 元素应该有 `class` 为 `bold`。
```js
assert(document.querySelector('.daily-value.small-text')?.lastElementChild?.querySelectorAll('span')?.[1]?.className === 'bold');
```
A `span` element should have the text `Total Fat 8g`.
一个 `span` 元素应该包含文本 `Total Fat 8g`。
```js
assert(document.querySelector('.daily-value.small-text')?.lastElementChild?.innerText?.match(/Total Fat[\s|\n]+8g/));

6
curriculum/challenges/chinese/14-responsive-web-design-22/learn-typography-by-building-a-nutrition-label/615f6cc778f7698258467596.md
View File

@@ -1,13 +1,13 @@
---
id: 615f6cc778f7698258467596
title: Step 44
title: 步骤 44
challengeType: 0
dashedName: step-44
---
# --description--
在带有 `Total Fat` 文本的元素下方，使用文本 `Saturated Fat 1g 5%` 创建一个新的 `p` 元素。 Wrap the `5%` in a `span` with the `class` attribute set to `bold`. In this case this is enough to align the percentage to `5%`.
在带有 `Total Fat` 文本的元素下方，使用文本 `Saturated Fat 1g 5%` 创建一个新的 `p` 元素。 将 `5%` 包裹在一个 `span` 中，并将 `class` 属性设置为 `bold`。 在这种情况下，将百分比设置为 `5%` 足够了。
# --hints--
@@ -30,7 +30,7 @@ assert(document.querySelector('.daily-value.small-text')?.lastElementChild?.inne
assert(document.querySelector('.daily-value.small-text')?.lastElementChild?.lastElementChild?.localName === 'span');
```
Your `span` element should have the `class` attribute set to `bold`.
你的 `span` 元素应该将 `class` 属性设置为 `bold`。
```js
assert(document.querySelector('.daily-value.small-text')?.lastElementChild?.lastElementChild?.classList?.contains('bold'));

2
curriculum/challenges/chinese/14-responsive-web-design-22/learn-typography-by-building-a-nutrition-label/615f6fddaac1e083502d3e6a.md
View File

@@ -1,6 +1,6 @@
---
id: 615f6fddaac1e083502d3e6a
title: Step 45
title: 步骤 45
challengeType: 0
dashedName: step-45
---

2
curriculum/challenges/chinese/14-responsive-web-design-22/learn-typography-by-building-a-nutrition-label/615f70077a4ff98424236c1e.md
View File

@@ -1,6 +1,6 @@
---
id: 615f70077a4ff98424236c1e
title: Step 46
title: 步骤 46
challengeType: 0
dashedName: step-46
---

2
curriculum/challenges/chinese/14-responsive-web-design-22/learn-typography-by-building-a-nutrition-label/615f72a872354a850d4f533e.md
View File

@@ -1,6 +1,6 @@
---
id: 615f72a872354a850d4f533e
title: Step 47
title: 步骤 47
challengeType: 0
dashedName: step-47
---

2
curriculum/challenges/chinese/14-responsive-web-design-22/learn-typography-by-building-a-nutrition-label/615f74a71f1e498619e38ee8.md
View File

@@ -1,6 +1,6 @@
---
id: 615f74a71f1e498619e38ee8
title: Step 48
title: 步骤 48
challengeType: 0
dashedName: step-48
---

2
curriculum/challenges/chinese/14-responsive-web-design-22/learn-typography-by-building-a-nutrition-label/615f7ad94380408d971d14f6.md
View File

@@ -1,6 +1,6 @@
---
id: 615f7ad94380408d971d14f6
title: Step 49
title: 步骤 49
challengeType: 0
dashedName: step-49
---

4
curriculum/challenges/chinese/14-responsive-web-design-22/learn-typography-by-building-a-nutrition-label/615f7bc680f7168ea01ebf99.md
View File

@@ -1,6 +1,6 @@
---
id: 615f7bc680f7168ea01ebf99
title: Step 50
title: 步骤 50
challengeType: 0
dashedName: step-50
---
@@ -13,7 +13,7 @@ dashedName: step-50
# --hints--
You should create a new `div` at the end of your `.daily-value` element.
你应该在 `.daily-value` 元素的末尾创建一个新的 `div`。
```js
assert(document.querySelector('.daily-value.small-text')?.lastElementChild?.localName === 'div');

10
curriculum/challenges/chinese/14-responsive-web-design-22/learn-typography-by-building-a-nutrition-label/615f7c71eab8218f846e4503.md
View File

@@ -1,17 +1,17 @@
---
id: 615f7c71eab8218f846e4503
title: Step 51
title: 步骤 51
challengeType: 0
dashedName: step-51
---
# --description--
在最后一个 `.divider` 之后，创建另一个 `p` 元素，其中包含文本 `Trans Fat 0g`。 通过将单词 `Trans` 包装在 `i` 元素中，将其变为斜体。 给新的 `p` 元素的 `class` 属性设置为 `indent no-divider`。 Wrap `Trans Fat 0g` in a `span` element for alignment.
在最后一个 `.divider` 之后，创建另一个 `p` 元素，其中包含文本 `Trans Fat 0g`。 通过将单词 `Trans` 包装在 `i` 元素中，将其变为斜体。 给新的 `p` 元素的 `class` 属性设置为 `indent no-divider`。 将 `Trans Fat 0g` 放在一个 `span` 元素中，以对齐它。
# --hints--
You should create a new `p` element at the end of your `.daily-value` element.
你应该在 `.daily-value` 元素的末尾创建一个新的 `p` 元素。
```js
assert(document.querySelector('.daily-value.small-text')?.lastElementChild?.localName === 'p');
@@ -43,13 +43,13 @@ assert(document.querySelector('.daily-value.small-text')?.lastElementChild?.quer
assert(document.querySelector('.daily-value.small-text')?.lastElementChild?.querySelector('i')?.innerText === 'Trans');
```
Your new `p` element should have a `span` element.
你的新 `p` 元素应该有一个 `span` 元素。
```js
assert(document.querySelector('.daily-value.small-text')?.lastElementChild?.querySelector('span'));
```
Your `span` element should wrap the text `Trans Fat 0g`.
你的 `span` 元素应该包含文本 `Trans Fat 0g`。
```js
assert(document.querySelector('.daily-value.small-text')?.lastElementChild?.querySelector('span')?.innerText?.match(/Trans[\s|\n]+Fat 0g/));

4
curriculum/challenges/chinese/14-responsive-web-design-22/learn-typography-by-building-a-nutrition-label/615f7d489a581590d1350288.md
View File

@@ -1,6 +1,6 @@
---
id: 615f7d489a581590d1350288
title: Step 52
title: 步骤 52
challengeType: 0
dashedName: step-52
---
@@ -11,7 +11,7 @@ dashedName: step-52
# --hints--
You should create a new `div` element at the end of your `.daily-value` element.
你应该在 `.daily-value` 元素的末尾创建一个新的 `div` 元素。
```js
assert(document.querySelector('.daily-value.small-text')?.lastElementChild?.localName === 'div');

18
curriculum/challenges/chinese/14-responsive-web-design-22/learn-typography-by-building-a-nutrition-label/615f7de4487b64919bb4aa5e.md
View File

@@ -1,17 +1,17 @@
---
id: 615f7de4487b64919bb4aa5e
title: Step 53
title: 步骤 53
challengeType: 0
dashedName: step-53
---
# --description--
在最后一个 `.divider` 之后，使用文本 `Cholesterol 0mg 0%` 创建一个新的 `p` 元素。 将文本 `Cholesterol` 包裹在 `span` 元素中，并将 `span` 元素的 `class` 属性设置为 `bold`。 Wrap the text `0%` in another `span` element, with the `class` set to `bold`. Finally, nest the `Cholesterol` and `0mg` span elements inside an additional span element for alignment.
在最后一个 `.divider` 之后，使用文本 `Cholesterol 0mg 0%` 创建一个新的 `p` 元素。 将文本 `Cholesterol` 包裹在 `span` 元素中，并将 `span` 元素的 `class` 属性设置为 `bold`。 将文本 `0%` 包裹在另一个 `span` 元素中，并将 `class` 设置为 `bold`。 最后，嵌套 `Cholesterol` 和 `0mg` span 元素在另一个 span 元素中，以实现对齐。
# --hints--
You should create a new `p` element at the end of your `.daily-value` element.
你应该在 `.daily-value` 元素的末尾创建一个新的 `p` 元素。
```js
assert(document.querySelector('.daily-value.small-text')?.lastElementChild?.localName === 'p');
@@ -23,37 +23,37 @@ assert(document.querySelector('.daily-value.small-text')?.lastElementChild?.loca
assert(document.querySelector('.daily-value.small-text')?.lastElementChild?.innerText?.match(/Cholesterol[\s|\n]+0mg[\s|\n]+0%/));
```
Your new `p` element should have three `span` elements.
你的新的 `p` 元素应该有三个 `span` 元素。
```js
assert(document.querySelector('.daily-value.small-text')?.lastElementChild?.querySelectorAll('span')?.length === 3);
```
Your first `span` `Cholesterol` element should have the `class` attribute set to `bold`.
你的第一个 `span` `Cholesterol` 元素应该将 `class` 属性设置为 `bold`。
```js
assert(document.querySelector('.daily-value.small-text')?.lastElementChild?.firstElementChild?.firstElementChild?.classList?.contains('bold'));
```
Your first `span` element should wrap the text `Cholesterol 0mg`.
你的第一个 `span` 元素应该包含文本 `Cholesterol 0mg`。
```js
assert(document.querySelector('.daily-value.small-text')?.lastElementChild?.firstElementChild?.innerText?.match(/Cholesterol[\s|\n]+0mg/));
```
Your first `span` element should wrap the text `Cholesterol`.
你的第一个 `span` 元素应该包含文本 `Cholesterol`。
```js
assert(document.querySelector('.daily-value.small-text')?.lastElementChild?.firstElementChild?.firstElementChild?.innerText === 'Cholesterol');
```
Your second `span` element should have the `class` attribute set to `bold`.
你的第二个 `span` 元素应该将 `class` 属性设置为 `bold`。
```js
assert(document.querySelector('.daily-value.small-text')?.lastElementChild?.lastElementChild?.classList?.contains('bold'));
```
Your second `span` element should wrap the text `0%`.
你的第二个 `span` 元素应该包含文本 `0%`。
```js
assert(document.querySelector('.daily-value.small-text')?.lastElementChild?.lastElementChild?.innerText === '0%');

18
curriculum/challenges/chinese/14-responsive-web-design-22/learn-typography-by-building-a-nutrition-label/615f7e7281626a92bbd62da8.md
View File

@@ -1,17 +1,17 @@
---
id: 615f7e7281626a92bbd62da8
title: Step 54
title: 步骤 54
challengeType: 0
dashedName: step-54
---
# --description--
在最后一个 `p` 元素下方，使用文本 `Sodium 160mg 7%` 创建另一个 `p` 元素。 将文本 `Sodium` 包裹在 `span` 元素中，并将 `class` 属性设置为 `bold`。 Wrap the `7%` text in another `span` element with the `class` set to `bold`. Also add an additional `span` element around `Sodium 160mg` for aligning it correctly.
在最后一个 `p` 元素下方，使用文本 `Sodium 160mg 7%` 创建另一个 `p` 元素。 将文本 `Sodium` 包裹在 `span` 元素中，并将 `class` 属性设置为 `bold`。 将 `7%` 文本包裹在另一个 `span` 元素中，其中 `class` 设置为 `bold`。 另外在 `Sodium 160mg` 外面添加一个 `span` 元素，以便正确地对齐。
# --hints--
You should create a new `p` element at the end of your `.daily-value` element.
你应该在 `.daily-value` 元素的末尾创建一个新的 `p` 元素。
```js
assert(document.querySelector('.daily-value.small-text')?.lastElementChild?.localName === 'p');
@@ -23,37 +23,37 @@ assert(document.querySelector('.daily-value.small-text')?.lastElementChild?.loca
assert(document.querySelector('.daily-value.small-text')?.lastElementChild?.innerText?.match(/Sodium[\s|\n]160mg[\s|\n]+7%/));
```
Your new `p` element should have three `span` elements.
你的新的 `p` 元素应该有三个 `span` 元素。
```js
assert(document.querySelector('.daily-value.small-text')?.lastElementChild?.querySelectorAll('span')?.length === 3);
```
A `span` element should wrap the text `Sodium 360mg`.
一个 `span` 元素应该包含文本 `Sodium 360mg`。
```js
assert(document.querySelector('.daily-value.small-text')?.lastElementChild?.firstElementChild?.innerText?.match(/Sodium[\s|\n]160mg/));
```
A `span` element should wrap the text `Sodium`.
一个 `span` 元素应该包含文本 `Sodium`。
```js
assert(document.querySelector('.daily-value.small-text')?.lastElementChild?.firstElementChild?.firstElementChild?.innerText === "Sodium");
```
The `span` around `Sodium` should have the `class` attribute set to `bold`.
包裹 `Sodium` 的 `span` 元素应该有 `class` 为 `bold`。
```js
assert(document.querySelector('.daily-value.small-text')?.lastElementChild?.firstElementChild?.firstElementChild?.classList?.contains('bold'));
```
A `span` element should wrap the text `7%`.
一个 `span` 元素应该包含文本 `7%`。
```js
assert(document.querySelector('.daily-value.small-text')?.lastElementChild?.lastElementChild?.innerText === '7%');
```
The `span` element around `7%` should have the `class` attribute set to `bold`.
包裹 `7%` 的 `span` 元素应该有 `class` 属性为 `bold`。
```js
assert(document.querySelector('.daily-value.small-text')?.lastElementChild?.lastElementChild?.classList?.contains('bold'));

20
curriculum/challenges/chinese/14-responsive-web-design-22/learn-typography-by-building-a-nutrition-label/615f7ecb09de9a938ef94756.md
View File

@@ -1,17 +1,17 @@
---
id: 615f7ecb09de9a938ef94756
title: Step 55
title: 步骤 55
challengeType: 0
dashedName: step-55
---
# --description--
添加另一个 `p` 元素，其文本为 `Total Carbohydrate 37g 13%`。 Like before, use `span` elements to make the text `Total Carbohydrate` and `13%` bold. Also add an additional `span` element to wrap the `Total Carbohydrate 37g` text in a span element so to have it aligned to the left, and `13%` to the right.
添加另一个 `p` 元素，其文本为 `Total Carbohydrate 37g 13%`。 像之前一样，使用 `span` 元素使文本 `Total Carbohydrate` 和 `13%` 加粗。 再添加一个 `span` 元素来包裹 `Total Carbohydrate 37g` 文本，使其对齐到左边，`13%` 对齐到右边。
# --hints--
You should create a new `p` element at the end of your `.daily-value` element.
你应该在 `.daily-value` 元素的末尾创建一个新的 `p` 元素。
```js
assert(document.querySelector('.daily-value.small-text')?.lastElementChild?.localName === 'p');
@@ -23,43 +23,43 @@ assert(document.querySelector('.daily-value.small-text')?.lastElementChild?.loca
assert(document.querySelector('.daily-value.small-text')?.lastElementChild?.innerText?.match(/Total Carbohydrate[\s|\n]+37g[\s|\n]+13%/));
```
Your new `p` element should have three `span` elements.
你的新的 `p` 元素应该有三个 `span` 元素。
```js
assert(document.querySelector('.daily-value.small-text')?.lastElementChild?.querySelectorAll('span')?.length === 3);
```
One `span` element should wrap the text `Total Carbohydrate 37g`.
一个 `span` 元素应该包含文本 `Total Carbohydrate 37g`。
```js
assert(document.querySelector('.daily-value.small-text')?.lastElementChild?.firstElementChild?.innerText?.match(/Total Carbohydrate[\s|\n]+37g/));
```
One `span` element should wrap the text `Total Carbohydrate`.
一个 `span` 元素应该包含文本 `Total Carbohydrate`。
```js
assert(document.querySelector('.daily-value.small-text')?.lastElementChild?.firstElementChild?.firstElementChild?.innerText === 'Total Carbohydrate');
```
The `span` element around `Total Carbohydrate` should have the `class` attribute set to `bold`.
包裹 `Total Carbohydrate` 的 `span` 元素应该有 `class` 为 `bold`。
```js
assert(document.querySelector('.daily-value.small-text')?.lastElementChild?.firstElementChild?.firstElementChild?.classList?.contains('bold'));
```
A `span` element should wrap the text `13%`.
一个 `span` 元素应该包含文本 `13%`。
```js
assert(document.querySelector('.daily-value.small-text')?.lastElementChild?.lastElementChild?.innerText === '13%');
```
The `span` element around `13%` should have the `class` attribute set to `bold`.
包裹 `13%` 的 `span` 元素应该有 `class` 属性为 `bold`。
```js
assert(document.querySelector('.daily-value.small-text')?.lastElementChild?.lastElementChild?.classList?.contains('bold'));
```
Your second `span` element should wrap the text `13%`.
你的第二个 `span` 元素应该包含文本 `13%`。
```js
assert(document.querySelector('.daily-value.small-text')?.lastElementChild?.lastElementChild?.innerText === '13%');

4
curriculum/challenges/chinese/14-responsive-web-design-22/learn-typography-by-building-a-nutrition-label/615f7fa959ab75948f96a0d6.md
View File

@@ -1,6 +1,6 @@
---
id: 615f7fa959ab75948f96a0d6
title: Step 56
title: 步骤 56
challengeType: 0
dashedName: step-56
---
@@ -11,7 +11,7 @@ dashedName: step-56
# --hints--
You should create a new `p` and `div` element at the end of your `.daily-value` element.
你应该在 `.daily-value` 元素的末尾创建一个新的 `p` 和 `div` 元素。
```js
assert(document.querySelector('.daily-value.small-text')?.lastElementChild?.previousElementSibling?.localName === 'p');

4
curriculum/challenges/chinese/14-responsive-web-design-22/learn-typography-by-building-a-nutrition-label/615f808d85793195b0f53be9.md
View File

@@ -1,6 +1,6 @@
---
id: 615f808d85793195b0f53be9
title: Step 57
title: 步骤 57
challengeType: 0
dashedName: step-57
---
@@ -11,7 +11,7 @@ dashedName: step-57
# --hints--
You should create a new `p` and `div` element at the end of your `.daily-value` element.
你应该在 `.daily-value` 元素的末尾创建一个新的 `p` 和 `div` 元素。
```js
assert(document.querySelector('.daily-value.small-text')?.lastElementChild?.previousElementSibling?.localName === 'p');

6
curriculum/challenges/chinese/14-responsive-web-design-22/learn-typography-by-building-a-nutrition-label/615f829d07b18f96f6f6684b.md
View File

@@ -1,17 +1,17 @@
---
id: 615f829d07b18f96f6f6684b
title: Step 58
title: 步骤 58
challengeType: 0
dashedName: step-58
---
# --description--
创建这些分隔线的好处是你可以应用特定的类来单独设置它们的样式。 Add `double-indent` to the `class` for your last `.divider`.
创建这些分隔线的好处是你可以应用特定的类来单独设置它们的样式。 将 `double-indent` 添加到你的最后一个 `.divider` 的 `class`。
# --hints--
Your last `.divider` element should have `double-indent` added to the `class`. 不要删除现有值。
你的最后一个 `.divider` 元素应该将 `double-indent` 添加到 `class`。 不要删除现有值。
```js
const last = document.querySelector('.daily-value.small-text')?.lastElementChild;

8
curriculum/challenges/chinese/14-responsive-web-design-22/learn-typography-by-building-a-nutrition-label/615f83ef928ec9982b785b6a.md
View File

@@ -1,23 +1,23 @@
---
id: 615f83ef928ec9982b785b6a
title: Step 59
title: 步骤 59
challengeType: 0
dashedName: step-59
---
# --description--
Create a `.double-indent` selector and give it a left margin of `2em`.
创建一个 `.double-indent` 选择器，并给它一个 `2em` 的左边距。
# --hints--
You should have a new `.double-indent` selector.
你应该有一个新的 `.double-indent` 选择器。
```js
assert(new __helpers.CSSHelp(document).getStyle('.double-indent'));
```
Your `.double-indent` selector should have a `margin-left` property set to `2em`.
你的 `.double-indent` 选择器应该有一个 `margin-left` 属性设置为 `2em`。
```js
assert(new __helpers.CSSHelp(document).getStyle('.double-indent')?.marginLeft === '2em');

10
curriculum/challenges/chinese/14-responsive-web-design-22/learn-typography-by-building-a-nutrition-label/615f84f246e8ba98e3cd97be.md
View File

@@ -1,19 +1,19 @@
---
id: 615f84f246e8ba98e3cd97be
title: Step 60
title: 步骤 60
challengeType: 0
dashedName: step-60
---
# --description--
Below your `.double-indent` element, add a new `p` element with the text `Includes 10g Added Sugars 20%`. 新的 `p` 元素也应该是双缩进的，并且没有下边框。 使用 `span` 使 `20%` 加粗并右对齐。
在你的 `.double-indent` 元素的下方，添加一个新的 `p` 元素，其中包含文本 `Includes 10g Added Sugars 20%`。 新的 `p` 元素也应该是双缩进的，并且没有下边框。 使用 `span` 使 `20%` 加粗并右对齐。
然后在该 `p` 元素之后创建另一个分隔线。
# --hints--
You should create a new `p` and `div` element at the end of your `.daily-value` element.
你应该在 `.daily-value` 元素的末尾创建一个新的 `p` 和 `div` 元素。
```js
assert(document.querySelector('.daily-value.small-text')?.lastElementChild?.previousElementSibling?.localName === 'p');
@@ -26,7 +26,7 @@ assert(document.querySelector('.daily-value.small-text')?.lastElementChild?.loca
assert(document.querySelector('.daily-value.small-text p:last-of-type')?.innerText.match(/Includes 10g Added Sugars[\s|\n]+20%/));
```
Your new `p` element should have the `class` attribute set to `double-indent no-divider`.
你的新 `p` 元素应该将 `class` 属性设置为 `double-indent no-divider`。
```js
assert(document.querySelector('.daily-value.small-text p:last-of-type')?.classList?.contains('double-indent'));
@@ -39,7 +39,7 @@ assert(document.querySelector('.daily-value.small-text p:last-of-type')?.classLi
assert(document.querySelector('.daily-value.small-text p:last-of-type')?.firstElementChild?.localName === 'span');
```
Your `span` element should have the `class` attribute set to `bold`.
你的 `span` 元素应该将 `class` 属性设置为 `bold`。
```js
assert(document.querySelector('.daily-value.small-text p:last-of-type')?.firstElementChild?.classList?.contains('bold'));

6
curriculum/challenges/chinese/14-responsive-web-design-22/learn-typography-by-building-a-nutrition-label/615f887466db4ba14b5342cc.md
View File

@@ -1,6 +1,6 @@
---
id: 615f887466db4ba14b5342cc
title: Step 61
title: 步骤 61
challengeType: 0
dashedName: step-61
---
@@ -13,7 +13,7 @@ dashedName: step-61
# --hints--
You should create a new `p` and `div` element at the end of your `.daily-value` element.
你应该在 `.daily-value` 元素的末尾创建一个新的 `p` 和 `div` 元素。
```js
assert(document.querySelector('.daily-value.small-text')?.lastElementChild?.previousElementSibling?.localName === 'p');
@@ -32,7 +32,7 @@ assert(document.querySelector('.daily-value.small-text p:last-of-type')?.innerTe
assert(document.querySelector('.daily-value.small-text p:last-of-type')?.classList?.contains('no-divider'));
```
Your new `div` should have the `class` attribute set to `divider large`.
你的新 `div` 应该将 `class` 属性设置为 `divider large`。
```js
assert(document.querySelector('.daily-value.small-text')?.lastElementChild?.classList?.contains('divider'));

12
curriculum/challenges/chinese/14-responsive-web-design-22/learn-typography-by-building-a-nutrition-label/615f89e055040ba294719d2f.md
View File

@@ -1,6 +1,6 @@
---
id: 615f89e055040ba294719d2f
title: Step 62
title: 步骤 62
challengeType: 0
dashedName: step-62
---
@@ -9,29 +9,29 @@ dashedName: step-62
在大分隔线下方创建另一个 `p` 元素。 为 `p` 元素提供文本 `Vitamin D 2mcg 10%`。
The `p` element contains only text, you can wrap the percentage in a `span` element so that it is considered a separate entity from the rest of the text, and it's moved to the right.
`p` 元素只包含文本，你可以将百分比放在 `span` 元素中，这样它就可以被视为与其余文本分开的内容，并且它被移动到右边。
# --hints--
You should create a new `p` element at the end of your `.daily-value` element.
你应该在 `.daily-value` 元素的末尾创建一个新的 `p` 元素。
```js
assert(document.querySelector('.daily-value.small-text')?.lastElementChild?.localName === 'p');
```
Your new `p` element should have the text `Vitamin D 2mcg 10%`.
你的新 `p` 元素应包含文本 `Vitamin D 2mcg 10%`。
```js
assert(document.querySelector('.daily-value.small-text')?.lastElementChild?.innerText?.match(/Vitamin D 2mcg[\s|\n]+10%/));
```
Your new `p` element should have a `span` element.
你的新 `p` 元素应该有一个 `span` 元素。
```js
assert(document.querySelector('.daily-value.small-text')?.lastElementChild?.querySelectorAll('span')?.length === 1);
```
Your `span` element should not be bold.
你的 `span` 元素不应该是粗体。
```js
assert(!document.querySelector('.daily-value.small-text')?.lastElementChild?.querySelector('span')?.classList?.contains('bold'));

8
curriculum/challenges/chinese/14-responsive-web-design-22/learn-typography-by-building-a-nutrition-label/615f8bfe0f30a1a3c340356b.md
View File

@@ -1,6 +1,6 @@
---
id: 615f8bfe0f30a1a3c340356b
title: Step 63
title: 步骤 63
challengeType: 0
dashedName: step-63
---
@@ -11,7 +11,7 @@ dashedName: step-63
# --hints--
You should create two new `p` elements at the end of your `.daily-value` element.
你应该在 `.daily-value` 元素的末尾创建一个新的 `p` 元素。
```js
assert(document.querySelector('.daily-value.small-text')?.lastElementChild?.localName === 'p');
@@ -30,7 +30,7 @@ assert(document.querySelector('.daily-value.small-text')?.lastElementChild?.prev
assert(document.querySelector('.daily-value.small-text')?.lastElementChild?.previousElementSibling?.firstElementChild?.localName === 'span');
```
Your first `span` element should not be bold.
你的第一个 `span` 元素不应该是粗体。
```js
assert(!document.querySelector('.daily-value.small-text')?.lastElementChild?.previousElementSibling?.firstElementChild?.classList?.contains('bold'));
@@ -54,7 +54,7 @@ assert(document.querySelector('.daily-value.small-text')?.lastElementChild?.inne
assert(document.querySelector('.daily-value.small-text')?.lastElementChild?.firstElementChild?.localName === 'span');
```
Your second `span` element should not be bold.
你的第二个 `span` 元素不应该是粗体。
```js
assert(!document.querySelector('.daily-value.small-text')?.lastElementChild?.firstElementChild?.classList?.contains('bold'));

6
curriculum/challenges/chinese/14-responsive-web-design-22/learn-typography-by-building-a-nutrition-label/615f8f1223601fa546e93f31.md
View File

@@ -1,6 +1,6 @@
---
id: 615f8f1223601fa546e93f31
title: Step 64
title: 步骤 64
challengeType: 0
dashedName: step-64
---
@@ -11,7 +11,7 @@ dashedName: step-64
# --hints--
You should create a new `p` element at the end of your `.daily-value` element.
你应该在 `.daily-value` 元素的末尾创建一个新的 `p` 元素。
```js
assert(document.querySelector('.daily-value.small-text')?.lastElementChild?.localName === 'p');
@@ -35,7 +35,7 @@ assert(document.querySelector('.daily-value.small-text')?.lastElementChild?.inne
assert(document.querySelector('.daily-value.small-text')?.lastElementChild?.querySelectorAll('span')?.length === 1);
```
Your `span` element should not be bold.
你的 `span` 元素不应该是粗体。
```js
assert(!document.querySelector('.daily-value.small-text')?.lastElementChild?.querySelector('span')?.classList?.contains('bold'));

4
curriculum/challenges/chinese/14-responsive-web-design-22/learn-typography-by-building-a-nutrition-label/615f905fbd1017a65ca224eb.md
View File

@@ -1,6 +1,6 @@
---
id: 615f905fbd1017a65ca224eb
title: Step 65
title: 步骤 65
challengeType: 0
dashedName: step-65
---
@@ -23,7 +23,7 @@ dashedName: step-65
assert(document.querySelector('.daily-value').nextElementSibling?.localName === 'div');
```
Your new `div` should have the `class` set to `divider medium`.
你的新 `div` 应该将 `class` 设置为 `divider medium`。
```js
assert(document.querySelector('.daily-value')?.nextElementSibling?.classList?.contains('divider'));

2
curriculum/challenges/chinese/14-responsive-web-design-22/learn-typography-by-building-a-nutrition-label/615f94786869e1a7fec54375.md
View File

@@ -1,6 +1,6 @@
---
id: 615f94786869e1a7fec54375
title: Step 66
title: 步骤 66
challengeType: 0
dashedName: step-66
---

2
curriculum/challenges/chinese/14-responsive-web-design-22/learn-typography-by-building-a-nutrition-label/615f951dff9317a900ef683f.md
View File

@@ -1,6 +1,6 @@
---
id: 615f951dff9317a900ef683f
title: Step 67
title: 步骤 67
challengeType: 0
dashedName: step-67
---

8
curriculum/challenges/chinese/14-responsive-web-design-22/learn-typography-by-building-a-nutrition-label/635bde33c91c80540eae239b.md
View File

@@ -1,17 +1,17 @@
---
id: 635bde33c91c80540eae239b
title: Step 41
title: 步骤 41
challengeType: 0
dashedName: step-41
---
# --description--
The text `* Daily Value %` should be aligned to the right. Create a `.right` selector and use the `justify-content` property to do it.
文本 `* Daily Value %` 应该右对齐。 创建一个 `.right` 选择器，并使用 `justify-content` 属性来实现它。
# --hints--
You should have a `.right` selector.
你应该有一个 `.right` 选择器。
```js
const hasRight = new __helpers.CSSHelp(document).getStyle('.right');
@@ -19,7 +19,7 @@ assert(hasRight);
```
The `.right` selector should have the `justify-content` property set to `flex-end`.
`.right` 选择器应该将 `justify-content` 属性设置为 `flex-end`。
```js
const rightJustifyContent = new __helpers.CSSHelp(document).getStyle('.right')?.getPropertyValue('justify-content');

Some files were not shown because too many files have changed in this diff Show More