chore(i18n,curriculum): update translations (#43463)
This commit is contained in:
camperbot
GitHub
@ -1,6 +1,6 @@
|
||||
---
|
||||
id: 561add10cb82ac38a17523bc
|
||||
title: 後端開發和API證書
|
||||
title: 後端開發和 API 認證
|
||||
challengeType: 7
|
||||
isPrivate: true
|
||||
tests:
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
---
|
||||
id: 5e46fc95ac417301a38fb934
|
||||
title: Python 與數據分析證書
|
||||
title: Python 與數據分析認證
|
||||
challengeType: 7
|
||||
isPrivate: true
|
||||
tests:
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
---
|
||||
id: 5a553ca864b52e1d8bceea14
|
||||
title: Data Visualization Certification
|
||||
title: 數據可視化認證
|
||||
challengeType: 7
|
||||
isPrivate: true
|
||||
tests:
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
---
|
||||
id: 561acd10cb82ac38a17513bc
|
||||
title: 前端開發庫證書
|
||||
title: 前端開發庫認證
|
||||
challengeType: 7
|
||||
isPrivate: true
|
||||
tests:
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
---
|
||||
id: 5e6021435ac9d0ecd8b94b00
|
||||
title: 信息安全證書
|
||||
title: 信息安全認證
|
||||
challengeType: 7
|
||||
isPrivate: true
|
||||
tests:
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
---
|
||||
id: 561abd10cb81ac38a17513bc
|
||||
title: JavaScript 算法和數據結構證書
|
||||
title: JavaScript 算法和數據結構認證
|
||||
challengeType: 7
|
||||
isPrivate: true
|
||||
tests:
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
---
|
||||
id: 660add10cb82ac38a17513be
|
||||
title: 舊版後端證書
|
||||
title: 舊版後端認證
|
||||
challengeType: 7
|
||||
isPrivate: true
|
||||
tests:
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
---
|
||||
id: 561add10cb82ac39a17513bc
|
||||
title: 舊版數據可視化證書
|
||||
title: 舊版數據可視化認證
|
||||
challengeType: 7
|
||||
isPrivate: true
|
||||
tests:
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
---
|
||||
id: 561add10cb82ac38a17513be
|
||||
title: 舊版前端證書
|
||||
title: 舊版前端認證
|
||||
challengeType: 7
|
||||
isPrivate: true
|
||||
tests:
|
||||
|
||||
@ -6,19 +6,19 @@ isPrivate: true
|
||||
tests:
|
||||
-
|
||||
id: 561add10cb82ac38a17513bc
|
||||
title: 響應式網頁設計證書
|
||||
title: 響應式 Web 設計認證
|
||||
-
|
||||
id: 561abd10cb81ac38a17513bc
|
||||
title: JavaScript 算法和數據結構證書
|
||||
title: JavaScript 算法和數據結構認證
|
||||
-
|
||||
id: 561acd10cb82ac38a17513bc
|
||||
title: 前端庫證書
|
||||
title: 前端庫認證
|
||||
-
|
||||
id: 5a553ca864b52e1d8bceea14
|
||||
title: 數據可視化證書
|
||||
title: 數據可視化認證
|
||||
-
|
||||
id: 561add10cb82ac38a17523bc
|
||||
title: API 和微服務證書
|
||||
title: API 和微服務認證
|
||||
-
|
||||
id: 561add10cb82ac38a17213bc
|
||||
title: 舊版信息安全和質量保證證書
|
||||
title: 舊版信息安全和質量保證認證
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
---
|
||||
id: 561add10cb82ac38a17213bc
|
||||
title: 舊版信息安全和質量保證證書
|
||||
title: 舊版信息安全和質量保證認證
|
||||
challengeType: 7
|
||||
isPrivate: true
|
||||
tests:
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
---
|
||||
id: 5e46fc95ac417301a38fb935
|
||||
title: Machine Learning with Python Certification
|
||||
title: Python 與機器學習認證
|
||||
challengeType: 7
|
||||
isPrivate: true
|
||||
tests:
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
---
|
||||
id: 5e611829481575a52dc59c0e
|
||||
title: 質量保證證書
|
||||
title: 質量保證認證
|
||||
challengeType: 7
|
||||
isPrivate: true
|
||||
tests:
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
---
|
||||
id: 606243f50267e718b1e755f4
|
||||
title: 關係型數據庫證書
|
||||
title: 關係數據庫認證
|
||||
challengeType: 7
|
||||
isPrivate: true
|
||||
tests:
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
---
|
||||
id: 561add10cb82ac38a17513bc
|
||||
title: 響應式網頁設計認證項目
|
||||
title: 響應式 Web 設計認證
|
||||
challengeType: 7
|
||||
isPrivate: true
|
||||
tests:
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
---
|
||||
id: 5e44431b903586ffb414c951
|
||||
title: Python 與科學計算證書
|
||||
title: Python 與科學計算認證
|
||||
challengeType: 7
|
||||
isPrivate: true
|
||||
tests:
|
||||
|
||||
@ -10,7 +10,7 @@ dashedName: prevent-object-mutation
|
||||
|
||||
通過之前的挑戰可以看出，`const` 聲明並不會真的保護數據不被改變。 爲了確保數據不被改變，JavaScript 提供了一個函數 `Object.freeze`。
|
||||
|
||||
當一個對象被凍結的時候，你不能再對它的屬性再進行增、刪、改的操作。 任何試圖改變對象的操作都會被阻止，卻不會報錯。
|
||||
任何更改對象的嘗試都將被拒絕，如果腳本在嚴格模式下運行，將拋出錯誤。
|
||||
|
||||
```js
|
||||
let obj = {
|
||||
@ -23,7 +23,7 @@ obj.newProp = "Test";
|
||||
console.log(obj);
|
||||
```
|
||||
|
||||
`obj.review` 和 `obj.newProp` 賦值將導致錯誤，控制檯將顯示值 `{ name: "FreeCodeCamp", review: "Awesome" }`。
|
||||
`obj.review` 和 `obj.newProp` 賦值將導致錯誤，因爲我們的編輯器默認在嚴格模式下運行，控制檯將顯示值 `{ name: "FreeCodeCamp", review: "Awesome" }`。
|
||||
|
||||
# --instructions--
|
||||
|
||||
|
||||
@ -38,7 +38,7 @@ JavaScript 的默認排序方法是 Unicode 值順序排序，有時可能會得
|
||||
|
||||
# --instructions--
|
||||
|
||||
在 `alphabeticalOrder` 函數中使用 `sort` 方法對 `arr` 中的元素按照字母順序排列。
|
||||
在 `alphabeticalOrder` 函數中使用 `sort` 方法對 `arr` 中的元素按照字母順序排列。 該函數應返回一個排序的數組。
|
||||
|
||||
# --hints--
|
||||
|
||||
@ -83,7 +83,7 @@ assert(
|
||||
function alphabeticalOrder(arr) {
|
||||
// Only change code below this line
|
||||
|
||||
|
||||
return arr
|
||||
// Only change code above this line
|
||||
}
|
||||
alphabeticalOrder(["a", "d", "c", "a", "z", "g"]);
|
||||
|
||||
@ -12,7 +12,7 @@ dashedName: add-font-awesome-icons-to-our-buttons
|
||||
|
||||
# --description--
|
||||
|
||||
Font Awesome 是一個非常便利的圖標庫。 我們可以通過 webfont 或矢量圖的方式來使用這些圖標。 這些圖標就和字體一樣， 不僅能通過像素單位指定它們的大小，它們也同樣會繼承父級 HTML 元素的字體大小。
|
||||
Font Awesome 是一個非常便利的圖標庫。 我們可以通過 webfont 或矢量圖的方式來使用這些圖標。 這些圖標就和字體一樣， 不僅能通過像素單位指定它們的大小，它們也同樣會繼承父級 HTML 元素的字號。
|
||||
|
||||
可以將 Font Awesome 圖標庫添加至任何一個 web app 中，方法很簡單，只需要在 HTML head 標籤中添加以下代碼即可：
|
||||
|
||||
|
||||
@ -12,7 +12,7 @@ Bootstrap 有着豐富的預定義按鈕顏色。 淺藍色的 `btn-info` class
|
||||
|
||||
在 `Like` 按鈕下方創建包含文本 `Info` 的塊級 Bootstrap 按鈕，然後爲該按鈕添加 Bootstrap 的 `btn-info` 和 `btn-block` classes。
|
||||
|
||||
注意：這些按鈕仍然需要 `btn` 和 `btn-block` classes。
|
||||
注意：這些按鈕仍然需要 `btn` 和 `btn-block` class。
|
||||
|
||||
# --hints--
|
||||
|
||||
|
||||
@ -29,7 +29,7 @@ assert(
|
||||
assert($('button').hasClass('btn') && $('button').hasClass('btn-default'));
|
||||
```
|
||||
|
||||
保證所有 `button` 元素都有一個閉合標籤。
|
||||
確保所有 `button` 元素都有閉合標籤。
|
||||
|
||||
```js
|
||||
assert(
|
||||
|
||||
@ -10,9 +10,9 @@ dashedName: build-a-25--5-clock
|
||||
|
||||
**目標：** 在 [CodePen.io](https://codepen.io) 上實現一個功能類似 <https://codepen.io/freeCodeCamp/full/XpKrrW> 的 App。
|
||||
|
||||
在滿足以下[需求](https://en.wikipedia.org/wiki/User_story)並能通過所有測試的前提下， 可以根據自己的喜好來美化 app。
|
||||
在滿足以下 [需求](https://en.wikipedia.org/wiki/User_story) 並能通過所有測試的前提下， 賦予它你自己的個人風格。
|
||||
|
||||
可以使用 HTML、JavaScript、CSS、Bootstrap、SASS、React、Redux、jQuery 來完成這個挑戰。 但鑑於這個章節的學習內容與前端框架相關，推薦使用一款前端框架（比如 React）來完成這個挑戰。 不推薦使用前面沒有提到的技術，否則風險自負。 我們有計劃新增其他前端框架課程，例如 Angular 和 Vue，不過目前還沒有這些內容。 如果使用建議的技術棧完成這個項目，我們會接受並嘗試修復相關的問題反饋。 編碼愉快！
|
||||
可以使用 HTML、JavaScript、CSS、Bootstrap、SASS、React、Redux、jQuery 來完成這個挑戰。 但鑑於這個章節的學習內容與前端框架相關，推薦使用一款前端框架（比如 React）來完成這個挑戰；不推薦使用前面沒有提到的技術，否則風險自負。 不推薦使用前面沒有提到的技術，否則風險自擔。 我們有計劃新增其他前端框架課程，例如 Angular 和 Vue，不過目前還沒有這些內容。 我們會接受並嘗試修復你在使用推薦技術棧創建項目時報告的問題。 編碼愉快！
|
||||
|
||||
**需求 1：** 應該能看到一個具有`id="break-label"`屬性的元素，這個元素的內容應該是一個字符串（例如："Break Length"）。
|
||||
|
||||
|
||||
@ -10,9 +10,9 @@ dashedName: build-a-drum-machine
|
||||
|
||||
**目標：** 在 [CodePen.io](https://codepen.io) 上實現一個功能類似 <https://codepen.io/freeCodeCamp/full/MJyNMd> 的 App。
|
||||
|
||||
在滿足以下[需求](https://en.wikipedia.org/wiki/User_story)並能通過所有測試的前提下， 可以根據自己的喜好來美化 app。
|
||||
在滿足以下 [需求](https://en.wikipedia.org/wiki/User_story) 並能通過所有測試的前提下， 賦予它你自己的個人風格。
|
||||
|
||||
可以使用 HTML、JavaScript、CSS、Bootstrap、SASS、React、Redux、jQuery 來完成這個挑戰。 但鑑於這個章節的學習內容與前端框架相關，推薦使用一款前端框架（比如 React）來完成這個挑戰。 不推薦使用前面沒有提到的技術，否則風險自負。 我們有計劃新增其他前端框架課程，例如 Angular 和 Vue，不過目前還沒有這些內容。 我們會接受並嘗試修復使用推薦技術棧遇到的反饋問題。 編碼愉快！
|
||||
可以使用 HTML、JavaScript、CSS、Bootstrap、SASS、React、Redux、jQuery 來完成這個挑戰。 但鑑於這個章節的學習內容與前端框架相關，推薦使用一款前端框架（比如 React）來完成這個挑戰。 不推薦使用前面沒有提到的技術，否則風險自擔。 我們有計劃新增其他前端框架課程，例如 Angular 和 Vue，不過目前還沒有這些內容。 我們會接受並嘗試修復你在使用推薦技術棧創建項目時報告的問題。 編碼愉快！
|
||||
|
||||
**需求 1：** 應該可以看到一個具有 `id="drum-machine"` 屬性的外層容器，該容器包含了其它所有元素。
|
||||
|
||||
|
||||
@ -10,9 +10,9 @@ dashedName: build-a-javascript-calculator
|
||||
|
||||
**目標：** 在 [CodePen.io](https://codepen.io) 上實現一個功能類似 <https://codepen.io/freeCodeCamp/full/wgGVVX> 的 App。
|
||||
|
||||
在滿足以下[需求](https://en.wikipedia.org/wiki/User_story)並能通過所有測試的前提下， 可以根據自己的喜好來美化 app。
|
||||
在滿足以下 [需求](https://en.wikipedia.org/wiki/User_story) 並能通過所有測試的前提下， 賦予它你自己的個人風格。
|
||||
|
||||
可以使用 HTML、JavaScript、CSS、Bootstrap、SASS、React、Redux、jQuery 來完成這個挑戰。 但鑑於這個章節的學習內容與前端框架相關，推薦使用一款前端框架（比如 React）來完成這個挑戰。 不推薦使用前面沒有提到的技術，否則風險自負。 我們有計劃新增其他前端框架課程，例如 Angular 和 Vue，不過目前還沒有這些內容。 我們會接受並嘗試修復使用推薦技術棧遇到的反饋問題。 編碼愉快！
|
||||
可以使用 HTML、JavaScript、CSS、Bootstrap、SASS、React、Redux、jQuery 來完成這個挑戰。 但鑑於這個章節的學習內容與前端框架相關，推薦使用一款前端框架（比如 React）來完成這個挑戰；不推薦使用前面沒有提到的技術，否則風險自負。 不推薦使用前面沒有提到的技術，否則風險自擔。 我們有計劃新增其他前端框架課程，例如 Angular 和 Vue，不過目前還沒有這些內容。 我們會接受並嘗試修復你在使用推薦技術棧創建項目時報告的問題。 編碼愉快！
|
||||
|
||||
**需求 1：** 計算器應該包含一個具有 `id="equals"` 屬性的可以點擊的元素，元素的文本內容爲 `=`（等於符號）。
|
||||
|
||||
|
||||
@ -10,9 +10,9 @@ dashedName: build-a-markdown-previewer
|
||||
|
||||
**目標：** 在 [CodePen.io](https://codepen.io) 上實現一個功能類似 <https://codepen.io/freeCodeCamp/full/GrZVVO> 的 App。
|
||||
|
||||
在滿足以下[需求](https://en.wikipedia.org/wiki/User_story)並能通過所有測試的前提下， 你可以根據自己的喜好來美化 app。
|
||||
在滿足以下 [需求](https://en.wikipedia.org/wiki/User_story) 並能通過所有測試的前提下， 賦予它你自己的個人風格。
|
||||
|
||||
可以使用 HTML、JavaScript、CSS、Bootstrap、SASS、React、Redux、jQuery 來完成這個挑戰。 但鑑於這個章節的學習內容與前端框架相關，推薦使用一款前端框架（比如 React）來完成這個挑戰。 不推薦使用前面沒有提到的技術，否則風險自負。 我們有計劃新增其他前端框架課程，例如 Angular 和 Vue，不過目前還沒有這些內容。 我們會接受並嘗試修復使用推薦技術棧遇到的反饋問題。 編碼愉快！
|
||||
可以使用 HTML、JavaScript、CSS、Bootstrap、SASS、React、Redux、jQuery 來完成這個挑戰。 但鑑於這個章節的學習內容與前端框架相關，推薦使用一款前端框架（比如 React）來完成這個挑戰；不推薦使用前面沒有提到的技術，否則風險自負。 不推薦使用前面沒有提到的技術，否則風險自擔。 我們有計劃新增其他前端框架課程，例如 Angular 和 Vue，不過目前還沒有這些內容。 我們會接受並嘗試修復你在使用推薦技術棧創建項目時報告的問題。 編碼愉快！
|
||||
|
||||
**需求 1：** 應該能看到一個具有 `id="editor"` 屬性的 `textarea` 元素。
|
||||
|
||||
|
||||
@ -10,9 +10,9 @@ dashedName: build-a-random-quote-machine
|
||||
|
||||
**目標：** 在 [CodePen.io](https://codepen.io) 上實現一個功能類似 <https://codepen.io/freeCodeCamp/full/qRZeGZ> 的 App。
|
||||
|
||||
在滿足以下[需求](https://en.wikipedia.org/wiki/User_story)並能通過所有測試的前提下， 可以根據自己的喜好來美化 app。
|
||||
在滿足以下 [需求](https://en.wikipedia.org/wiki/User_story) 並能通過所有測試的前提下， 賦予它你自己的個人風格。
|
||||
|
||||
可以使用 HTML、JavaScript、CSS、Bootstrap、SASS、React、Redux、jQuery 來完成這個挑戰。 但鑑於這個章節的學習內容與前端框架相關，推薦使用一款前端框架（比如 React）來完成這個挑戰。 不推薦使用前面沒有提到的技術，否則風險自擔。 我們有計劃新增其他前端框架課程，例如 Angular 和 Vue，不過目前還沒有這些內容。 我們會接受並嘗試修復使用推薦技術棧遇到的反饋問題。 編碼愉快！
|
||||
可以使用 HTML、JavaScript、CSS、Bootstrap、SASS、React、Redux、jQuery 來完成這個挑戰。 但鑑於這個章節的學習內容與前端框架相關，推薦使用一款前端框架（比如 React）來完成這個挑戰；不推薦使用前面沒有提到的技術，否則風險自負。 不推薦使用前面沒有提到的技術，否則風險自擔。 我們有計劃新增其他前端框架課程，例如 Angular 和 Vue，不過目前還沒有這些內容。 我們會接受並嘗試修復你在使用推薦技術棧創建項目時報告的問題。 編碼愉快！
|
||||
|
||||
**需求 1：** 應該能看到一個具有 `id="quote-box"` 屬性的包裹元素。
|
||||
|
||||
|
||||
@ -39,7 +39,7 @@ assert(
|
||||
assert(code.match(/\:even/g));
|
||||
```
|
||||
|
||||
應該僅用 jQuery 給元素添加 class。
|
||||
應該僅用 jQuery 給標籤添加 class。
|
||||
|
||||
```js
|
||||
assert(
|
||||
|
||||
@ -33,7 +33,7 @@ $("button").addClass("animated bounce");
|
||||
assert($('button').hasClass('animated') && $('button').hasClass('bounce'));
|
||||
```
|
||||
|
||||
應該僅用 jQuery 給元素添加 class。
|
||||
應該僅用 jQuery 給標籤添加 class。
|
||||
|
||||
```js
|
||||
assert(!code.match(/class.*animated/g));
|
||||
|
||||
@ -18,7 +18,7 @@ dashedName: connect-redux-to-the-messages-app
|
||||
|
||||
# --hints--
|
||||
|
||||
`AppWrapper` 應渲染該頁面上。
|
||||
`AppWrapper` 應該渲染該到頁面上。
|
||||
|
||||
```js
|
||||
assert(
|
||||
@ -29,7 +29,7 @@ assert(
|
||||
);
|
||||
```
|
||||
|
||||
`Presentational` 組件應該渲染到頁面上。
|
||||
`Presentational` 應該渲染到頁面上.
|
||||
|
||||
```js
|
||||
assert(
|
||||
@ -70,7 +70,7 @@ assert(
|
||||
);
|
||||
```
|
||||
|
||||
`Presentational` 組件應接收創建 action 的函數 `submitMessage` 屬性。
|
||||
`Presentational` 組件應接收創建 action 的函數的 `submitMessage` 屬性。
|
||||
|
||||
```js
|
||||
assert(
|
||||
|
||||
@ -31,7 +31,6 @@ JSX 元素使用 `style` 屬性，但是鑑於 JSX 的編譯方式，不能將
|
||||
在代碼編輯器中給 `div` 添加一個 `style` 屬性，將文本顏色設置爲紅色，字體大小設置爲 `72px`。
|
||||
|
||||
請注意，可以選擇將字體大小設置爲數字，省略單位 `px`，或者將其寫爲 `72px`。
|
||||
|
||||
# --hints--
|
||||
|
||||
組件應該渲染一個 `div` 元素。
|
||||
|
||||
@ -8,7 +8,7 @@ dashedName: render-conditionally-from-props
|
||||
|
||||
# --description--
|
||||
|
||||
到目前爲止，你已經看到如何使用 `if/else`、`&&` 以及三元運算符（`condition ? expressionIfTrue : expressionIfFalse`）在不同條件下運行不同的代碼。 然而，還有一個重要的話題需要討論，將這些概念中的任何一個或所有概念與另一個強大的 React 功能 props 結合起來。 使用 props 有條件地渲染代碼在 React 開發人員中很常見——也就是說：他們使用給定 prop 的值來自動決定渲染什麼。
|
||||
到目前爲止，已經看到了如何使用 `if/else`、`&&`和三元運算符（`condition ? expressionIfTrue : expressionIfFalse`）對渲染什麼和何時渲染做出有條件的判定。 然而，還有一個重要的話題需要討論，將這些概念中的任何一個或所有概念與另一個強大的 React 功能 props 結合起來。 使用 props 有條件地渲染代碼在 React 開發人員中很常見——也就是說：他們使用給定 prop 的值來自動決定渲染什麼。
|
||||
|
||||
在這個挑戰中，將設置一個子組件來根據 props 做出渲染決定。 可以使用三元運算符，但是可以看到過去幾個挑戰中涵蓋的其他幾個概念在這種情況下可能同樣有用。
|
||||
|
||||
|
||||
@ -16,7 +16,7 @@ ReactDOM 提供了一個簡單的方法來將 React 元素呈現給 DOM，如下
|
||||
|
||||
# --instructions--
|
||||
|
||||
代碼編輯器有一個簡單的 JSX 組件。 使用 `ReactDOM.render()` 方法將該組件渲染到頁面。 可以將定義好的 JSX 元素直接作爲第一個參數傳入，然後使用 `document.getElementById()` 來選擇要渲染到的 DOM 節點， 在這個挑戰中，請渲染到 `id='challenge-node'` 的 `div` 中。 確保沒有修改 `JSX` 常量。
|
||||
代碼編輯器有一個簡單的 JSX 組件。 使用 `ReactDOM.render()` 方法將該組件渲染到頁面。 可以將定義好的 JSX 元素直接作爲第一個參數傳入，然後使用 `document.getElementById()` 來選擇要渲染到的 DOM 節點， 在這個挑戰中，請渲染到 `id='challenge-node'`的 `div` 中。 確保沒有修改 `JSX` 常量。
|
||||
|
||||
# --hints--
|
||||
|
||||
|
||||
@ -18,7 +18,7 @@ MyComponent 的 state 中包含一個 `boolean`（布爾值），用於跟蹤是
|
||||
|
||||
# --hints--
|
||||
|
||||
`MyComponent` 應該存在並被渲染。
|
||||
`MyComponent` 應該存在並渲染。
|
||||
|
||||
```js
|
||||
assert(
|
||||
@ -29,7 +29,7 @@ assert(
|
||||
);
|
||||
```
|
||||
|
||||
當 `display` 被設置爲 `true` 時，`div`、`button` 和 `h1` 標籤應該被渲染。
|
||||
當 `display` 被設置爲 `true` 時，`div`、`button` 和 `h1` 標籤應該渲染。
|
||||
|
||||
```js
|
||||
async () => {
|
||||
@ -50,7 +50,7 @@ async () => {
|
||||
};
|
||||
```
|
||||
|
||||
當 `display` 被設置爲 `false` 時，只有 `div` 和 `button` 應該被渲染。
|
||||
當 `display` 被設置爲 `false` 時，只有 `div` 和 `button` 應該渲染。
|
||||
|
||||
```js
|
||||
async () => {
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
---
|
||||
id: 5a24c314108439a4d4036185
|
||||
title: Use && for a More Concise Conditional
|
||||
title: 使用 && 獲得更簡潔的條件
|
||||
challengeType: 6
|
||||
forumTopicId: 301413
|
||||
dashedName: use--for-a-more-concise-conditional
|
||||
@ -8,7 +8,7 @@ dashedName: use--for-a-more-concise-conditional
|
||||
|
||||
# --description--
|
||||
|
||||
`if/else` 語句在上一次挑戰中是有效的，但是有一種更簡潔的方法可以達到同樣的結果。 假設正在跟蹤組件中的幾個條件，並且希望根據這些條件中的每一個來渲染不同的元素。 如果你寫了很多 `else if` 語句來返回稍微不同的 UI，你可能會寫很多重複代碼，這就留下了出錯的空間。 相反，你可以使用 `&&` 邏輯運算符以更簡潔的方式執行條件邏輯。 這是完全可行的，因爲你希望檢查條件是否爲 `true`。如果是，則返回一些標記。 這裏有一個例子：
|
||||
`if/else` 語句在上一次挑戰中是有效的，但是有一種更簡潔的方法可以達到同樣的結果。 假設正在跟蹤組件中的幾個條件，並且希望根據這些條件中的每一個來渲染不同的元素。 如果你寫了很多 `else if` 語句來返回稍微不同的 UI，你可能會寫很多重複代碼，這就留下了出錯的空間。 相反，你可以使用 `&&` 邏輯運算符以更簡潔的方式執行條件邏輯。 這是完全可行的，因爲你希望檢查條件是否爲 `true`。如果是，則返回一些標記。 下面是一個示例：
|
||||
|
||||
```jsx
|
||||
{condition && <p>markup</p>}
|
||||
|
||||
@ -8,7 +8,7 @@ dashedName: use-advanced-javascript-in-react-render-method
|
||||
|
||||
# --description--
|
||||
|
||||
在之前的挑戰中，學習瞭如何使用大括號 `{ }` 將 JavaScript 代碼插入到 JSX 代碼中，用於訪問 props、傳遞 props、訪問 state、在代碼中插入註釋以及最近學習的定製組件樣式等任務。 這些都是將 JavaScript 放在 JSX 中的常見用例，但是在 React 組件中使用 JavaScript 代碼還有其他方式。
|
||||
在之前的挑戰中，你學習瞭如何使用大括號 `{ }` 將 JavaScript 代碼插入到 JSX 代碼中，用於訪問 props、傳遞 props、訪問 state、在代碼中插入註釋以及最近學習的定製組件樣式等任務。 這些都是將 JavaScript 放在 JSX 中的常見用例，但是在 React 組件中使用 JavaScript 代碼還有其他方式。
|
||||
|
||||
在 `render` 方法中編寫 JavaScript，可以把 JavaScript 直接放在 `return` 語句之前，而***不必***將其插入大括號中。 這是因爲它還不在 JSX 代碼中。 如果之後想在 `return` 語句中的 JSX 代碼*裏面*使用變量時，可以將變量名放在大括號中。
|
||||
|
||||
|
||||
@ -8,7 +8,7 @@ dashedName: copy-an-object-with-object-assign
|
||||
|
||||
# --description--
|
||||
|
||||
最後幾個挑戰適用於數組，但是當狀態是 `object` 時，有一些方法可以實現狀態不變性。 處理對象的一個常用的方法是 `Object.assign()`。 `Object.assign()` 獲取目標對象和源對象，並將源對象中的屬性映射到目標對象。 任何匹配的屬性都會被源對象中的屬性覆蓋。 通常用於通過傳遞一個空對象作爲第一個參數，然後是要用複製的對象來製作對象的淺表副本。 這是一個例子：
|
||||
最後幾個挑戰適用於數組，但是當狀態是 `object` 時，有一些方法可以實現狀態不變性。 處理對象的一個常用的方法是 `Object.assign()`。 `Object.assign()` 獲取目標對象和源對象，並將源對象中的屬性映射到目標對象。 任何匹配的屬性都會被源對象中的屬性覆蓋。 通常用於通過傳遞一個空對象作爲第一個參數，然後是要用複製的對象來製作對象的淺表副本。 下面是一個示例：
|
||||
|
||||
```js
|
||||
const newObject = Object.assign({}, obj1, obj2);
|
||||
|
||||
@ -8,7 +8,7 @@ dashedName: define-an-action-creator
|
||||
|
||||
# --description--
|
||||
|
||||
創建 action 後要將 action 發送到 Redux store，以便它可以更新其狀態。 在 Redux 中，可以定義動作創建器來完成此任務， action creator 只是一個返回動作的 JavaScript 函數， 換句話說，action creator 創建表示動作事件的對象。
|
||||
創建 action 後要將 action 發送到 Redux store，以便它可以更新其狀態。 在 Redux 中，可以定義動作創建器來完成此任務， action creator 只是一個返回動作的 JavaScript 函數。 換句話說，action creator 創建表示動作事件的對象。
|
||||
|
||||
# --instructions--
|
||||
|
||||
|
||||
@ -16,7 +16,7 @@ dashedName: use-each-to-map-over-items-in-a-list
|
||||
}
|
||||
```
|
||||
|
||||
map 的語法略有不同。 這是一個例子：
|
||||
map 的語法略有不同。 這是一個示例：
|
||||
|
||||
```scss
|
||||
$colors: (color1: blue, color2: red, color3: green);
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
---
|
||||
id: 5a8b073d06fa14fcfde687aa
|
||||
title: Exercise 追蹤器
|
||||
title: 運動追蹤器
|
||||
challengeType: 4
|
||||
forumTopicId: 301505
|
||||
dashedName: exercise-tracker
|
||||
@ -8,13 +8,55 @@ dashedName: exercise-tracker
|
||||
|
||||
# --description--
|
||||
|
||||
構建一個 JavaScript 的全棧應用，在功能上與這個應用相似： <https://exercise-tracker.freecodecamp.rocks/>。 可以採用下面的一種方式完成這個挑戰：
|
||||
構建一個 JavaScript 的全棧應用，在功能上與這個應用相似： <https://exercise-tracker.freecodecamp.rocks/>。 在這個項目中，你將使用以下方法之一編寫你的代碼：
|
||||
|
||||
- 克隆 [GitHub 倉庫](https://github.com/freeCodeCamp/boilerplate-project-exercisetracker/) 並在本地完成你的項目。
|
||||
- 使用[我們的 Replit 初始化項目](https://replit.com/github/freeCodeCamp/boilerplate-project-exercisetracker)來完成你的項目。
|
||||
- 使用你選擇的網站生成器來完成項目， 並確保包含了我們 GitHub 倉庫的所有文件。
|
||||
- 使用你選擇的網站生成器來完成項目。 需要包含我們 GitHub 倉庫的所有文件。
|
||||
|
||||
當完成本項目，請確認有一個正常運行的 demo 可以公開訪問。 然後將 URL 提交到 `Solution Link` 中。 此外，還可以將項目的源碼提交到 `GitHub Link` 中。
|
||||
完成本項目後，請將一個正常運行的 demo（項目演示）託管在可以公開訪問的平臺。 然後在 `Solution Link` 字段中提交它的 URL。 此外，還可以將項目的源碼提交到 `GitHub Link` 中。
|
||||
|
||||
# --instructions--
|
||||
|
||||
你的答案應該有以下結構。
|
||||
|
||||
運動：
|
||||
|
||||
```js
|
||||
{
|
||||
username: "fcc_test"
|
||||
description: "test",
|
||||
duration: 60,
|
||||
date: "Mon Jan 01 1990",
|
||||
_id: "5fb5853f734231456ccb3b05"
|
||||
}
|
||||
```
|
||||
|
||||
用戶：
|
||||
|
||||
```js
|
||||
{
|
||||
username: "fcc_test",
|
||||
_id: "5fb5853f734231456ccb3b05"
|
||||
}
|
||||
```
|
||||
|
||||
日誌：
|
||||
|
||||
```js
|
||||
{
|
||||
username: "fcc_test",
|
||||
count: 1,
|
||||
_id: "5fb5853f734231456ccb3b05",
|
||||
log: [{
|
||||
description: "test",
|
||||
duration: 60,
|
||||
date: "Mon Jan 01 1990",
|
||||
}]
|
||||
}
|
||||
```
|
||||
|
||||
**提示：** 對於 `date` 屬性，`Date` API 的 `toDateString` 方法可以用於實現預期的輸出。
|
||||
|
||||
# --hints--
|
||||
|
||||
@ -29,7 +71,24 @@ dashedName: exercise-tracker
|
||||
};
|
||||
```
|
||||
|
||||
可以將表單裏的 `username` 通過 `POST` 請求發送到 `/api/users`，以創建一個新的用戶。 返回的響應內容是一個帶有 `username` 和 `_id` 的對象
|
||||
可以將表單裏的 `username` 通過 `POST` 請求發送到 `/api/users`，以創建一個新的用戶。
|
||||
|
||||
```js
|
||||
async (getUserInput) => {
|
||||
const url = getUserInput('url');
|
||||
const res = await fetch(url + '/api/users', {
|
||||
method: 'POST',
|
||||
headers: { 'Content-Type': 'application/x-www-form-urlencoded' },
|
||||
body: `username=fcc_test_${Date.now()}`.substr(0, 29)
|
||||
});
|
||||
assert.isTrue(res.ok);
|
||||
if(!res.ok) {
|
||||
throw new Error(`${res.status} ${res.statusText}`)
|
||||
};
|
||||
};
|
||||
```
|
||||
|
||||
`POST /api/users` 帶有表單數據 `username` 對請求，返回的響應將是一個具有 `username` 和 `_id` 屬性的對象.
|
||||
|
||||
```js
|
||||
async (getUserInput) => {
|
||||
@ -49,24 +108,89 @@ async (getUserInput) => {
|
||||
};
|
||||
```
|
||||
|
||||
可以發送 `GET` 請求到 `/api/users`，以獲取一個所有用戶的數組， 數組裏的每個元素都是一個包含 `username` 和 `_id` 的用戶對象。
|
||||
你可以向 `/api/users` 發出 `GET` 請求以獲取所有用戶的列表。
|
||||
|
||||
```js
|
||||
async(getUserInput) => {
|
||||
const url = getUserInput('url');
|
||||
const res = await fetch(url + '/api/users');
|
||||
assert.isTrue(res.ok);
|
||||
if(!res.ok) {
|
||||
throw new Error(`${res.status} ${res.statusText}`)
|
||||
};
|
||||
};
|
||||
```
|
||||
|
||||
對 `/api/users` 的 `GET` 請求返回一個數組。
|
||||
|
||||
```js
|
||||
async(getUserInput) => {
|
||||
const url = getUserInput('url');
|
||||
const res = await fetch(url + '/api/users');
|
||||
if(res.ok){
|
||||
const users = await res.json();
|
||||
assert.isArray(users);
|
||||
} else {
|
||||
throw new Error(`${res.status} ${res.statusText}`);
|
||||
};
|
||||
};
|
||||
```
|
||||
|
||||
從 `GET /api/users` 返回的數組中的每個元素都是一個對象字面量，包含用戶的 `username` 和 `_id`。
|
||||
|
||||
```js
|
||||
async(getUserInput) => {
|
||||
const url = getUserInput('url');
|
||||
const res = await fetch(url + '/api/users');
|
||||
if(res.ok){
|
||||
const users = await res.json();
|
||||
const user = users[0];
|
||||
assert.exists(user);
|
||||
assert.exists(user.username);
|
||||
assert.exists(user._id);
|
||||
assert.isString(user.username);
|
||||
assert.isString(user._id);
|
||||
} else {
|
||||
throw new Error(`${res.status} ${res.statusText}`);
|
||||
};
|
||||
};
|
||||
```
|
||||
|
||||
你能用表單裏的 `description`、`duration` 和 `date`（可選）發送 `POST` 請求到 `/api/users/:_id/exercises`。 如果沒有傳入 date，默認採用當前日期。
|
||||
|
||||
```js
|
||||
async (getUserInput) => {
|
||||
const url = getUserInput('url');
|
||||
const res = await fetch(url + '/api/users');
|
||||
const res = await fetch(url + '/api/users', {
|
||||
method: 'POST',
|
||||
headers: { 'Content-Type': 'application/x-www-form-urlencoded' },
|
||||
body: `username=fcc_test_${Date.now()}`.substr(0, 29)
|
||||
});
|
||||
if (res.ok) {
|
||||
const data = await res.json();
|
||||
assert.isArray(data);
|
||||
assert.isString(data[0].username);
|
||||
assert.isString(data[0]._id);
|
||||
const { _id, username } = await res.json();
|
||||
const expected = {
|
||||
username,
|
||||
description: 'test',
|
||||
duration: 60,
|
||||
_id,
|
||||
date: 'Mon Jan 01 1990'
|
||||
};
|
||||
const addRes = await fetch(url + `/api/users/${_id}/exercises`, {
|
||||
method: 'POST',
|
||||
headers: { 'Content-Type': 'application/x-www-form-urlencoded' },
|
||||
body: `description=${expected.description}&duration=${expected.duration}&date=1990-01-01`
|
||||
});
|
||||
assert.isTrue(addRes.ok);
|
||||
if(!addRes.ok) {
|
||||
throw new Error(`${addRes.status} ${addRes.statusText}`)
|
||||
};
|
||||
} else {
|
||||
throw new Error(`${res.status} ${res.statusText}`);
|
||||
}
|
||||
};
|
||||
```
|
||||
|
||||
你能用表單裏的 `description`、`duration` 和 `date`（可選）發送 `POST` 請求到 `/api/users/:_id/exercises`。 如果沒有傳入 date，默認採用當前日期。 響應內容是包含 exercise 表單內容的 user 對象。
|
||||
從 `POST /api/users/:_id/exercises` 返回的響應將是添加了運動字段的用戶對象。
|
||||
|
||||
```js
|
||||
async (getUserInput) => {
|
||||
@ -93,6 +217,9 @@ async (getUserInput) => {
|
||||
if (addRes.ok) {
|
||||
const actual = await addRes.json();
|
||||
assert.deepEqual(actual, expected);
|
||||
assert.isString(actual.description);
|
||||
assert.isNumber(actual.duration);
|
||||
assert.isString(actual.date);
|
||||
} else {
|
||||
throw new Error(`${addRes.status} ${addRes.statusText}`);
|
||||
}
|
||||
@ -102,7 +229,7 @@ async (getUserInput) => {
|
||||
};
|
||||
```
|
||||
|
||||
可以發送 `GET` 請求到 `/api/users/:_id/logs`，以獲取任何用戶的完整 exercise 日誌。 響應內容是一個 user 對象，它帶有一個 `log` 屬性，該屬性的值是所有被添加的 exercises 表單記錄組成的數組， 每一個 log 數組裏的元素應該是一個含有 `description`、`duration` 和 `date` 等屬性的對象。
|
||||
可以發送 `GET` 請求到 `/api/users/:_id/logs`，以獲取任何用戶的完整 exercise 日誌。
|
||||
|
||||
```js
|
||||
async (getUserInput) => {
|
||||
@ -128,13 +255,10 @@ async (getUserInput) => {
|
||||
});
|
||||
if (addRes.ok) {
|
||||
const logRes = await fetch(url + `/api/users/${_id}/logs`);
|
||||
if (logRes.ok) {
|
||||
const { log } = await logRes.json();
|
||||
assert.isArray(log);
|
||||
assert.equal(1, log.length);
|
||||
} else {
|
||||
throw new Error(`${logRes.status} ${logRes.statusText}`);
|
||||
}
|
||||
assert.isTrue(logRes.ok);
|
||||
if(!logRes.ok) {
|
||||
throw new Error(`${logRes.status} ${logRes.statusText}`)
|
||||
};
|
||||
} else {
|
||||
throw new Error(`${addRes.status} ${addRes.statusText}`);
|
||||
}
|
||||
@ -144,7 +268,7 @@ async (getUserInput) => {
|
||||
};
|
||||
```
|
||||
|
||||
用戶日誌請求（`/api/users/:_id/logs`）返回一個帶有 `count` 屬性的對象，該屬性反映 exercises 表單的成功提交次數（譯者注：即 log 屬性元素的個數）。
|
||||
對用戶日誌的請求 `GET /api/users/:_id/logs` 返回一個用戶對象，該對象具有一個 `count` 屬性，表示屬於該用戶的運動次數。
|
||||
|
||||
```js
|
||||
async (getUserInput) => {
|
||||
@ -185,7 +309,239 @@ async (getUserInput) => {
|
||||
};
|
||||
```
|
||||
|
||||
可以把 `from`、`to` 和 `limit` 參數添加到一個 `/api/users/:_id/logs` 請求，以查詢該用戶的部分 exercise 表單提交記錄， `from` 和 `to` 是 `yyyy-mm-dd` 形式的日期， `limit` 是希望返回的 log 數量。
|
||||
對 `/api/users/:id/logs` 的 `GET` 請求將返回用戶對象，其中包含添加的所有練習的 `log` 數組。
|
||||
|
||||
```js
|
||||
async(getUserInput) => {
|
||||
const url = getUserInput('url');
|
||||
const res = await fetch(url + '/api/users', {
|
||||
method: 'POST',
|
||||
headers: {
|
||||
'Content-Type': 'application/x-www-form-urlencoded'
|
||||
},
|
||||
body: `username=fcc_test_${Date.now()}`.substr(0, 29)
|
||||
})
|
||||
if(res.ok){
|
||||
const {_id, username} = await res.json();
|
||||
const expected = {
|
||||
username,
|
||||
description: 'test',
|
||||
duration: 60,
|
||||
_id,
|
||||
date: new Date().toDateString()
|
||||
};
|
||||
const addRes = await fetch(url + `/api/users/${_id}/exercises`, {
|
||||
method: 'POST',
|
||||
headers: { 'Content-Type': 'application/x-www-form-urlencoded' },
|
||||
body: `description=${expected.description}&duration=${expected.duration}`
|
||||
});
|
||||
if(addRes.ok){
|
||||
const logRes = await fetch(url + `/api/users/${_id}/logs`);
|
||||
if(logRes.ok) {
|
||||
const {log} = await logRes.json();
|
||||
assert.isArray(log);
|
||||
assert.equal(1, log.length);
|
||||
} else {
|
||||
throw new Error(`${logRes.status} ${logRes.statusText}`);
|
||||
}
|
||||
} else {
|
||||
throw new Error(`${addRes.status} ${addRes.statusText}`);
|
||||
};
|
||||
} else {
|
||||
throw new Error(`${res.status} ${res.statusText}`)
|
||||
};
|
||||
};
|
||||
```
|
||||
|
||||
從 `GET /api/users/:id/logs` 返回的 `log` 數組中的每一項都是一個應該具有 `description` 的對象， `duration` 和 `date` 屬性。
|
||||
|
||||
```js
|
||||
async(getUserInput) => {
|
||||
const url = getUserInput('url');
|
||||
const res = await fetch(url + `/api/users`, {
|
||||
method: 'POST',
|
||||
headers: {
|
||||
'Content-Type': 'application/x-www-form-urlencoded'
|
||||
},
|
||||
body: `username=fcc_test_${Date.now()}`.substr(0, 29)
|
||||
});
|
||||
if(res.ok) {
|
||||
const {_id, username} = await res.json();
|
||||
const expected = {
|
||||
username,
|
||||
description: 'test',
|
||||
duration: 60,
|
||||
_id,
|
||||
date: new Date().toDateString()
|
||||
};
|
||||
const addRes = await fetch(url + `/api/users/${_id}/exercises`, {
|
||||
method: 'POST',
|
||||
headers: { 'Content-Type': 'application/x-www-form-urlencoded' },
|
||||
body: `description=${expected.description}&duration=${expected.duration}`
|
||||
});
|
||||
if(addRes.ok) {
|
||||
const logRes = await fetch(url + `/api/users/${_id}/logs`);
|
||||
if(logRes.ok) {
|
||||
const {log} = await logRes.json();
|
||||
const exercise = log[0];
|
||||
assert.exists(exercise);
|
||||
assert.exists(exercise.description);
|
||||
assert.exists(exercise.duration);
|
||||
assert.exists(exercise.date);
|
||||
} else {
|
||||
throw new Error(`${logRes.status} ${logRes.statusText}`);
|
||||
};
|
||||
} else {
|
||||
throw new Error(`${addRes.status} ${addRes.statusText}`);
|
||||
};
|
||||
} else {
|
||||
throw new Error(`${res.status} ${res.statusText}`)
|
||||
};
|
||||
};
|
||||
```
|
||||
|
||||
從 `GET /api/users/:id/logs` 返回的 `log` 數組中任何對象的 `description` 屬性都應該是一個字符串。
|
||||
|
||||
```js
|
||||
async(getUserInput) => {
|
||||
const url = getUserInput('url');
|
||||
const res = await fetch(url + '/api/users/', {
|
||||
method: 'POST',
|
||||
headers: {
|
||||
'Content-Type': 'application/x-www-form-urlencoded',
|
||||
},
|
||||
body: `username=fcc_test_${Date.now()}`.substr(0,29)
|
||||
});
|
||||
if(res.ok) {
|
||||
const {_id, username} = await res.json();
|
||||
const expected = {
|
||||
username,
|
||||
description: 'test',
|
||||
duration: 60,
|
||||
_id,
|
||||
date: new Date().toDateString()
|
||||
};
|
||||
const addRes = await fetch(url + `/api/users/${_id}/exercises`, {
|
||||
method: 'POST',
|
||||
headers: {
|
||||
'Content-Type': 'application/x-www-form-urlencoded',
|
||||
},
|
||||
body: `description=${expected.description}&duration=${expected.duration}`
|
||||
});
|
||||
if(addRes.ok) {
|
||||
const logRes = await fetch(url + `/api/users/${_id}/logs`);
|
||||
if(logRes.ok){
|
||||
const {log} = await logRes.json();
|
||||
const exercise = log[0];
|
||||
assert.isString(exercise.description);
|
||||
assert.equal(exercise.description, expected.description);
|
||||
} else {
|
||||
throw new Error(`${logRes.status} ${logRes.statusText}`);
|
||||
}
|
||||
} else {
|
||||
throw new Error(`${addRes.status} ${addRes.statusText}`);
|
||||
};
|
||||
} else {
|
||||
throw new Error(`${res.status} ${res.statusText}`);
|
||||
};
|
||||
};
|
||||
```
|
||||
|
||||
從 `GET /api/users/:id/logs` 返回的 `log` 數組中任何對象的 `duration` 屬性都應該是一個數字。
|
||||
|
||||
```js
|
||||
async(getUserInput) => {
|
||||
const url = getUserInput('url');
|
||||
const res = await fetch(url + '/api/users/', {
|
||||
method: 'POST',
|
||||
headers: {
|
||||
'Content-Type': 'application/x-www-form-urlencoded',
|
||||
},
|
||||
body: `username=fcc_test_${Date.now()}`.substr(0,29)
|
||||
});
|
||||
if(res.ok) {
|
||||
const {_id, username} = await res.json();
|
||||
const expected = {
|
||||
username,
|
||||
description: 'test',
|
||||
duration: 60,
|
||||
_id,
|
||||
date: new Date().toDateString()
|
||||
};
|
||||
const addRes = await fetch(url + `/api/users/${_id}/exercises`, {
|
||||
method: 'POST',
|
||||
headers: {
|
||||
'Content-Type': 'application/x-www-form-urlencoded',
|
||||
},
|
||||
body: `description=${expected.description}&duration=${expected.duration}`
|
||||
});
|
||||
if(addRes.ok) {
|
||||
const logRes = await fetch(url + `/api/users/${_id}/logs`);
|
||||
if(logRes.ok){
|
||||
const {log} = await logRes.json();
|
||||
const exercise = log[0];
|
||||
assert.isNumber(exercise.duration);
|
||||
assert.equal(exercise.duration, expected.duration);
|
||||
} else {
|
||||
throw new Error(`${logRes.status} ${logRes.statusText}`);
|
||||
}
|
||||
} else {
|
||||
throw new Error(`${addRes.status} ${addRes.statusText}`);
|
||||
};
|
||||
} else {
|
||||
throw new Error(`${res.status} ${res.statusText}`);
|
||||
};
|
||||
};
|
||||
```
|
||||
|
||||
從 `GET /api/users/:id/logs` 返回的 `log` 數組中任何對象的 `date` 屬性應該是一個字符串。 使用 `Date` API 的 `dateString` 格式。
|
||||
|
||||
```js
|
||||
async(getUserInput) => {
|
||||
const url = getUserInput('url');
|
||||
const res = await fetch(url + '/api/users/', {
|
||||
method: 'POST',
|
||||
headers: {
|
||||
'Content-Type': 'application/x-www-form-urlencoded',
|
||||
},
|
||||
body: `username=fcc_test_${Date.now()}`.substr(0,29)
|
||||
});
|
||||
if(res.ok) {
|
||||
const {_id, username} = await res.json();
|
||||
const expected = {
|
||||
username,
|
||||
description: 'test',
|
||||
duration: 60,
|
||||
_id,
|
||||
date: new Date().toDateString()
|
||||
};
|
||||
const addRes = await fetch(url + `/api/users/${_id}/exercises`, {
|
||||
method: 'POST',
|
||||
headers: {
|
||||
'Content-Type': 'application/x-www-form-urlencoded',
|
||||
},
|
||||
body: `description=${expected.description}&duration=${expected.duration}`
|
||||
});
|
||||
if(addRes.ok) {
|
||||
const logRes = await fetch(url + `/api/users/${_id}/logs`);
|
||||
if(logRes.ok){
|
||||
const {log} = await logRes.json();
|
||||
const exercise = log[0];
|
||||
assert.isString(exercise.date);
|
||||
assert.equal(exercise.date, expected.date);
|
||||
} else {
|
||||
throw new Error(`${logRes.status} ${logRes.statusText}`);
|
||||
}
|
||||
} else {
|
||||
throw new Error(`${addRes.status} ${addRes.statusText}`);
|
||||
};
|
||||
} else {
|
||||
throw new Error(`${res.status} ${res.statusText}`);
|
||||
};
|
||||
};
|
||||
```
|
||||
|
||||
你可以將 `from`、`to` 和 `limit` 參數添加到 `GET /api/users/:_id/logs` 請求檢索任何用戶的部分日誌。 `from` 和 `to` 是 `yyyy-mm-dd` 形式的日期， `limit` 是希望返回的 log 數量。
|
||||
|
||||
```js
|
||||
async (getUserInput) => {
|
||||
|
||||
@ -8,13 +8,13 @@ dashedName: file-metadata-microservice
|
||||
|
||||
# --description--
|
||||
|
||||
構建一個 JavaScript 的全棧應用，在功能上與這個應用相似：<https://file-metadata-microservice.freecodecamp.rocks/>。 可以採用下面的一種方式完成這個挑戰：
|
||||
構建一個 JavaScript 的全棧應用，在功能上與這個應用相似：<https://file-metadata-microservice.freecodecamp.rocks/>。 在這個項目中，你將使用以下方法之一編寫你的代碼：
|
||||
|
||||
- 克隆 [this GitHub repo](https://github.com/freeCodeCamp/boilerplate-project-filemetadata/) 並在本地完成項目。
|
||||
- 使用[我們的 Replit 初始化項目](https://replit.com/github/freeCodeCamp/boilerplate-project-filemetadata)來完成你的項目。
|
||||
- 使用你選擇的網站生成器來完成項目， 並確保包含了我們 GitHub 倉庫的所有文件。
|
||||
- 使用你選擇的網站生成器來完成項目。 需要包含我們 GitHub 倉庫的所有文件。
|
||||
|
||||
當完成本項目，請確認有一個正常運行的 demo 可以公開訪問。 然後將 URL 提交到 `Solution Link` 中。 此外，還可以將項目的源碼提交到 `GitHub Link` 中。
|
||||
完成本項目後，請將一個正常運行的 demo（項目演示）託管在可以公開訪問的平臺。 然後在 `Solution Link` 字段中提交它的 URL。 此外，還可以將項目的源碼提交到 `GitHub Link` 中。
|
||||
|
||||
# --instructions--
|
||||
|
||||
|
||||
@ -8,13 +8,13 @@ dashedName: request-header-parser-microservice
|
||||
|
||||
# --description--
|
||||
|
||||
構建一個 JavaScript 的全棧應用，在功能上與這個應用相似：<https://request-header-parser-microservice.freecodecamp.rocks/>。 可以採用下面的一種方式完成這個挑戰：
|
||||
構建一個 JavaScript 的全棧應用，在功能上與這個應用相似：<https://request-header-parser-microservice.freecodecamp.rocks/>。 在這個項目中，你將使用以下方法之一編寫你的代碼：
|
||||
|
||||
- 克隆 [this GitHub repo](https://github.com/freeCodeCamp/boilerplate-project-headerparser/) 並在本地完成項目。
|
||||
- 使用[我們的 Replit 初始化項目](https://replit.com/github/freeCodeCamp/boilerplate-project-headerparser)來完成你的項目。
|
||||
- 使用你選擇的網站生成器來完成項目， 並確保包含了我們 GitHub 倉庫的所有文件。
|
||||
- 使用你選擇的網站生成器來完成項目。 需要包含我們 GitHub 倉庫的所有文件。
|
||||
|
||||
當完成本項目，請確認有一個正常運行的 demo 可以公開訪問。 然後將 URL 提交到 `Solution Link` 中。 此外，還可以將項目的源碼提交到 `GitHub Link` 中。
|
||||
完成本項目後，請將一個正常運行的 demo（項目演示）託管在可以公開訪問的平臺。 然後在 `Solution Link` 字段中提交它的 URL。 此外，還可以將項目的源碼提交到 `GitHub Link` 中。
|
||||
|
||||
# --hints--
|
||||
|
||||
|
||||
@ -8,13 +8,13 @@ dashedName: timestamp-microservice
|
||||
|
||||
# --description--
|
||||
|
||||
構建一個 JavaScript 的全棧應用，在功能上與這個應用相似：<https://timestamp-microservice.freecodecamp.rocks/>。 可以採用下面的任意一種方式完成這個挑戰：
|
||||
構建一個 JavaScript 的全棧應用，在功能上與這個應用相似：<https://timestamp-microservice.freecodecamp.rocks/>。 在這個項目中，你將使用以下方法之一編寫你的代碼：
|
||||
|
||||
- 克隆 [this GitHub repo](https://github.com/freeCodeCamp/boilerplate-project-timestamp/) 並在本地完成項目。
|
||||
- 克隆 [這個 GitHub 倉庫](https://github.com/freeCodeCamp/boilerplate-project-timestamp/) 並在本地完成項目。
|
||||
- 使用[我們的 Replit 初始化項目](https://replit.com/github/freeCodeCamp/boilerplate-project-timestamp)來完成你的項目。
|
||||
- 使用你選擇的網站生成器來完成項目， 並確保包含了我們 GitHub 倉庫的所有文件。
|
||||
- 使用你選擇的網站生成器來完成項目。 需要包含我們 GitHub 倉庫的所有文件。
|
||||
|
||||
當完成本項目，請確認有一個正常運行的 demo 可以公開訪問。 然後將 URL 提交到 `Solution Link` 中。 此外，還可以將項目的源碼提交到 `GitHub Link` 中。
|
||||
完成本項目後，請將一個正常運行的 demo（項目演示）託管在可以公開訪問的平臺。 然後在 `Solution Link` 字段中提交它的 URL。 此外，還可以將項目的源碼提交到 `GitHub Link` 中。
|
||||
|
||||
# --hints--
|
||||
|
||||
|
||||
@ -8,13 +8,13 @@ dashedName: url-shortener-microservice
|
||||
|
||||
# --description--
|
||||
|
||||
構建一個 JavaScript 的全棧應用，在功能上與這個應用相似：<https://url-shortener-microservice.freecodecamp.rocks/>。 可以採用下面的任意一種方式完成這個挑戰：
|
||||
構建一個 JavaScript 的全棧應用，在功能上與這個應用相似：<https://url-shortener-microservice.freecodecamp.rocks/>。 在這個項目中，你將使用以下方法之一編寫你的代碼：
|
||||
|
||||
- 克隆 [this GitHub repo](https://github.com/freeCodeCamp/boilerplate-project-filemetadata/) 並在本地完成項目。
|
||||
- 使用[我們的 Replit 初始化項目](https://replit.com/github/freeCodeCamp/boilerplate-project-urlshortener)來完成你的項目。
|
||||
- 使用你選擇的網站生成器來完成項目， 並確保包含了我們 GitHub 倉庫的所有文件。
|
||||
- 使用你選擇的網站生成器來完成項目。 需要包含我們 GitHub 倉庫的所有文件。
|
||||
|
||||
當完成本項目，請確認有一個正常運行的 demo 可以公開訪問。 然後將 URL 提交到 `Solution Link` 中。 此外，還可以將項目的源碼提交到 `GitHub Link` 中。
|
||||
完成本項目後，請將一個正常運行的 demo（項目演示）託管在可以公開訪問的平臺。 然後在 `Solution Link` 字段中提交它的 URL。 此外，還可以將項目的源碼提交到 `GitHub Link` 中。
|
||||
|
||||
# --instructions--
|
||||
|
||||
|
||||
@ -18,11 +18,11 @@ dashedName: get-data-from-post-requests
|
||||
|
||||
POST（有時候是 PUT）- 使用請求發送信息，以創建新資源；
|
||||
|
||||
GET- 讀取不用修改的已存在的資源；
|
||||
GET - 讀取不用修改的已存在的資源；
|
||||
|
||||
PUT 或者 PATCH（有時候是 POST）- 發送數據，以更新資源；
|
||||
|
||||
DELETE=> 刪除一個資源。
|
||||
DELETE => 刪除一個資源。
|
||||
|
||||
還有其他兩種方法常用於與服務進行交互。 除了 GET 之外，上面列出的所有方法都可以負載數據（即數據都能放到消息正文中）， 這些方法也可以使用 body-parser 中間件。
|
||||
|
||||
|
||||
@ -10,7 +10,7 @@ dashedName: implement-a-root-level-request-logger-middleware
|
||||
|
||||
前面我們介紹了 `express.static()` 中間件函數， 現在是時候更詳細地瞭解什麼是中間件了。 中間件函數是一個接收 3 個參數的函數，這 3 個參數分別是：請求對象、響應對象和在應用的請求-響應循環中的下一個函數。 中間件函數執行一些可能對應用程序產生一些效果的代碼，通常還會在請求對象或者響應對象裏添加一些信息， 它們也可以在滿足某些條件時通過發送響應來結束循環， 如果在它們完成時沒有發送響應，那麼就會開始執行堆棧中的下一個函數， `next()` 將觸發調用第 3 個參數。
|
||||
|
||||
看看下面的例子：
|
||||
請看以下示例：
|
||||
|
||||
```js
|
||||
function(req, res, next) {
|
||||
@ -25,7 +25,7 @@ function(req, res, next) {
|
||||
|
||||
構建一個簡單的日誌記錄器。 對於每個請求，它應該在控制檯中打印一個採用以下格式的字符串：`method path - ip`， 例如：`GET /json - ::ffff:127.0.0.1`。 注意 `method` 和 `path` 之間有一個空格，並且 `path` 和 `ip` 中間的破折號的兩邊都有空格。 可以使用 `req.method`、`req.path` 和 `req.ip` 從請求對象中分別獲取請求方法（http 動詞）、路由相對路徑和請求者的 ip 信息。 當你完成時，記得要調用 `next()`，否則服務器將一直處於掛起狀態。 請確保“Logs”是打開的，觀察一下當一些請求到達時會發生什麼事情。
|
||||
|
||||
**注意：**Express 按照函數在代碼中出現的順序來執行， 中間件也是如此。 如果你想讓中間件函數適用於所有路由，那麼應該在路由之前配置好中間件。
|
||||
**注意：** Express 按照函數在代碼中出現的順序來執行， 中間件也是如此。 如果你想讓中間件函數適用於所有路由，那麼應該在路由之前配置好中間件。
|
||||
|
||||
# --hints--
|
||||
|
||||
|
||||
@ -8,13 +8,13 @@ dashedName: meet-the-node-console
|
||||
|
||||
# --description--
|
||||
|
||||
可以採用下面的任意一種方式完成這些挑戰：
|
||||
你可以採用下面的任意一種編寫代碼的方式來完成這些挑戰：
|
||||
|
||||
- 克隆 [這個 GitHub 倉庫](https://github.com/freeCodeCamp/boilerplate-express/) 並在本地完成項目。
|
||||
- 使用[我們的 Repl.it 上的初始化項目](https://replit.com/github/freeCodeCamp/boilerplate-express)來完成項目。
|
||||
- 使用你選擇的網站生成器來完成項目， 並確保包含了我們 GitHub 倉庫的所有文件。
|
||||
- 使用你選擇的網站生成器來完成項目。 需要包含我們 GitHub 倉庫的所有文件。
|
||||
|
||||
當完成本項目，請確認有一個正常運行的 demo 可以公開訪問。 然後將 URL 提交到 `Solution Link` 中。
|
||||
完成本項目後，請將一個正常運行的 demo（項目演示）託管在可以公開訪問的平臺。 然後在 `Solution Link` 字段中提交它的 URL。
|
||||
|
||||
在開發過程中，能夠隨時看到代碼的運行結果是非常重要的。
|
||||
|
||||
|
||||
@ -8,7 +8,7 @@ dashedName: add-a-version-to-your-package-json
|
||||
|
||||
# --description--
|
||||
|
||||
`version` 是 package.json 文件中必填字段之一， 這個字段描述了當前項目的版本， 如：
|
||||
`version` 是 package.json 文件中必填字段之一， 這個字段描述了當前項目的版本， 下面是一個示例：
|
||||
|
||||
```json
|
||||
"version": "1.2.0",
|
||||
|
||||
@ -8,7 +8,7 @@ dashedName: add-keywords-to-your-package-json
|
||||
|
||||
# --description--
|
||||
|
||||
在 `keywords` 字段中可以使用相關的關鍵字描述項目。 例如：
|
||||
在 `keywords` 字段中可以使用相關的關鍵字描述項目。 下面是一個示例：
|
||||
|
||||
```json
|
||||
"keywords": [ "descriptive", "related", "words" ],
|
||||
|
||||
@ -28,7 +28,7 @@ dashedName: expand-your-project-with-external-packages-from-npm
|
||||
|
||||
# --hints--
|
||||
|
||||
“dependencies”應該包含“moment”
|
||||
“dependencies”字段應該包含“moment”
|
||||
|
||||
```js
|
||||
(getUserInput) =>
|
||||
|
||||
@ -8,13 +8,13 @@ dashedName: how-to-use-package-json-the-core-of-any-node-js-project-or-npm-packa
|
||||
|
||||
# --description--
|
||||
|
||||
可以採用下面的任意一種方式完成這些挑戰：
|
||||
你可以採用下面的任意一種編寫代碼的方式來完成這些挑戰：
|
||||
|
||||
- 克隆 [GitHub repo](https://github.com/freeCodeCamp/boilerplate-npm/) 並在本地完成項目。
|
||||
- 使用[我們的 Replit 上的初始化項目](https://replit.com/github/freeCodeCamp/boilerplate-npm)來完成項目。
|
||||
- 使用你選擇的網站生成器來完成項目， 並確保包含了我們 GitHub 倉庫的所有文件。
|
||||
- 使用你選擇的網站生成器來完成項目。 需要包含我們 GitHub 倉庫的所有文件。
|
||||
|
||||
當完成本項目，請確認有一個正常運行的 demo 可以公開訪問。 然後將 URL 提交到 `Solution Link` 中。 此外，還可以將項目的源碼提交到 `GitHub Link` 中。
|
||||
完成本項目後，請將一個正常運行的 demo（項目演示）託管在可以公開訪問的平臺。 然後在 `Solution Link` 字段中提交它的 URL。 此外，還可以將項目的源碼提交到 `GitHub Link` 中。
|
||||
|
||||
`package.json` 文件是所有 Node.js 項目和 npm 包的樞紐， 和 HTML 文檔中的 <head> 區域用來描述網頁的配置信息（元數據）一樣，它存儲項目的相關信息。 它由單個 JSON 對象組成，並以鍵值對的形式存儲項目信息， 且至少包含兩個必填字段：“name”和“version”——但是最好提供有關項目的其他信息，這將對用戶或者維護者有所幫助。
|
||||
|
||||
|
||||
@ -22,7 +22,7 @@ dashedName: use-the-caret-character-to-use-the-latest-minor-version-of-a-depende
|
||||
|
||||
在依賴項中，使用脫字符（`^`）爲 moment 的版本添加前綴，允許 npm 更新依賴包到任意新的次版本。
|
||||
|
||||
**注意：**原來的版本號不用更改。
|
||||
**注意：** 原來的版本號不用更改。
|
||||
|
||||
# --hints--
|
||||
|
||||
|
||||
@ -26,7 +26,7 @@ dashedName: use-the-tilde-character-to-always-use-the-latest-patch-version-of-a-
|
||||
|
||||
# --hints--
|
||||
|
||||
“dependencies”應該包含“moment”
|
||||
“dependencies”字段中應包含“moment”
|
||||
|
||||
```js
|
||||
(getUserInput) =>
|
||||
|
||||
@ -8,7 +8,7 @@ dashedName: create-a-model
|
||||
|
||||
# --description--
|
||||
|
||||
**C**RUD 第一小節——CREATE
|
||||
**C** RUD 第一小節——CREATE
|
||||
|
||||
首先，我們需要一個 Schema， 每一個 Schema 都對應一個 MongoDB 的 collection， 並且在相應的 collection 裏定義 documents 的“樣子”。 Schema 用於組成模型（Model）， 我們甚至可以通過嵌套 Schema 來創建複雜的模型。目前我們先從簡。 我們可以根據模型創建實例，模型實例化後的對象稱爲 documents。
|
||||
|
||||
|
||||
@ -8,13 +8,13 @@ dashedName: install-and-set-up-mongoose
|
||||
|
||||
# --description--
|
||||
|
||||
可以採用下面的任意一種方式完成這些挑戰：
|
||||
你可以採用下面的任意一種編寫代碼的方式來完成這些挑戰：
|
||||
|
||||
- 克隆 [GitHub repo](https://github.com/freeCodeCamp/boilerplate-mongomongoose/) 並在本地完成項目。
|
||||
- 克隆 [這個 GitHub 倉庫](https://github.com/freeCodeCamp/boilerplate-mongomongoose/) 並在本地完成項目。
|
||||
- 使用[我們的 Replit 上的初始化項目](https://replit.com/github/freeCodeCamp/boilerplate-mongomongoose)來完成項目。
|
||||
- 使用你選擇的網站生成器來完成項目， 並確保包含了我們 GitHub 倉庫的所有文件。
|
||||
- 使用你選擇的網站生成器來完成項目。 需要包含我們 GitHub 倉庫的所有文件。
|
||||
|
||||
當完成本項目，請確認有一個正常運行的 demo 可以公開訪問。 然後將 URL 提交到 `Solution Link` 中。
|
||||
完成本項目後，請將一個正常運行的 demo（項目演示）託管在可以公開訪問的平臺。 然後在 `Solution Link` 字段中提交它的 URL。
|
||||
|
||||
在這個挑戰中，你將建立一個 MongoDB Atlas 數據庫並導入連接到它所需的軟件包。
|
||||
|
||||
@ -22,7 +22,7 @@ dashedName: install-and-set-up-mongoose
|
||||
|
||||
# --instructions--
|
||||
|
||||
將 `mongodb` 和 `mongoose` 添加到項目的 `package.json` 文件中。 然後，在 `myApp.js` 文件中請求 `mongoose`。 創建一個 `.env` 文件，給它添加一個 `MONGO_URI` 變量。 變量的值爲你的 MongoDB Atlas 數據庫 URI。 應用單引號或雙引號包裹 URI。請記住，環境變量 `=` 兩邊不能有空格。 例如，`MONGO_URI='VALUE'`。 完成後，使用下面的代碼來連接數據庫。
|
||||
將 `mongodb@~3.6.0` 和 `mongoose@~5.4.0` 添加到項目的 `package.json` 中。 然後，在 `myApp.js` 文件中請求 `mongoose`。 創建一個 `.env` 文件，給它添加一個 `MONGO_URI` 變量。 變量的值爲你的 MongoDB Atlas 數據庫 URI。 應用單引號或雙引號包裹 URI。請記住，環境變量 `=` 兩邊不能有空格。 例如，`MONGO_URI='VALUE'`。 完成後，使用下面的代碼來連接數據庫。
|
||||
|
||||
```js
|
||||
mongoose.connect(<Your URI>, { useNewUrlParser: true, useUnifiedTopology: true });
|
||||
|
||||
@ -19,7 +19,7 @@ dashedName: parsing-html-and-saving-data
|
||||
|
||||
## --text--
|
||||
|
||||
爲了解析 HTML 文本和提取表格，`.read_html()` 位於哪個 Python 的庫？
|
||||
哪個 Python 庫有 `.read_html()` 方法，我們可以用於解析 HTML 文檔和提取表格？
|
||||
|
||||
## --answers--
|
||||
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
---
|
||||
id: 587d825a367417b2b2512c89
|
||||
title: Implement Quick Sort
|
||||
title: 實現快速排序
|
||||
challengeType: 1
|
||||
forumTopicId: 301615
|
||||
dashedName: implement-quick-sort
|
||||
@ -8,21 +8,21 @@ dashedName: implement-quick-sort
|
||||
|
||||
# --description--
|
||||
|
||||
Here we will move on to an intermediate sorting algorithm: quick sort. Quick sort is an efficient, recursive divide-and-conquer approach to sorting an array. In this method, a pivot value is chosen in the original array. The array is then partitioned into two subarrays of values less than and greater than the pivot value. We then combine the result of recursively calling the quick sort algorithm on both sub-arrays. This continues until the base case of an empty or single-item array is reached, which we return. The unwinding of the recursive calls return us the sorted array.
|
||||
在這裏，我們將繼續討論中間排序算法：快速排序。 快速排序是對數組進行排序的一種有效的，遞歸的分而治之的方法。 在此方法中，在原始數組中選擇一個樞軸值。 然後將該數組分成兩個小於和大於數值的子數組。 然後，我們在兩個子陣列上結合遞歸調用快速排序算法的結果。 這一直持續到達到空或單項數組的基本情況，我們返回。 遞歸調用的展開將返回已排序的數組。
|
||||
|
||||
Quick sort is a very efficient sorting method, providing *O(nlog(n))* performance on average. It is also relatively easy to implement. These attributes make it a popular and useful sorting method.
|
||||
快速排序是一種非常有效的排序方法，平均提供 *O(nlog(n))* 的性能。 它也相對容易實現。 這些屬性使其成爲一種流行且有用的排序方法。
|
||||
|
||||
**Instructions:** Write a function `quickSort` which takes an array of integers as input and returns an array of these integers in sorted order from least to greatest. While the choice of the pivot value is important, any pivot will do for our purposes here. For simplicity, the first or last element could be used.
|
||||
**說明：** 編寫一個函數 `quickSort`，它將整數數組作爲輸入，並按從最小到最大的排序順序返回這些整數的數組。 雖然樞軸值的選擇很重要，但任何樞軸都可以滿足我們的目的。 爲簡單起見，可以使用第一個或最後一個元素。
|
||||
|
||||
# --hints--
|
||||
|
||||
`quickSort` should be a function.
|
||||
`quickSort` 應該是一個函數。
|
||||
|
||||
```js
|
||||
assert(typeof quickSort == 'function');
|
||||
```
|
||||
|
||||
`quickSort` should return a sorted array (least to greatest).
|
||||
`quickSort` 應該返回一個排序的數組（從最小到最大）。
|
||||
|
||||
```js
|
||||
assert(
|
||||
@ -50,7 +50,7 @@ assert(
|
||||
);
|
||||
```
|
||||
|
||||
`quickSort([1,4,2,8,345,123,43,32,5643,63,123,43,2,55,1,234,92])` should return an array that is unchanged except for order.
|
||||
`quickSort([1,4,2,8,345,123,43,32,5643,63,123,43,2,55,1,234,92])` 應該返回一個數組，除了順序之外沒有變化。
|
||||
|
||||
```js
|
||||
assert.sameMembers(
|
||||
@ -77,7 +77,7 @@ assert.sameMembers(
|
||||
);
|
||||
```
|
||||
|
||||
`quickSort` should not use the built-in `.sort()` method.
|
||||
`quickSort` 不應使用內置的 `.sort()` 方法。
|
||||
|
||||
```js
|
||||
assert(isBuiltInSortUsed());
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
---
|
||||
id: a56138aff60341a09ed6c480
|
||||
title: Inventory Update
|
||||
title: 庫存更新
|
||||
challengeType: 5
|
||||
forumTopicId: 16019
|
||||
dashedName: inventory-update
|
||||
@ -8,11 +8,11 @@ dashedName: inventory-update
|
||||
|
||||
# --description--
|
||||
|
||||
Compare and update the inventory stored in a 2D array against a second 2D array of a fresh delivery. Update the current existing inventory item quantities (in `arr1`). If an item cannot be found, add the new item and quantity into the inventory array. The returned inventory array should be in alphabetical order by item.
|
||||
將存儲在二維數組中的庫存與新交貨的二維數組進行比較和更新。 更新當前現有庫存物料數量（在 `arr1`）。 如果找不到商品，請將新商品和數量添加到庫存數組中。 返回的庫存數組應按項目的字母順序排列。
|
||||
|
||||
# --hints--
|
||||
|
||||
The function `updateInventory` should return an array.
|
||||
函數 `updateInventory` 應該返回一個數組。
|
||||
|
||||
```js
|
||||
assert.isArray(
|
||||
@ -33,7 +33,7 @@ assert.isArray(
|
||||
);
|
||||
```
|
||||
|
||||
`updateInventory([[21, "Bowling Ball"], [2, "Dirty Sock"], [1, "Hair Pin"], [5, "Microphone"]], [[2, "Hair Pin"], [3, "Half-Eaten Apple"], [67, "Bowling Ball"], [7, "Toothpaste"]])` should return an array with a length of 6.
|
||||
`updateInventory([[21, "Bowling Ball"], [2, "Dirty Sock"], [1, "Hair Pin"], [5, "Microphone"]], [[2, "Hair Pin"], [3, "Half-Eaten Apple"], [67, "Bowling Ball"], [7, "Toothpaste"]])` 應該返回一個長度爲 6 的數組。
|
||||
|
||||
```js
|
||||
assert.equal(
|
||||
@ -55,7 +55,7 @@ assert.equal(
|
||||
);
|
||||
```
|
||||
|
||||
`updateInventory([[21, "Bowling Ball"], [2, "Dirty Sock"], [1, "Hair Pin"], [5, "Microphone"]], [[2, "Hair Pin"], [3, "Half-Eaten Apple"], [67, "Bowling Ball"], [7, "Toothpaste"]])` should return `[[88, "Bowling Ball"], [2, "Dirty Sock"], [3, "Hair Pin"], [3, "Half-Eaten Apple"], [5, "Microphone"], [7, "Toothpaste"]]`.
|
||||
`updateInventory([[21, "Bowling Ball"], [2, "Dirty Sock"], [1, "Hair Pin"], [5, "Microphone"]], [[2, "Hair Pin"], [3, "Half-Eaten Apple"], [67, "Bowling Ball"], [7, "Toothpaste"]])` 應返回`[[88, "Bowling Ball"], [2, "Dirty Sock"], [3, "Hair Pin"], [3, "Half-Eaten Apple"], [5, "Microphone"], [7, "Toothpaste"]]`。
|
||||
|
||||
```js
|
||||
assert.deepEqual(
|
||||
@ -84,7 +84,7 @@ assert.deepEqual(
|
||||
);
|
||||
```
|
||||
|
||||
`updateInventory([[21, "Bowling Ball"], [2, "Dirty Sock"], [1, "Hair Pin"], [5, "Microphone"]], [])` should return `[[21, "Bowling Ball"], [2, "Dirty Sock"], [1, "Hair Pin"], [5, "Microphone"]]`.
|
||||
`updateInventory([[21, "Bowling Ball"], [2, "Dirty Sock"], [1, "Hair Pin"], [5, "Microphone"]], [])`應該返回`[[21, "Bowling Ball"], [2, "Dirty Sock"], [1, "Hair Pin"], [5, "Microphone"]]`。
|
||||
|
||||
```js
|
||||
assert.deepEqual(
|
||||
@ -106,7 +106,7 @@ assert.deepEqual(
|
||||
);
|
||||
```
|
||||
|
||||
`updateInventory([], [[2, "Hair Pin"], [3, "Half-Eaten Apple"], [67, "Bowling Ball"], [7, "Toothpaste"]])` should return `[[67, "Bowling Ball"], [2, "Hair Pin"], [3, "Half-Eaten Apple"], [7, "Toothpaste"]]`.
|
||||
`updateInventory([], [[2, "Hair Pin"], [3, "Half-Eaten Apple"], [67, "Bowling Ball"], [7, "Toothpaste"]])` 應該返回 `[[67, "Bowling Ball"], [2, "Hair Pin"], [3, "Half-Eaten Apple"], [7, "Toothpaste"]]`。
|
||||
|
||||
```js
|
||||
assert.deepEqual(
|
||||
@ -128,7 +128,7 @@ assert.deepEqual(
|
||||
);
|
||||
```
|
||||
|
||||
`updateInventory([[0, "Bowling Ball"], [0, "Dirty Sock"], [0, "Hair Pin"], [0, "Microphone"]], [[1, "Hair Pin"], [1, "Half-Eaten Apple"], [1, "Bowling Ball"], [1, "Toothpaste"]])` should return `[[1, "Bowling Ball"], [0, "Dirty Sock"], [1, "Hair Pin"], [1, "Half-Eaten Apple"], [0, "Microphone"], [1, "Toothpaste"]]`.
|
||||
`updateInventory([[0, "Bowling Ball"], [0, "Dirty Sock"], [0, "Hair Pin"], [0, "Microphone"]], [[1, "Hair Pin"], [1, "Half-Eaten Apple"], [1, "Bowling Ball"], [1, "Toothpaste"]])` 應返回 `[[1, "Bowling Ball"], [0, "Dirty Sock"], [1, "Hair Pin"], [1, "Half-Eaten Apple"], [0, "Microphone"], [1, "Toothpaste"]]`。
|
||||
|
||||
```js
|
||||
assert.deepEqual(
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
---
|
||||
id: 5f1a4ef5d5d6b5ab580fc6ae
|
||||
title: Celestial Bodies Database
|
||||
title: 天體數據庫
|
||||
challengeType: 12
|
||||
helpCategory: Relational Databases
|
||||
url: https://github.com/moT01/.celestial-bodies-database
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
---
|
||||
id: 602da0de22201c65d2a019f6
|
||||
title: Learn Advanced Bash by Building a Kitty Ipsum Translator
|
||||
title: 通過構建一個 Kitty Ipsum 翻譯器來學習高級 Bash
|
||||
challengeType: 12
|
||||
helpCategory: Relational Databases
|
||||
url: https://github.com/moT01/.learn-advanced-bash-by-building-a-kitty-ipsum-translator
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
---
|
||||
id: 5f5b969a05380d2179fe6e18
|
||||
title: Learn Bash and SQL by Building a Bike Rental Shop
|
||||
title: 通過構建自行車租賃店來學習 Bash 和 SQL
|
||||
challengeType: 12
|
||||
helpCategory: Relational Databases
|
||||
url: https://github.com/moT01/.learn-bash-and-sql-by-building-a-bike-rental-shop
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
---
|
||||
id: 5ea8adfab628f68d805bfc5e
|
||||
title: Learn Bash by Building a Boilerplate
|
||||
title: 通過構建模版學習 Bash
|
||||
challengeType: 12
|
||||
helpCategory: Relational Databases
|
||||
url: https://github.com/freeCodeCamp/.learn-bash-by-building-a-boilerplate
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
---
|
||||
id: 5f5904ac738bc2fa9efecf5a
|
||||
title: Learn Bash Scripting by Building Five Programs
|
||||
title: 通過構建五個程序學習 Bash 腳本
|
||||
challengeType: 12
|
||||
helpCategory: Relational Databases
|
||||
url: https://github.com/moT01/.learn-bash-scripting-by-building-five-programs
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
---
|
||||
id: 5fa323cdaf6a73463d590659
|
||||
title: Learn Git by Building an SQL Reference Object
|
||||
title: 通過構建 SQL 引用對象來學習 Git
|
||||
challengeType: 12
|
||||
helpCategory: Relational Databases
|
||||
url: https://github.com/moT01/.learn-git-by-building-an-sql-reference-object
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
---
|
||||
id: 602da04222201c65d2a019f3
|
||||
title: Learn GitHub by Building a List of Inspirational Quotes
|
||||
title: 通過建立勵志名言列表來學習 GitHub
|
||||
challengeType: 12
|
||||
helpCategory: Relational Databases
|
||||
url: https://github.com/moT01/.learn-github-by-building-a-list-of-inspirational-quotes
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
---
|
||||
id: 5f32db63eb37f7e17323f459
|
||||
title: Learn Nano by Building a Castle
|
||||
title: 通過構建城堡來學習 Nano
|
||||
challengeType: 12
|
||||
helpCategory: Relational Databases
|
||||
url: https://github.com/moT01/.learn-nano-by-building-a-castle
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
---
|
||||
id: 5f2c289f164c29556da632fd
|
||||
title: Learn Relational Databases by Building a Mario Database
|
||||
title: 通過構建 Mario 數據庫來學習關係型數據庫
|
||||
challengeType: 12
|
||||
helpCategory: Relational Databases
|
||||
url: https://github.com/moT01/.learn-relational-databases-by-building-a-mario-database
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
---
|
||||
id: 602da0c222201c65d2a019f5
|
||||
title: Learn SQL by Building a Student Database
|
||||
title: 通過構建學生數據庫學習 SQL
|
||||
challengeType: 12
|
||||
helpCategory: Relational Databases
|
||||
url: https://github.com/moT01/.learn-sql-by-building-a-student-database
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
---
|
||||
id: 602da04c22201c65d2a019f4
|
||||
title: Number Guessing Game
|
||||
title: 猜數字遊戲
|
||||
challengeType: 12
|
||||
helpCategory: Relational Databases
|
||||
url: https://github.com/moT01/.number-guessing-game
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
---
|
||||
id: 602d9ff222201c65d2a019f2
|
||||
title: Periodic Table Database
|
||||
title: 元素週期表數據庫
|
||||
challengeType: 12
|
||||
helpCategory: Relational Databases
|
||||
url: https://github.com/moT01/.periodic-table-database
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
---
|
||||
id: 5f87ac112ae598023a42df1a
|
||||
title: Salon Appointment Scheduler
|
||||
title: 沙龍日程安排程序
|
||||
challengeType: 12
|
||||
helpCategory: Relational Databases
|
||||
url: https://github.com/moT01/.salon-appointment-scheduler
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
---
|
||||
id: 5f9771307d4d22b9d2b75a94
|
||||
title: World Cup Database
|
||||
title: 世界盃數據庫
|
||||
challengeType: 12
|
||||
helpCategory: Relational Databases
|
||||
url: https://github.com/moT01/.world-cup-database
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
---
|
||||
id: 561add10cb82ac38a17523bc
|
||||
title: 后端开发和API证书
|
||||
title: 后端开发和 API 认证
|
||||
challengeType: 7
|
||||
isPrivate: true
|
||||
tests:
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
---
|
||||
id: 5e46fc95ac417301a38fb934
|
||||
title: Python 与数据分析证书
|
||||
title: Python 与数据分析认证
|
||||
challengeType: 7
|
||||
isPrivate: true
|
||||
tests:
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
---
|
||||
id: 5a553ca864b52e1d8bceea14
|
||||
title: Data Visualization Certification
|
||||
title: 数据可视化认证
|
||||
challengeType: 7
|
||||
isPrivate: true
|
||||
tests:
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
---
|
||||
id: 561acd10cb82ac38a17513bc
|
||||
title: 前端开发库证书
|
||||
title: 前端开发库认证
|
||||
challengeType: 7
|
||||
isPrivate: true
|
||||
tests:
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
---
|
||||
id: 5e6021435ac9d0ecd8b94b00
|
||||
title: 信息安全证书
|
||||
title: 信息安全认证
|
||||
challengeType: 7
|
||||
isPrivate: true
|
||||
tests:
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
---
|
||||
id: 561abd10cb81ac38a17513bc
|
||||
title: JavaScript 算法和数据结构证书
|
||||
title: JavaScript 算法和数据结构认证
|
||||
challengeType: 7
|
||||
isPrivate: true
|
||||
tests:
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
---
|
||||
id: 660add10cb82ac38a17513be
|
||||
title: 旧版后端证书
|
||||
title: 旧版后端认证
|
||||
challengeType: 7
|
||||
isPrivate: true
|
||||
tests:
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
---
|
||||
id: 561add10cb82ac39a17513bc
|
||||
title: 旧版数据可视化证书
|
||||
title: 旧版数据可视化认证
|
||||
challengeType: 7
|
||||
isPrivate: true
|
||||
tests:
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
---
|
||||
id: 561add10cb82ac38a17513be
|
||||
title: 旧版前端证书
|
||||
title: 旧版前端认证
|
||||
challengeType: 7
|
||||
isPrivate: true
|
||||
tests:
|
||||
|
||||
@ -6,19 +6,19 @@ isPrivate: true
|
||||
tests:
|
||||
-
|
||||
id: 561add10cb82ac38a17513bc
|
||||
title: 响应式网页设计证书
|
||||
title: 响应式 Web 设计认证
|
||||
-
|
||||
id: 561abd10cb81ac38a17513bc
|
||||
title: JavaScript 算法和数据结构证书
|
||||
title: JavaScript 算法和数据结构认证
|
||||
-
|
||||
id: 561acd10cb82ac38a17513bc
|
||||
title: 前端库证书
|
||||
title: 前端库认证
|
||||
-
|
||||
id: 5a553ca864b52e1d8bceea14
|
||||
title: 数据可视化证书
|
||||
title: 数据可视化认证
|
||||
-
|
||||
id: 561add10cb82ac38a17523bc
|
||||
title: API 和微服务证书
|
||||
title: API 和微服务认证
|
||||
-
|
||||
id: 561add10cb82ac38a17213bc
|
||||
title: 旧版信息安全和质量保证证书
|
||||
title: 旧版信息安全和质量保证认证
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
---
|
||||
id: 561add10cb82ac38a17213bc
|
||||
title: 旧版信息安全和质量保证证书
|
||||
title: 旧版信息安全和质量保证认证
|
||||
challengeType: 7
|
||||
isPrivate: true
|
||||
tests:
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
---
|
||||
id: 5e46fc95ac417301a38fb935
|
||||
title: Machine Learning with Python Certification
|
||||
title: Python 与机器学习认证
|
||||
challengeType: 7
|
||||
isPrivate: true
|
||||
tests:
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
---
|
||||
id: 5e611829481575a52dc59c0e
|
||||
title: 质量保证证书
|
||||
title: 质量保证认证
|
||||
challengeType: 7
|
||||
isPrivate: true
|
||||
tests:
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
---
|
||||
id: 606243f50267e718b1e755f4
|
||||
title: 关系型数据库证书
|
||||
title: 关系数据库认证
|
||||
challengeType: 7
|
||||
isPrivate: true
|
||||
tests:
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
---
|
||||
id: 561add10cb82ac38a17513bc
|
||||
title: 响应式网页设计认证项目
|
||||
title: 响应式 Web 设计认证
|
||||
challengeType: 7
|
||||
isPrivate: true
|
||||
tests:
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
---
|
||||
id: 5e44431b903586ffb414c951
|
||||
title: Python 与科学计算证书
|
||||
title: Python 与科学计算认证
|
||||
challengeType: 7
|
||||
isPrivate: true
|
||||
tests:
|
||||
|
||||
@ -10,7 +10,7 @@ dashedName: prevent-object-mutation
|
||||
|
||||
通过之前的挑战可以看出，`const` 声明并不会真的保护数据不被改变。 为了确保数据不被改变，JavaScript 提供了一个函数 `Object.freeze`。
|
||||
|
||||
当一个对象被冻结的时候，你不能再对它的属性再进行增、删、改的操作。 任何试图改变对象的操作都会被阻止，却不会报错。
|
||||
任何更改对象的尝试都将被拒绝，如果脚本在严格模式下运行，将抛出错误。
|
||||
|
||||
```js
|
||||
let obj = {
|
||||
@ -23,7 +23,7 @@ obj.newProp = "Test";
|
||||
console.log(obj);
|
||||
```
|
||||
|
||||
`obj.review` 和 `obj.newProp` 赋值将导致错误，控制台将显示值 `{ name: "FreeCodeCamp", review: "Awesome" }`。
|
||||
`obj.review` 和 `obj.newProp` 赋值将导致错误，因为我们的编辑器默认在严格模式下运行，控制台将显示值 `{ name: "FreeCodeCamp", review: "Awesome" }`。
|
||||
|
||||
# --instructions--
|
||||
|
||||
|
||||
@ -38,7 +38,7 @@ JavaScript 的默认排序方法是 Unicode 值顺序排序，有时可能会得
|
||||
|
||||
# --instructions--
|
||||
|
||||
在 `alphabeticalOrder` 函数中使用 `sort` 方法对 `arr` 中的元素按照字母顺序排列。
|
||||
在 `alphabeticalOrder` 函数中使用 `sort` 方法对 `arr` 中的元素按照字母顺序排列。 该函数应返回一个排序的数组。
|
||||
|
||||
# --hints--
|
||||
|
||||
@ -83,7 +83,7 @@ assert(
|
||||
function alphabeticalOrder(arr) {
|
||||
// Only change code below this line
|
||||
|
||||
|
||||
return arr
|
||||
// Only change code above this line
|
||||
}
|
||||
alphabeticalOrder(["a", "d", "c", "a", "z", "g"]);
|
||||
|
||||
@ -12,7 +12,7 @@ dashedName: add-font-awesome-icons-to-our-buttons
|
||||
|
||||
# --description--
|
||||
|
||||
Font Awesome 是一个非常便利的图标库。 我们可以通过 webfont 或矢量图的方式来使用这些图标。 这些图标就和字体一样， 不仅能通过像素单位指定它们的大小，它们也同样会继承父级 HTML 元素的字体大小。
|
||||
Font Awesome 是一个非常便利的图标库。 我们可以通过 webfont 或矢量图的方式来使用这些图标。 这些图标就和字体一样， 不仅能通过像素单位指定它们的大小，它们也同样会继承父级 HTML 元素的字号。
|
||||
|
||||
可以将 Font Awesome 图标库添加至任何一个 web app 中，方法很简单，只需要在 HTML head 标签中添加以下代码即可：
|
||||
|
||||
|
||||
@ -12,7 +12,7 @@ Bootstrap 有着丰富的预定义按钮颜色。 浅蓝色的 `btn-info` class
|
||||
|
||||
在 `Like` 按钮下方创建包含文本 `Info` 的块级 Bootstrap 按钮，然后为该按钮添加 Bootstrap 的 `btn-info` 和 `btn-block` classes。
|
||||
|
||||
注意：这些按钮仍然需要 `btn` 和 `btn-block` classes。
|
||||
注意：这些按钮仍然需要 `btn` 和 `btn-block` class。
|
||||
|
||||
# --hints--
|
||||
|
||||
|
||||
@ -29,7 +29,7 @@ assert(
|
||||
assert($('button').hasClass('btn') && $('button').hasClass('btn-default'));
|
||||
```
|
||||
|
||||
保证所有 `button` 元素都有一个闭合标签。
|
||||
确保所有 `button` 元素都有闭合标签。
|
||||
|
||||
```js
|
||||
assert(
|
||||
|
||||
@ -10,9 +10,9 @@ dashedName: build-a-25--5-clock
|
||||
|
||||
**目标：** 在 [CodePen.io](https://codepen.io) 上实现一个功能类似 <https://codepen.io/freeCodeCamp/full/XpKrrW> 的 App。
|
||||
|
||||
在满足以下[需求](https://en.wikipedia.org/wiki/User_story)并能通过所有测试的前提下， 可以根据自己的喜好来美化 app。
|
||||
在满足以下 [需求](https://en.wikipedia.org/wiki/User_story) 并能通过所有测试的前提下， 赋予它你自己的个人风格。
|
||||
|
||||
可以使用 HTML、JavaScript、CSS、Bootstrap、SASS、React、Redux、jQuery 来完成这个挑战。 但鉴于这个章节的学习内容与前端框架相关，推荐使用一款前端框架（比如 React）来完成这个挑战。 不推荐使用前面没有提到的技术，否则风险自负。 我们有计划新增其他前端框架课程，例如 Angular 和 Vue，不过目前还没有这些内容。 如果使用建议的技术栈完成这个项目，我们会接受并尝试修复相关的问题反馈。 编码愉快！
|
||||
可以使用 HTML、JavaScript、CSS、Bootstrap、SASS、React、Redux、jQuery 来完成这个挑战。 但鉴于这个章节的学习内容与前端框架相关，推荐使用一款前端框架（比如 React）来完成这个挑战；不推荐使用前面没有提到的技术，否则风险自负。 不推荐使用前面没有提到的技术，否则风险自担。 我们有计划新增其他前端框架课程，例如 Angular 和 Vue，不过目前还没有这些内容。 我们会接受并尝试修复你在使用推荐技术栈创建项目时报告的问题。 编码愉快！
|
||||
|
||||
**需求 1：** 应该能看到一个具有`id="break-label"`属性的元素，这个元素的内容应该是一个字符串（例如："Break Length"）。
|
||||
|
||||
|
||||
@ -10,9 +10,9 @@ dashedName: build-a-drum-machine
|
||||
|
||||
**目标：** 在 [CodePen.io](https://codepen.io) 上实现一个功能类似 <https://codepen.io/freeCodeCamp/full/MJyNMd> 的 App。
|
||||
|
||||
在满足以下[需求](https://en.wikipedia.org/wiki/User_story)并能通过所有测试的前提下， 可以根据自己的喜好来美化 app。
|
||||
在满足以下 [需求](https://en.wikipedia.org/wiki/User_story) 并能通过所有测试的前提下， 赋予它你自己的个人风格。
|
||||
|
||||
可以使用 HTML、JavaScript、CSS、Bootstrap、SASS、React、Redux、jQuery 来完成这个挑战。 但鉴于这个章节的学习内容与前端框架相关，推荐使用一款前端框架（比如 React）来完成这个挑战。 不推荐使用前面没有提到的技术，否则风险自负。 我们有计划新增其他前端框架课程，例如 Angular 和 Vue，不过目前还没有这些内容。 我们会接受并尝试修复使用推荐技术栈遇到的反馈问题。 编码愉快！
|
||||
可以使用 HTML、JavaScript、CSS、Bootstrap、SASS、React、Redux、jQuery 来完成这个挑战。 但鉴于这个章节的学习内容与前端框架相关，推荐使用一款前端框架（比如 React）来完成这个挑战。 不推荐使用前面没有提到的技术，否则风险自担。 我们有计划新增其他前端框架课程，例如 Angular 和 Vue，不过目前还没有这些内容。 我们会接受并尝试修复你在使用推荐技术栈创建项目时报告的问题。 编码愉快！
|
||||
|
||||
**需求 1：** 应该可以看到一个具有 `id="drum-machine"` 属性的外层容器，该容器包含了其它所有元素。
|
||||
|
||||
|
||||
@ -10,9 +10,9 @@ dashedName: build-a-javascript-calculator
|
||||
|
||||
**目标：** 在 [CodePen.io](https://codepen.io) 上实现一个功能类似 <https://codepen.io/freeCodeCamp/full/wgGVVX> 的 App。
|
||||
|
||||
在满足以下[需求](https://en.wikipedia.org/wiki/User_story)并能通过所有测试的前提下， 可以根据自己的喜好来美化 app。
|
||||
在满足以下 [需求](https://en.wikipedia.org/wiki/User_story) 并能通过所有测试的前提下， 赋予它你自己的个人风格。
|
||||
|
||||
可以使用 HTML、JavaScript、CSS、Bootstrap、SASS、React、Redux、jQuery 来完成这个挑战。 但鉴于这个章节的学习内容与前端框架相关，推荐使用一款前端框架（比如 React）来完成这个挑战。 不推荐使用前面没有提到的技术，否则风险自负。 我们有计划新增其他前端框架课程，例如 Angular 和 Vue，不过目前还没有这些内容。 我们会接受并尝试修复使用推荐技术栈遇到的反馈问题。 编码愉快！
|
||||
可以使用 HTML、JavaScript、CSS、Bootstrap、SASS、React、Redux、jQuery 来完成这个挑战。 但鉴于这个章节的学习内容与前端框架相关，推荐使用一款前端框架（比如 React）来完成这个挑战；不推荐使用前面没有提到的技术，否则风险自负。 不推荐使用前面没有提到的技术，否则风险自担。 我们有计划新增其他前端框架课程，例如 Angular 和 Vue，不过目前还没有这些内容。 我们会接受并尝试修复你在使用推荐技术栈创建项目时报告的问题。 编码愉快！
|
||||
|
||||
**需求 1：** 计算器应该包含一个具有 `id="equals"` 属性的可以点击的元素，元素的文本内容为 `=`（等于符号）。
|
||||
|
||||
|
||||
@ -10,9 +10,9 @@ dashedName: build-a-markdown-previewer
|
||||
|
||||
**目标：** 在 [CodePen.io](https://codepen.io) 上实现一个功能类似 <https://codepen.io/freeCodeCamp/full/GrZVVO> 的 App。
|
||||
|
||||
在满足以下[需求](https://en.wikipedia.org/wiki/User_story)并能通过所有测试的前提下， 你可以根据自己的喜好来美化 app。
|
||||
在满足以下 [需求](https://en.wikipedia.org/wiki/User_story) 并能通过所有测试的前提下， 赋予它你自己的个人风格。
|
||||
|
||||
可以使用 HTML、JavaScript、CSS、Bootstrap、SASS、React、Redux、jQuery 来完成这个挑战。 但鉴于这个章节的学习内容与前端框架相关，推荐使用一款前端框架（比如 React）来完成这个挑战。 不推荐使用前面没有提到的技术，否则风险自负。 我们有计划新增其他前端框架课程，例如 Angular 和 Vue，不过目前还没有这些内容。 我们会接受并尝试修复使用推荐技术栈遇到的反馈问题。 编码愉快！
|
||||
可以使用 HTML、JavaScript、CSS、Bootstrap、SASS、React、Redux、jQuery 来完成这个挑战。 但鉴于这个章节的学习内容与前端框架相关，推荐使用一款前端框架（比如 React）来完成这个挑战；不推荐使用前面没有提到的技术，否则风险自负。 不推荐使用前面没有提到的技术，否则风险自担。 我们有计划新增其他前端框架课程，例如 Angular 和 Vue，不过目前还没有这些内容。 我们会接受并尝试修复你在使用推荐技术栈创建项目时报告的问题。 编码愉快！
|
||||
|
||||
**需求 1：** 应该能看到一个具有 `id="editor"` 属性的 `textarea` 元素。
|
||||
|
||||
|
||||
@ -10,9 +10,9 @@ dashedName: build-a-random-quote-machine
|
||||
|
||||
**目标：** 在 [CodePen.io](https://codepen.io) 上实现一个功能类似 <https://codepen.io/freeCodeCamp/full/qRZeGZ> 的 App。
|
||||
|
||||
在满足以下[需求](https://en.wikipedia.org/wiki/User_story)并能通过所有测试的前提下， 可以根据自己的喜好来美化 app。
|
||||
在满足以下 [需求](https://en.wikipedia.org/wiki/User_story) 并能通过所有测试的前提下， 赋予它你自己的个人风格。
|
||||
|
||||
可以使用 HTML、JavaScript、CSS、Bootstrap、SASS、React、Redux、jQuery 来完成这个挑战。 但鉴于这个章节的学习内容与前端框架相关，推荐使用一款前端框架（比如 React）来完成这个挑战。 不推荐使用前面没有提到的技术，否则风险自担。 我们有计划新增其他前端框架课程，例如 Angular 和 Vue，不过目前还没有这些内容。 我们会接受并尝试修复使用推荐技术栈遇到的反馈问题。 编码愉快！
|
||||
可以使用 HTML、JavaScript、CSS、Bootstrap、SASS、React、Redux、jQuery 来完成这个挑战。 但鉴于这个章节的学习内容与前端框架相关，推荐使用一款前端框架（比如 React）来完成这个挑战；不推荐使用前面没有提到的技术，否则风险自负。 不推荐使用前面没有提到的技术，否则风险自担。 我们有计划新增其他前端框架课程，例如 Angular 和 Vue，不过目前还没有这些内容。 我们会接受并尝试修复你在使用推荐技术栈创建项目时报告的问题。 编码愉快！
|
||||
|
||||
**需求 1：** 应该能看到一个具有 `id="quote-box"` 属性的包裹元素。
|
||||
|
||||
|
||||
@ -39,7 +39,7 @@ assert(
|
||||
assert(code.match(/\:even/g));
|
||||
```
|
||||
|
||||
应该仅用 jQuery 给元素添加 class。
|
||||
应该仅用 jQuery 给标签添加 class。
|
||||
|
||||
```js
|
||||
assert(
|
||||
|
||||
@ -33,7 +33,7 @@ $("button").addClass("animated bounce");
|
||||
assert($('button').hasClass('animated') && $('button').hasClass('bounce'));
|
||||
```
|
||||
|
||||
应该仅用 jQuery 给元素添加 class。
|
||||
应该仅用 jQuery 给标签添加 class。
|
||||
|
||||
```js
|
||||
assert(!code.match(/class.*animated/g));
|
||||
|
||||
@ -18,7 +18,7 @@ dashedName: connect-redux-to-the-messages-app
|
||||
|
||||
# --hints--
|
||||
|
||||
`AppWrapper` 应渲染该页面上。
|
||||
`AppWrapper` 应该渲染该到页面上。
|
||||
|
||||
```js
|
||||
assert(
|
||||
@ -29,7 +29,7 @@ assert(
|
||||
);
|
||||
```
|
||||
|
||||
`Presentational` 组件应该渲染到页面上。
|
||||
`Presentational` 应该渲染到页面上.
|
||||
|
||||
```js
|
||||
assert(
|
||||
@ -70,7 +70,7 @@ assert(
|
||||
);
|
||||
```
|
||||
|
||||
`Presentational` 组件应接收创建 action 的函数 `submitMessage` 属性。
|
||||
`Presentational` 组件应接收创建 action 的函数的 `submitMessage` 属性。
|
||||
|
||||
```js
|
||||
assert(
|
||||
|
||||
Some files were not shown because too many files have changed in this diff Show More
Reference in New Issue
Block a user