diff --git a/curriculum/challenges/chinese-traditional/02-javascript-algorithms-and-data-structures/basic-javascript/practice-comparing-different-values.md b/curriculum/challenges/chinese-traditional/02-javascript-algorithms-and-data-structures/basic-javascript/practice-comparing-different-values.md index 4f04398f059..34ebcf37f01 100644 --- a/curriculum/challenges/chinese-traditional/02-javascript-algorithms-and-data-structures/basic-javascript/practice-comparing-different-values.md +++ b/curriculum/challenges/chinese-traditional/02-javascript-algorithms-and-data-structures/basic-javascript/practice-comparing-different-values.md @@ -15,7 +15,7 @@ dashedName: practice-comparing-different-values **示例** -`3 == '3'` 返回 `true` ，因爲 JavaScript 執行了從字符串到數字類型的轉換。 `3 === '3'` 返回 false，因爲類型不同且類型轉換沒有執行。 +`3 == '3'` 返回 `true` ，因爲 JavaScript 執行了從字符串到數字類型的轉換。 `3 === '3'` 返回 `false`，因爲類型不同，沒有進行類型轉換。 **提示** 在 JavaScript 中，你可以使用 `typeof` 運算符確定變量或值的類型，如下所示： diff --git a/curriculum/challenges/chinese-traditional/02-javascript-algorithms-and-data-structures/basic-javascript/understand-string-immutability.md b/curriculum/challenges/chinese-traditional/02-javascript-algorithms-and-data-structures/basic-javascript/understand-string-immutability.md index bb5ae04a5f0..e7f8ffcf02b 100644 --- a/curriculum/challenges/chinese-traditional/02-javascript-algorithms-and-data-structures/basic-javascript/understand-string-immutability.md +++ b/curriculum/challenges/chinese-traditional/02-javascript-algorithms-and-data-structures/basic-javascript/understand-string-immutability.md @@ -11,14 +11,14 @@ dashedName: understand-string-immutability 在 JavaScript 中，字符串（`String`）的值是不可變的（immutable），這意味着一旦字符串被創建就不能被改變。 -例如，下面的代碼： +例如，以下代碼將產生錯誤，因爲字符串 `Bob` 中的字母 `B` 不能更改爲字母 `J`： ```js let myStr = "Bob"; myStr[0] = "J"; ``` -是不會把變量 `myStr` 的值改變成 `Job` 的，因爲變量 `myStr` 是不可變的。 注意，這*並不*意味着 `myStr` 永遠不能被改變，只是字符串字面量 string literal 的各個字符不能被改變。 改變 `myStr` 的唯一方法是重新給它賦一個值，例如： +請注意，這*不*意味着無法重新分配 `myStr`。 更改 `myStr` 的唯一方法是爲其分配一個新值，如下所示： ```js let myStr = "Bob"; diff --git a/curriculum/challenges/chinese-traditional/02-javascript-algorithms-and-data-structures/es6/mutate-an-array-declared-with-const.md b/curriculum/challenges/chinese-traditional/02-javascript-algorithms-and-data-structures/es6/mutate-an-array-declared-with-const.md index 489a5fc898f..3d239fc31a9 100644 --- a/curriculum/challenges/chinese-traditional/02-javascript-algorithms-and-data-structures/es6/mutate-an-array-declared-with-const.md +++ b/curriculum/challenges/chinese-traditional/02-javascript-algorithms-and-data-structures/es6/mutate-an-array-declared-with-const.md @@ -8,7 +8,7 @@ dashedName: mutate-an-array-declared-with-const # --description-- -如果你不熟悉 `const`，請查看[這個挑戰](/learn/javascript-algorithms-and-data-structures/basic-javascript/declare-a-read-only-variable-with-the-const-keyword)。 +如果你不熟悉 `const`，請查看 這個 const 關鍵詞的挑戰。 `const` 聲明在現代 JavaScript 中有很多用例。 @@ -23,7 +23,7 @@ s[2] = 45; console.log(s); ``` -`s = [1, 2, 3]` 將導致錯誤。 `console.log` 將顯示值 `[5, 6, 45]`。 +`s = [1, 2, 3]` 將導致錯誤。 註釋掉該行後，`console.log` 將顯示值 `[5, 6, 45]`。 如你所見，你可以改變對象 `[5, 6, 7]` 本身，變量 `s` 仍將指向更改後的數組 `[5, 6, 45]`。 像所有數組一樣，`s` 中的數組元素是可變的，但是因爲使用了 `const`，所以不能使用變量標識符 `s` 來指向一個使用賦值運算符的不同數組。 diff --git a/curriculum/challenges/chinese-traditional/03-front-end-development-libraries/front-end-development-libraries-projects/build-a-25-5-clock.md b/curriculum/challenges/chinese-traditional/03-front-end-development-libraries/front-end-development-libraries-projects/build-a-25-5-clock.md index 2dfe4fbddf4..643d3befd5d 100644 --- a/curriculum/challenges/chinese-traditional/03-front-end-development-libraries/front-end-development-libraries-projects/build-a-25-5-clock.md +++ b/curriculum/challenges/chinese-traditional/03-front-end-development-libraries/front-end-development-libraries-projects/build-a-25-5-clock.md @@ -8,9 +8,9 @@ dashedName: build-a-25--5-clock # --description-- -**目標：** 在 [CodePen.io](https://codepen.io) 上實現一個功能類似 的 App。 +**目標：** 構建一個應用，功能和 https://codepen.io/freeCodeCamp/full/XpKrrW 類似。 -在滿足以下 [需求](https://en.wikipedia.org/wiki/User_story) 並能通過所有測試的前提下， 賦予它你自己的個人風格。 +完成以下需求，並且通過所有測試。 可以使用你需要的任何庫或 API。 賦予它你自己的個人風格。 可以使用 HTML、JavaScript、CSS、Bootstrap、SASS、React、Redux、jQuery 來完成這個挑戰。 但鑑於這個章節的學習內容與前端框架相關，推薦使用一款前端框架（比如 React）來完成這個挑戰；不推薦使用前面沒有提到的技術，否則風險自負。 不推薦使用前面沒有提到的技術，否則風險自擔。 我們有計劃新增其他前端框架課程，例如 Angular 和 Vue，不過目前還沒有這些內容。 我們會接受並嘗試修復你在使用推薦技術棧創建項目時報告的問題。 編碼愉快！ @@ -70,7 +70,7 @@ dashedName: build-a-25--5-clock **需求 28：** 當點擊 id 屬性爲 `reset` 的元素時，id 屬性爲 `beep` 的音頻元素必須停止播放並回到開頭。 -你可以使用這個 CodePen 模板，點擊 `Save` 即可創建你自己的項目。 或者你可以在任何你喜歡的環境中使用以下 CDN 鏈接來運行測試：`https://cdn.freecodecamp.org/testable-projects-fcc/v1/bundle.js`。 +你可以使用 CodePen 模版創建你的新項目，點擊 `Save` 即可創建你的新項目。 或者你可以在任何你喜歡的環境中使用以下 CDN 鏈接來運行測試：`https://cdn.freecodecamp.org/testable-projects-fcc/v1/bundle.js`。 當你完成了本項目，並且該項目所有測試運行通過， 請提交項目的 URL。 diff --git a/curriculum/challenges/chinese-traditional/03-front-end-development-libraries/front-end-development-libraries-projects/build-a-drum-machine.md b/curriculum/challenges/chinese-traditional/03-front-end-development-libraries/front-end-development-libraries-projects/build-a-drum-machine.md index 9442b595b52..f3fb2b74390 100644 --- a/curriculum/challenges/chinese-traditional/03-front-end-development-libraries/front-end-development-libraries-projects/build-a-drum-machine.md +++ b/curriculum/challenges/chinese-traditional/03-front-end-development-libraries/front-end-development-libraries-projects/build-a-drum-machine.md @@ -8,9 +8,9 @@ dashedName: build-a-drum-machine # --description-- -**目標：** 在 [CodePen.io](https://codepen.io) 上實現一個功能類似 的 App。 +**目標：** 構建一個應用，功能和 https://codepen.io/freeCodeCamp/full/MJyNMd 類似。 -在滿足以下 [需求](https://en.wikipedia.org/wiki/User_story) 並能通過所有測試的前提下， 賦予它你自己的個人風格。 +完成以下需求，並且通過所有測試。 可以使用你需要的任何庫或 API。 賦予它你自己的個人風格。 可以使用 HTML、JavaScript、CSS、Bootstrap、SASS、React、Redux、jQuery 來完成這個挑戰。 但鑑於這個章節的學習內容與前端框架相關，推薦使用一款前端框架（比如 React）來完成這個挑戰。 不推薦使用前面沒有提到的技術，否則風險自擔。 我們有計劃新增其他前端框架課程，例如 Angular 和 Vue，不過目前還沒有這些內容。 我們會接受並嘗試修復你在使用推薦技術棧創建項目時報告的問題。 編碼愉快！ @@ -28,9 +28,21 @@ dashedName: build-a-drum-machine **需求 7：** 當觸發一個具有 `.drum-pad` 屬性的元素時，`#display` 元素內應該展示這個觸發元素關聯音頻片段的描述字符串（每一個字符串都應該是獨一無二的）。 -你可以使用這個 CodePen 模板，點擊 `Save` 即可創建你自己的項目。 或者可以在任何喜歡的環境中使用以下 CDN 鏈接來運行測試：`https://cdn.freecodecamp.org/testable-projects-fcc/v1/bundle.js`。 +以下是一些可用於鼓機的音頻樣本： -當你完成了本項目，並且該項目所有測試運行通過，請提交項目的 URL。 +- [Heater 1](https://s3.amazonaws.com/freecodecamp/drums/Heater-1.mp3) +- [Heater 2](https://s3.amazonaws.com/freecodecamp/drums/Heater-2.mp3) +- [Heater 3](https://s3.amazonaws.com/freecodecamp/drums/Heater-3.mp3) +- [Heater 4](https://s3.amazonaws.com/freecodecamp/drums/Heater-4_1.mp3) +- [Clap](https://s3.amazonaws.com/freecodecamp/drums/Heater-6.mp3) +- [Open-HH](https://s3.amazonaws.com/freecodecamp/drums/Dsc_Oh.mp3) +- [Kick-n'-Hat](https://s3.amazonaws.com/freecodecamp/drums/Kick_n_Hat.mp3) +- [Kick](https://s3.amazonaws.com/freecodecamp/drums/RP4_KICK_1.mp3) +- [Closed-HH](https://s3.amazonaws.com/freecodecamp/drums/Cev_H2.mp3) + +你可以使用 CodePen 模版創建你的新項目，點擊 `Save` 即可創建你的新項目。 或者你可以在任何你喜歡的環境中使用以下 CDN 鏈接來運行測試：`https://cdn.freecodecamp.org/testable-projects-fcc/v1/bundle.js`。 + +當你完成了本項目，並且項目通過所有測試，請提交項目的 URL。 # --solutions-- diff --git a/curriculum/challenges/chinese-traditional/03-front-end-development-libraries/front-end-development-libraries-projects/build-a-javascript-calculator.md b/curriculum/challenges/chinese-traditional/03-front-end-development-libraries/front-end-development-libraries-projects/build-a-javascript-calculator.md index 65b4749bf79..e0de9e3ab07 100644 --- a/curriculum/challenges/chinese-traditional/03-front-end-development-libraries/front-end-development-libraries-projects/build-a-javascript-calculator.md +++ b/curriculum/challenges/chinese-traditional/03-front-end-development-libraries/front-end-development-libraries-projects/build-a-javascript-calculator.md @@ -8,9 +8,9 @@ dashedName: build-a-javascript-calculator # --description-- -**目標：** 在 [CodePen.io](https://codepen.io) 上實現一個功能類似 的 App。 +**目標：** 構建一個應用，功能和 https://codepen.io/freeCodeCamp/full/wgGVVX 類似。 -在滿足以下 [需求](https://en.wikipedia.org/wiki/User_story) 並能通過所有測試的前提下， 賦予它你自己的個人風格。 +完成以下需求，並且通過所有測試。 可以使用你需要的任何庫或 API。 賦予它你自己的個人風格。 可以使用 HTML、JavaScript、CSS、Bootstrap、SASS、React、Redux、jQuery 來完成這個挑戰。 但鑑於這個章節的學習內容與前端框架相關，推薦使用一款前端框架（比如 React）來完成這個挑戰；不推薦使用前面沒有提到的技術，否則風險自負。 不推薦使用前面沒有提到的技術，否則風險自擔。 我們有計劃新增其他前端框架課程，例如 Angular 和 Vue，不過目前還沒有這些內容。 我們會接受並嘗試修復你在使用推薦技術棧創建項目時報告的問題。 編碼愉快！ @@ -51,7 +51,7 @@ dashedName: build-a-javascript-calculator - **立即執行邏輯：** `11.5` - **公式／表達式邏輯：** `32.5` -你可以使用這個 CodePen 模板，點擊 `Save` 即可創建你自己的項目。 或者可以在任何喜歡的環境中使用以下 CDN 鏈接來運行測試：`https://cdn.freecodecamp.org/testable-projects-fcc/v1/bundle.js`。 +你可以使用 CodePen 模版創建你的新項目，點擊 `Save` 即可創建你的新項目。 或者可以在任何喜歡的環境中使用以下 CDN 鏈接來運行測試：`https://cdn.freecodecamp.org/testable-projects-fcc/v1/bundle.js`。 當你完成了本項目，並且該項目所有測試運行通過，請提交項目的 URL。 diff --git a/curriculum/challenges/chinese-traditional/03-front-end-development-libraries/front-end-development-libraries-projects/build-a-markdown-previewer.md b/curriculum/challenges/chinese-traditional/03-front-end-development-libraries/front-end-development-libraries-projects/build-a-markdown-previewer.md index 987d07e5130..8e235b6e320 100644 --- a/curriculum/challenges/chinese-traditional/03-front-end-development-libraries/front-end-development-libraries-projects/build-a-markdown-previewer.md +++ b/curriculum/challenges/chinese-traditional/03-front-end-development-libraries/front-end-development-libraries-projects/build-a-markdown-previewer.md @@ -8,9 +8,9 @@ dashedName: build-a-markdown-previewer # --description-- -**目標：** 在 [CodePen.io](https://codepen.io) 上實現一個功能類似 的 App。 +**目標：** 構建一個應用，功能和 https://codepen.io/freeCodeCamp/full/GrZVVO 類似。 -在滿足以下 [需求](https://en.wikipedia.org/wiki/User_story) 並能通過所有測試的前提下， 賦予它你自己的個人風格。 +完成以下需求，並且通過所有測試。 可以使用你需要的任何庫或 API。 賦予它你自己的個人風格。 可以使用 HTML、JavaScript、CSS、Bootstrap、SASS、React、Redux、jQuery 來完成這個挑戰。 但鑑於這個章節的學習內容與前端框架相關，推薦使用一款前端框架（比如 React）來完成這個挑戰；不推薦使用前面沒有提到的技術，否則風險自負。 不推薦使用前面沒有提到的技術，否則風險自擔。 我們有計劃新增其他前端框架課程，例如 Angular 和 Vue，不過目前還沒有這些內容。 我們會接受並嘗試修復你在使用推薦技術棧創建項目時報告的問題。 編碼愉快！ @@ -28,7 +28,7 @@ dashedName: build-a-markdown-previewer **可選需求（你無需通過這項測試）：** Markdown 預覽器能夠解析回車符並且將他們以 `br`（換行）元素的形式渲染出來。 -你可以使用這個 CodePen 模板，點擊 `Save` 即可創建你自己的項目。 或者可以在任何喜歡的環境中使用以下 CDN 鏈接來運行測試：`https://cdn.freecodecamp.org/testable-projects-fcc/v1/bundle.js`。 +你可以使用 CodePen 模版創建你的新項目，點擊 `Save` 即可創建你的新項目。 或者可以在任何喜歡的環境中使用以下 CDN 鏈接來運行測試：`https://cdn.freecodecamp.org/testable-projects-fcc/v1/bundle.js`。 當你完成了本項目，並且該項目所有測試運行通過，請提交項目的 URL。 diff --git a/curriculum/challenges/chinese-traditional/03-front-end-development-libraries/front-end-development-libraries-projects/build-a-random-quote-machine.md b/curriculum/challenges/chinese-traditional/03-front-end-development-libraries/front-end-development-libraries-projects/build-a-random-quote-machine.md index 27d44eb7638..ddd6da04890 100644 --- a/curriculum/challenges/chinese-traditional/03-front-end-development-libraries/front-end-development-libraries-projects/build-a-random-quote-machine.md +++ b/curriculum/challenges/chinese-traditional/03-front-end-development-libraries/front-end-development-libraries-projects/build-a-random-quote-machine.md @@ -8,9 +8,9 @@ dashedName: build-a-random-quote-machine # --description-- -**目標：** 在 [CodePen.io](https://codepen.io) 上實現一個功能類似 的 App。 +**目標：** 構建一個應用，功能和 https://codepen.io/freeCodeCamp/full/qRZeGZ 類似。 -在滿足以下 [需求](https://en.wikipedia.org/wiki/User_story) 並能通過所有測試的前提下， 賦予它你自己的個人風格。 +完成以下需求，並且通過所有測試。 可以使用你需要的任何庫或 API。 賦予它你自己的個人風格。 可以使用 HTML、JavaScript、CSS、Bootstrap、SASS、React、Redux、jQuery 來完成這個挑戰。 但鑑於這個章節的學習內容與前端框架相關，推薦使用一款前端框架（比如 React）來完成這個挑戰；不推薦使用前面沒有提到的技術，否則風險自負。 不推薦使用前面沒有提到的技術，否則風險自擔。 我們有計劃新增其他前端框架課程，例如 Angular 和 Vue，不過目前還沒有這些內容。 我們會接受並嘗試修復你在使用推薦技術棧創建項目時報告的問題。 編碼愉快！ @@ -36,7 +36,7 @@ dashedName: build-a-random-quote-machine **需求 11：** 具有 `#quote-box` 屬性的包裹元素應該水平居中。 請在瀏覽器縮放尺寸爲 100% 且頁面窗口最大化時運行測試。 -你可以使用這個 CodePen 模板，點擊 `Save` 創建即可你自己的項目 或者可以在任何喜歡的環境中使用以下 CDN 鏈接來運行測試：`https://cdn.freecodecamp.org/testable-projects-fcc/v1/bundle.js`。 +你可以使用 CodePen 模版創建你的新項目，點擊 `Save` 即可創建你的新項目。 或者可以在任何喜歡的環境中使用以下 CDN 鏈接來運行測試：`https://cdn.freecodecamp.org/testable-projects-fcc/v1/bundle.js`。 一旦完成了本項目並且該項目所有測試運行通過，請提交項目的 URL。 diff --git a/curriculum/challenges/chinese-traditional/03-front-end-development-libraries/jquery/change-text-inside-an-element-using-jquery.md b/curriculum/challenges/chinese-traditional/03-front-end-development-libraries/jquery/change-text-inside-an-element-using-jquery.md index de8862d3da3..8272ff2d54b 100644 --- a/curriculum/challenges/chinese-traditional/03-front-end-development-libraries/jquery/change-text-inside-an-element-using-jquery.md +++ b/curriculum/challenges/chinese-traditional/03-front-end-development-libraries/jquery/change-text-inside-an-element-using-jquery.md @@ -22,7 +22,7 @@ jQuery 還有一個類似的函數 `.text()`，可以在不添加標籤的前提 給 id 爲 `target4` 的按鈕的文本添加強調效果。 -查看這篇[關於 <em> 的文章](https://www.freecodecamp.org/news/html-elements-explained-what-are-html-tags/#em-element)來了解更多 `` 和 `` 的區別和用法。 +查看我們的專欄文章 <em>來了解 `` 和 `` 及其用途之間的差異。 注意，`` 標籤雖然傳統上用來強調文本，但此後常用作圖標的標籤。 `` 標籤作爲強調標籤現在已被廣泛接受。 可以使用任意一種完成這個挑戰。 diff --git a/curriculum/challenges/chinese-traditional/03-front-end-development-libraries/react-and-redux/moving-forward-from-here.md b/curriculum/challenges/chinese-traditional/03-front-end-development-libraries/react-and-redux/moving-forward-from-here.md index bc9322b7691..1b0d7faffd7 100644 --- a/curriculum/challenges/chinese-traditional/03-front-end-development-libraries/react-and-redux/moving-forward-from-here.md +++ b/curriculum/challenges/chinese-traditional/03-front-end-development-libraries/react-and-redux/moving-forward-from-here.md @@ -10,7 +10,7 @@ dashedName: moving-forward-from-here 恭喜！ 你完成了 React 和 Redux 的所有課程！ 結束之前，還要再提一點。 通常，我們不會在這樣的編輯器中編寫 React 應用代碼。 如果你在自己的計算機上使用 npm 和文件系統，這個挑戰可讓你一瞥 React 應用的語法之貌。 除了使用 `import` 語句（這些語句引入了各挑戰中提供的所有依賴關係），其代碼看起來類似。 “管理包（含 npm）”這一節更詳細地介紹了 npm。 -最後，寫 React 和 Redux 的代碼通常需要一些配置， 且很快會變得複雜起來。 如果你有興趣在自己的電腦上嘗試，Create React App 已配置好，並準備就緒。 +最後，寫 React 和 Redux 的代碼通常需要一些配置， 且很快會變得複雜起來。 如果你有興趣在自己的機器上進行實驗，Create React App 已配置好並準備就緒。 或者，你可以在 CodePen 中啓用 Babel 作爲 JavaScript 預處理器，將 React 和 ReactDOM 添加爲外部 JavaScript 資源，這樣編寫應用。 diff --git a/curriculum/challenges/chinese-traditional/03-front-end-development-libraries/react/create-a-stateful-component.md b/curriculum/challenges/chinese-traditional/03-front-end-development-libraries/react/create-a-stateful-component.md index 7fa9f8d6300..93a63b06790 100644 --- a/curriculum/challenges/chinese-traditional/03-front-end-development-libraries/react/create-a-stateful-component.md +++ b/curriculum/challenges/chinese-traditional/03-front-end-development-libraries/react/create-a-stateful-component.md @@ -22,7 +22,7 @@ this.state = { # --instructions-- -代碼編輯器中有一個組件試圖從其 `state` 中渲染一個 `name` 屬性， 但是 `state` 還沒有定義。 在 `constructor` 中使用 `state` 初始化組件，並將你的名字賦給 `name` 屬性。 +在代碼編輯器裏，有一個組件嘗試渲染 `state` 中的 `firstName` 屬性。 但是 `state` 還沒有定義。 在 `constructor` 中使用 `state` 初始化這個組件，並將你的名字賦值給 `firstName` 屬性。 # --hints-- @@ -55,7 +55,7 @@ assert( ); ``` -應使用被設置爲字符串的 `name` 屬性來初始化 `StatefulComponent` 的 state。 +`StatefulComponent` 中的 state 應該初始化爲被設置成字符串的 `firstName` 屬性。 ```js assert( @@ -65,13 +65,13 @@ assert( ); const initialState = mockedComponent.state(); return ( - typeof initialState === 'object' && typeof initialState.name === 'string' + typeof initialState === 'object' && typeof initialState.firstName === 'string' ); })() ); ``` -`StatefulComponent` 中 state 的 `name` 屬性應該渲染在 `h1` 元素裏。 +`StatefulComponent` 狀態中的屬性 `firstName` 應該呈現在 `h1` 元素中。 ```js assert( @@ -80,7 +80,7 @@ assert( React.createElement(StatefulComponent) ); const initialState = mockedComponent.state(); - return mockedComponent.find('h1').text() === initialState.name; + return mockedComponent.find('h1').text() === initialState.firstName; })() ); ``` @@ -106,7 +106,7 @@ class StatefulComponent extends React.Component { render() { return (
-

{this.state.name}

+

{this.state.firstName}

); } @@ -120,13 +120,13 @@ class StatefulComponent extends React.Component { constructor(props) { super(props); this.state = { - name: 'freeCodeCamp!' + firstName: 'freeCodeCamp!' } } render() { return (
-

{this.state.name}

+

{this.state.firstName}

); } diff --git a/curriculum/challenges/chinese-traditional/03-front-end-development-libraries/react/introducing-inline-styles.md b/curriculum/challenges/chinese-traditional/03-front-end-development-libraries/react/introducing-inline-styles.md index 9b204b832f1..2fbd5089c46 100644 --- a/curriculum/challenges/chinese-traditional/03-front-end-development-libraries/react/introducing-inline-styles.md +++ b/curriculum/challenges/chinese-traditional/03-front-end-development-libraries/react/introducing-inline-styles.md @@ -8,7 +8,7 @@ dashedName: introducing-inline-styles # --description-- -還有其他複雜的概念可以爲 React 代碼增加強大的功能。 但是，你可能會想知道更簡單的問題，比如：如何對在 React 中創建的 JSX 元素添加樣式。 你可能知道，由於[將 class 應用於 JSX 元素的方式](/learn/front-end-development-libraries/react/define-an-html-class-in-jsx)與 HTML 中的使用並不完全相同。 +還有其他複雜的概念可以爲 React 代碼增加強大的功能。 但是，你可能會想知道更簡單的問題，比如：如何對在 React 中創建的 JSX 元素添加樣式。 你可能知道，鑑於將 class 應用於 JSX 元素的方式，它與使用 HTML 並不完全相同。 如果從樣式表導入樣式，它就沒有太大的不同。 使用 `className` 屬性將 class 應用於 JSX 元素，並將樣式應用於樣式表中的 class。 另一種選擇是使用內聯樣式，這在 ReactJS 開發中非常常見。 diff --git a/curriculum/challenges/chinese-traditional/03-front-end-development-libraries/react/render-conditionally-from-props.md b/curriculum/challenges/chinese-traditional/03-front-end-development-libraries/react/render-conditionally-from-props.md index b5356f2e799..1eb485778cc 100644 --- a/curriculum/challenges/chinese-traditional/03-front-end-development-libraries/react/render-conditionally-from-props.md +++ b/curriculum/challenges/chinese-traditional/03-front-end-development-libraries/react/render-conditionally-from-props.md @@ -123,7 +123,7 @@ assert.strictEqual( })(); ``` -當 `GameOfChance` 組件第一次掛載到 DOM 上時，每次按鈕被點擊，都應該返回一個 `h1` 元素，元素中隨機渲染 `You Win!` 或者 `You Lose!`。 +當 `GameOfChance` 組件第一次掛載到 DOM 上時，每次按鈕被點擊，都應該返回一個 `h1` 元素，元素中隨機渲染 `You Win!` 或者 `You Lose!`。 注意：這有時可能會失敗。 如果發生這種情況，請再試一次。 ```js (() => { @@ -265,6 +265,11 @@ class GameOfChance extends React.Component { # --solutions-- ```jsx +// We want this to be deterministic for testing purposes. +const randomSequence = [true, false, false, true, true, false, false, true, true, false]; +let index = 0; +const fiftyFifty = () => randomSequence[index++ % randomSequence.length]; + class Results extends React.Component { constructor(props) { super(props); @@ -290,11 +295,10 @@ class GameOfChance extends React.Component { }); } render() { - const expression = Math.random() >= 0.5; return (
- +

{'Turn: ' + this.state.counter}

); diff --git a/curriculum/challenges/chinese-traditional/03-front-end-development-libraries/react/set-state-with-this.setstate.md b/curriculum/challenges/chinese-traditional/03-front-end-development-libraries/react/set-state-with-this.setstate.md index cefba480db4..3f4b3cd57e6 100644 --- a/curriculum/challenges/chinese-traditional/03-front-end-development-libraries/react/set-state-with-this.setstate.md +++ b/curriculum/challenges/chinese-traditional/03-front-end-development-libraries/react/set-state-with-this.setstate.md @@ -16,7 +16,7 @@ this.setState({ }); ``` -React 要求永遠不要直接修改 `state`，而是在 state 發生改變時始終使用 `this.setState()`。 此外，應該注意，React 可以批量處理多個 state 更新以提高性能。 這意味着通過 `setState` 方法進行的 state 更新可以是異步的。 `setState` 方法有一種替代語法可以解決異步問題， 雖然這很少用到，但是最好還是記住它！ 有關詳細信息，請參閱[React 文檔](https://reactjs.org/docs/state-and-lifecycle.html#state-updates-may-be-asynchronous)。 +React 要求永遠不要直接修改 `state`，而是在 state 發生改變時始終使用 `this.setState()`。 此外，應該注意，React 可以批量處理多個 state 更新以提高性能。 這意味着通過 `setState` 方法進行的 state 更新可以是異步的。 `setState` 方法有一種替代語法可以解決異步問題， 雖然這很少用到，但是最好還是記住它！ 請查閱我們的 React 文章瞭解更多詳情。 # --instructions-- diff --git a/curriculum/challenges/chinese-traditional/03-front-end-development-libraries/react/use-array.map-to-dynamically-render-elements.md b/curriculum/challenges/chinese-traditional/03-front-end-development-libraries/react/use-array.map-to-dynamically-render-elements.md index eaea122e00c..4a0f04a2dfc 100644 --- a/curriculum/challenges/chinese-traditional/03-front-end-development-libraries/react/use-array.map-to-dynamically-render-elements.md +++ b/curriculum/challenges/chinese-traditional/03-front-end-development-libraries/react/use-array.map-to-dynamically-render-elements.md @@ -16,7 +16,7 @@ dashedName: use-array-map-to-dynamically-render-elements 代碼編輯器完成了 `MyToDoList` 組件的大部分設置。 如果完成了受控表單挑戰，這些代碼中的一些應該看起來很熟悉。 你會注意到一個 `textarea` 和一個 `button`，以及一些跟蹤它們狀態的方法，但是頁面當前還沒有任何東西被渲染。 -在 `constructor` 中，創建一個 `this.state` 對象並定義兩個 state：`userInput` 應該初始化爲空字符串，`toDoList` 應該初始化爲空數組。 接下來，刪除 `items` 變量旁邊 `render()` 方法中的註釋。 取而代之的是，將存儲在組件內部 state 中的 `toDoList` 數組一一遍歷並相應的動態呈現 `li` 元素中。 嘗試在 `textarea` 中輸入 `eat, code, sleep, repeat`，然後點擊按鈕，看看會發生什麼。 +在 `constructor` 中，創建一個 `this.state` 對象並定義兩個 state：`userInput` 應該初始化爲空字符串，`toDoList` 應該初始化爲空數組。 接下來，在 `render()` 方法中刪除 `items` 變量的 `null` 值。 取而代之的是，將存儲在組件內部 state 中的 `toDoList` 數組一一遍歷並相應的動態呈現 `li` 元素中。 嘗試在 `textarea` 中輸入 `eat, code, sleep, repeat`，然後點擊按鈕，看看會發生什麼。 **注意：** 像這樣的映射操作創建的所有兄弟子元素都需要提供唯一的 `key` 屬性。 別擔心，這是下一個挑戰的主題。 diff --git a/curriculum/challenges/chinese-traditional/03-front-end-development-libraries/react/use-proptypes-to-define-the-props-you-expect.md b/curriculum/challenges/chinese-traditional/03-front-end-development-libraries/react/use-proptypes-to-define-the-props-you-expect.md index 5e1b6bc58d8..67d6b476687 100644 --- a/curriculum/challenges/chinese-traditional/03-front-end-development-libraries/react/use-proptypes-to-define-the-props-you-expect.md +++ b/curriculum/challenges/chinese-traditional/03-front-end-development-libraries/react/use-proptypes-to-define-the-props-you-expect.md @@ -16,7 +16,7 @@ React 提供了有用的類型檢查特性，以驗證組件是否接收了正 MyComponent.propTypes = { handleClick: PropTypes.func.isRequired } ``` -在上面的示例中，`PropTypes.func` 部分檢查 `handleClick` 是否爲函數。 添加 `isRequired`，告訴 React `handleClick` 是該組件的必需屬性。 如果沒有那個屬性，將出現警告。 還要注意 `func` 代表 `function` 。 在 7 種 JavaScript 原語類型中， `function` 和 `boolean` （寫爲 `bool` ）是唯一使用異常拼寫的兩種類型。 除了原始類型，還有其他類型可用。 例如，你可以檢查 prop 是否爲 React 元素。 請參閱[文檔](https://reactjs.org/docs/typechecking-with-proptypes.html#proptypes)以獲取所有選項。 +在上面的示例中，`PropTypes.func` 部分檢查 `handleClick` 是否爲函數。 添加 `isRequired`，告訴 React `handleClick` 是該組件的必需屬性。 如果沒有那個屬性，將出現警告。 還要注意 `func` 代表 `function` 。 在 7 種 JavaScript 原語類型中， `function` 和 `boolean` （寫爲 `bool` ）是唯一使用異常拼寫的兩種類型。 除了原始類型，還有其他類型可用。 例如，你可以檢查 prop 是否爲 React 元素。 請查看文檔以獲取所有選項。 **注意：**在 React v15.5.0 中, `PropTypes` 可以從 React 中單獨引入，例如：`import PropTypes from 'prop-types';`。 diff --git a/curriculum/challenges/chinese-traditional/03-front-end-development-libraries/react/use-the-lifecycle-method-componentwillmount.md b/curriculum/challenges/chinese-traditional/03-front-end-development-libraries/react/use-the-lifecycle-method-componentwillmount.md index 6497e7b459b..e449d448e48 100644 --- a/curriculum/challenges/chinese-traditional/03-front-end-development-libraries/react/use-the-lifecycle-method-componentwillmount.md +++ b/curriculum/challenges/chinese-traditional/03-front-end-development-libraries/react/use-the-lifecycle-method-componentwillmount.md @@ -10,7 +10,7 @@ dashedName: use-the-lifecycle-method-componentwillmount React 組件有幾種特殊方法，可以在組件生命週期的特定點執行操作。 這些稱爲生命週期方法或生命週期鉤子，允許在特定時間點捕獲組件。 這可以在渲染之前、更新之前、接收 props 之前、卸載之前等等。 以下是一些主要生命週期方法的列表： `componentWillMount()` `componentDidMount()` `shouldComponentUpdate()` `componentDidUpdate()` `componentWillUnmount()` 接下來的幾節課將講述這些生命週期方法的一些基本用例。 -**注意：** `componentWillMount` 生命週期方法會在版本 16.X 廢棄在版本 17 移除。 [(來源)](https://reactjs.org/blog/2018/03/27/update-on-async-rendering.html) +**注意：** `componentWillMount` 生命週期方法會在版本 16.X 廢棄在版本 17 移除。 在這篇文章中瞭解更多。 # --instructions-- diff --git a/curriculum/challenges/chinese-traditional/03-front-end-development-libraries/redux/create-a-redux-store.md b/curriculum/challenges/chinese-traditional/03-front-end-development-libraries/redux/create-a-redux-store.md index 5276d75dce0..75ff7ea7c7b 100644 --- a/curriculum/challenges/chinese-traditional/03-front-end-development-libraries/redux/create-a-redux-store.md +++ b/curriculum/challenges/chinese-traditional/03-front-end-development-libraries/redux/create-a-redux-store.md @@ -20,7 +20,7 @@ Redux `store` 是一個保存和管理應用程序狀態的`state`， 可以使 聲明一個 `store` 變量並把它分配給 `createStore()` 方法，然後把 `reducer` 作爲一個參數傳入即可。 -**注意**: 編輯器中的代碼使用 ES6 默認參數語法將 state 的值初始化爲 `5`， 如果你不熟悉默認參數，你可以參考[ES6 全部課程](https://learn.freecodecamp.org/javascript-algorithms-and-data-structures/es6/set-default-parameters-for-your-functions)，它裏面涵蓋了這個內容。 +**注意**: 編輯器中的代碼使用 ES6 默認參數語法將 state 的值初始化爲 `5`， 如果你不熟悉默認參數，可以參考 課程中的 ES6 部分，其中涵蓋了這個主題。 # --hints-- diff --git a/curriculum/challenges/chinese-traditional/04-data-visualization/json-apis-and-ajax/access-the-json-data-from-an-api.md b/curriculum/challenges/chinese-traditional/04-data-visualization/json-apis-and-ajax/access-the-json-data-from-an-api.md index 9bbde960f77..d644c3b6427 100644 --- a/curriculum/challenges/chinese-traditional/04-data-visualization/json-apis-and-ajax/access-the-json-data-from-an-api.md +++ b/curriculum/challenges/chinese-traditional/04-data-visualization/json-apis-and-ajax/access-the-json-data-from-an-api.md @@ -12,7 +12,7 @@ dashedName: access-the-json-data-from-an-api 現在，你將進一步觀察返回的數據，以更好地瞭解 JSON 格式。 回憶一下 JavaScript 中的一些符號： -
[ ] -> 方括號表示數組
{ } -> 大括號表示對象
" " -> 雙引號表示字符串， 它們還用於表示 JSON 中的鍵名
+
[ ] -> 方括號表示數組
{ } -> 大括號表示對象
" " -> 雙引號表示字符串。 它們還用於表示 JSON 中的鍵名。
理解 API 返回數據的結構是必需的，它將影響你如何獲取你所需的值。 diff --git a/curriculum/challenges/chinese-traditional/05-back-end-development-and-apis/back-end-development-and-apis-projects/exercise-tracker.md b/curriculum/challenges/chinese-traditional/05-back-end-development-and-apis/back-end-development-and-apis-projects/exercise-tracker.md index 808ea73f88a..16d1e157292 100644 --- a/curriculum/challenges/chinese-traditional/05-back-end-development-and-apis/back-end-development-and-apis-projects/exercise-tracker.md +++ b/curriculum/challenges/chinese-traditional/05-back-end-development-and-apis/back-end-development-and-apis-projects/exercise-tracker.md @@ -8,10 +8,10 @@ dashedName: exercise-tracker # --description-- -構建一個 JavaScript 的全棧應用，在功能上與這個應用相似： 。 在這個項目中，你將使用以下方法之一編寫你的代碼： +構建一個功能類似於此的全棧 JavaScript 應用：https://exercise-tracker.freecodecamp.rocks。 在這個項目中，你將使用以下方法之一編寫你的代碼： -- 克隆 [GitHub 倉庫](https://github.com/freeCodeCamp/boilerplate-project-exercisetracker/) 並在本地完成你的項目。 -- 使用[我們的 Replit 初始化項目](https://replit.com/github/freeCodeCamp/boilerplate-project-exercisetracker)來完成你的項目。 +- 克隆這個 GitHub 倉庫，並在本地完成你的項目。 +- 使用我們在 Replit 上的初始化項目來完成你的項目。 - 使用你選擇的網站生成器來完成項目。 需要包含我們 GitHub 倉庫的所有文件。 完成本項目後，請將一個正常運行的 demo（項目演示）託管在可以公開訪問的平臺。 然後在 `Solution Link` 字段中提交它的 URL。 此外，還可以將項目的源碼提交到 `GitHub Link` 中。 @@ -79,7 +79,7 @@ async (getUserInput) => { 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) + body: `username=fcc_test_${Date.now()}`.substring(0, 29) }); assert.isTrue(res.ok); if(!res.ok) { @@ -96,7 +96,7 @@ async (getUserInput) => { 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) + body: `username=fcc_test_${Date.now()}`.substring(0, 29) }); if (res.ok) { const { _id, username } = await res.json(); @@ -164,7 +164,7 @@ async (getUserInput) => { 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) + body: `username=fcc_test_${Date.now()}`.substring(0, 29) }); if (res.ok) { const { _id, username } = await res.json(); @@ -198,7 +198,7 @@ async (getUserInput) => { 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) + body: `username=fcc_test_${Date.now()}`.substring(0, 29) }); if (res.ok) { const { _id, username } = await res.json(); @@ -237,7 +237,7 @@ async (getUserInput) => { 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) + body: `username=fcc_test_${Date.now()}`.substring(0, 29) }); if (res.ok) { const { _id, username } = await res.json(); @@ -276,7 +276,7 @@ async (getUserInput) => { 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) + body: `username=fcc_test_${Date.now()}`.substring(0, 29) }); if (res.ok) { const { _id, username } = await res.json(); @@ -309,7 +309,7 @@ async (getUserInput) => { }; ``` -對 `/api/users/:id/logs` 的 `GET` 請求將返回用戶對象，其中包含添加的所有練習的 `log` 數組。 +對 `/api/users/:_id/logs` 的 `GET` 請求，將返回用戶對象，其中包含添加的所有練習的 `log` 數組。 ```js async(getUserInput) => { @@ -319,7 +319,7 @@ async(getUserInput) => { headers: { 'Content-Type': 'application/x-www-form-urlencoded' }, - body: `username=fcc_test_${Date.now()}`.substr(0, 29) + body: `username=fcc_test_${Date.now()}`.substring(0, 29) }) if(res.ok){ const {_id, username} = await res.json(); @@ -353,7 +353,7 @@ async(getUserInput) => { }; ``` -從 `GET /api/users/:id/logs` 返回的 `log` 數組中的每一項都是一個應該具有 `description` 的對象， `duration` 和 `date` 屬性。 +從 `GET /api/users/:_id/logs` 返回的 `log` 數組中的每個項目都是一個應該具有 `description`、`duration` 和 `date` 屬性的對象。 ```js async(getUserInput) => { @@ -363,7 +363,7 @@ async(getUserInput) => { headers: { 'Content-Type': 'application/x-www-form-urlencoded' }, - body: `username=fcc_test_${Date.now()}`.substr(0, 29) + body: `username=fcc_test_${Date.now()}`.substring(0, 29) }); if(res.ok) { const {_id, username} = await res.json(); @@ -400,7 +400,7 @@ async(getUserInput) => { }; ``` -從 `GET /api/users/:id/logs` 返回的 `log` 數組中任何對象的 `description` 屬性都應該是一個字符串。 +從 `GET /api/users/:_id/logs` 返回的 `log` 數組中任何對象的 `description` 屬性都應該是一個字符串。 ```js async(getUserInput) => { @@ -410,7 +410,7 @@ async(getUserInput) => { headers: { 'Content-Type': 'application/x-www-form-urlencoded', }, - body: `username=fcc_test_${Date.now()}`.substr(0,29) + body: `username=fcc_test_${Date.now()}`.substring(0,29) }); if(res.ok) { const {_id, username} = await res.json(); @@ -447,7 +447,7 @@ async(getUserInput) => { }; ``` -從 `GET /api/users/:id/logs` 返回的 `log` 數組中任何對象的 `duration` 屬性都應該是一個數字。 +從 `GET /api/users/:_id/logs` 返回的 `log` 數組中任何對象的 `duration` 屬性應該是一個數字。 ```js async(getUserInput) => { @@ -457,7 +457,7 @@ async(getUserInput) => { headers: { 'Content-Type': 'application/x-www-form-urlencoded', }, - body: `username=fcc_test_${Date.now()}`.substr(0,29) + body: `username=fcc_test_${Date.now()}`.substring(0,29) }); if(res.ok) { const {_id, username} = await res.json(); @@ -494,7 +494,7 @@ async(getUserInput) => { }; ``` -從 `GET /api/users/:id/logs` 返回的 `log` 數組中任何對象的 `date` 屬性應該是一個字符串。 使用 `Date` API 的 `dateString` 格式。 +從 `GET /api/users/:_id/logs` 返回的 `log` 數組中任何對象的 `date` 屬性應該是一個字符串。 使用 `Date` API 的 `dateString` 格式。 ```js async(getUserInput) => { @@ -504,7 +504,7 @@ async(getUserInput) => { headers: { 'Content-Type': 'application/x-www-form-urlencoded', }, - body: `username=fcc_test_${Date.now()}`.substr(0,29) + body: `username=fcc_test_${Date.now()}`.substring(0,29) }); if(res.ok) { const {_id, username} = await res.json(); @@ -549,7 +549,7 @@ async (getUserInput) => { 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) + body: `username=fcc_test_${Date.now()}`.substring(0, 29) }); if (res.ok) { const { _id, username } = await res.json(); diff --git a/curriculum/challenges/chinese-traditional/05-back-end-development-and-apis/back-end-development-and-apis-projects/file-metadata-microservice.md b/curriculum/challenges/chinese-traditional/05-back-end-development-and-apis/back-end-development-and-apis-projects/file-metadata-microservice.md index 6e5b037906d..9d882cbbbf4 100644 --- a/curriculum/challenges/chinese-traditional/05-back-end-development-and-apis/back-end-development-and-apis-projects/file-metadata-microservice.md +++ b/curriculum/challenges/chinese-traditional/05-back-end-development-and-apis/back-end-development-and-apis-projects/file-metadata-microservice.md @@ -8,10 +8,10 @@ dashedName: file-metadata-microservice # --description-- -構建一個 JavaScript 的全棧應用，在功能上與這個應用相似：。 在這個項目中，你將使用以下方法之一編寫你的代碼： +構建一個功能類似於此的全棧 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 倉庫，並在本地完成你的項目。 +- 使用我們在 Replit 上的初始化項目來完成你的項目。 - 使用你選擇的網站生成器來完成項目。 需要包含我們 GitHub 倉庫的所有文件。 完成本項目後，請將一個正常運行的 demo（項目演示）託管在可以公開訪問的平臺。 然後在 `Solution Link` 字段中提交它的 URL。 此外，還可以將項目的源碼提交到 `GitHub Link` 中。 diff --git a/curriculum/challenges/chinese-traditional/05-back-end-development-and-apis/back-end-development-and-apis-projects/request-header-parser-microservice.md b/curriculum/challenges/chinese-traditional/05-back-end-development-and-apis/back-end-development-and-apis-projects/request-header-parser-microservice.md index cf0680a488e..8b9c9e6f52a 100644 --- a/curriculum/challenges/chinese-traditional/05-back-end-development-and-apis/back-end-development-and-apis-projects/request-header-parser-microservice.md +++ b/curriculum/challenges/chinese-traditional/05-back-end-development-and-apis/back-end-development-and-apis-projects/request-header-parser-microservice.md @@ -8,10 +8,10 @@ dashedName: request-header-parser-microservice # --description-- -構建一個 JavaScript 的全棧應用，在功能上與這個應用相似：。 在這個項目中，你將使用以下方法之一編寫你的代碼： +構建一個 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 倉庫，並在本地完成你的項目。 +- 使用我們在 Replit 上的初始化項目來完成你的項目。 - 使用你選擇的網站生成器來完成項目。 需要包含我們 GitHub 倉庫的所有文件。 完成本項目後，請將一個正常運行的 demo（項目演示）託管在可以公開訪問的平臺。 然後在 `Solution Link` 字段中提交它的 URL。 此外，還可以將項目的源碼提交到 `GitHub Link` 中。 diff --git a/curriculum/challenges/chinese-traditional/05-back-end-development-and-apis/back-end-development-and-apis-projects/timestamp-microservice.md b/curriculum/challenges/chinese-traditional/05-back-end-development-and-apis/back-end-development-and-apis-projects/timestamp-microservice.md index 22f4ccb9f7c..abf73decfcc 100644 --- a/curriculum/challenges/chinese-traditional/05-back-end-development-and-apis/back-end-development-and-apis-projects/timestamp-microservice.md +++ b/curriculum/challenges/chinese-traditional/05-back-end-development-and-apis/back-end-development-and-apis-projects/timestamp-microservice.md @@ -8,10 +8,10 @@ dashedName: timestamp-microservice # --description-- -構建一個 JavaScript 的全棧應用，在功能上與這個應用相似：。 在這個項目中，你將使用以下方法之一編寫你的代碼： +構建一個功能類似於此的全棧 JavaScript 應用程序：https://timestamp-microservice.freecodecamp.rocks。 在這個項目中，你將使用以下方法之一編寫你的代碼： -- 克隆 [這個 GitHub 倉庫](https://github.com/freeCodeCamp/boilerplate-project-timestamp/) 並在本地完成項目。 -- 使用[我們的 Replit 初始化項目](https://replit.com/github/freeCodeCamp/boilerplate-project-timestamp)來完成你的項目。 +- 克隆這個 GitHub 倉庫，並在本地完成你的項目。 +- 使用我們在 Replit 上的初始化項目來完成你的項目。 - 使用你選擇的網站生成器來完成項目。 需要包含我們 GitHub 倉庫的所有文件。 完成本項目後，請將一個正常運行的 demo（項目演示）託管在可以公開訪問的平臺。 然後在 `Solution Link` 字段中提交它的 URL。 此外，還可以將項目的源碼提交到 `GitHub Link` 中。 diff --git a/curriculum/challenges/chinese-traditional/05-back-end-development-and-apis/back-end-development-and-apis-projects/url-shortener-microservice.md b/curriculum/challenges/chinese-traditional/05-back-end-development-and-apis/back-end-development-and-apis-projects/url-shortener-microservice.md index d9d39544e51..42b9b31e35e 100644 --- a/curriculum/challenges/chinese-traditional/05-back-end-development-and-apis/back-end-development-and-apis-projects/url-shortener-microservice.md +++ b/curriculum/challenges/chinese-traditional/05-back-end-development-and-apis/back-end-development-and-apis-projects/url-shortener-microservice.md @@ -8,10 +8,10 @@ dashedName: url-shortener-microservice # --description-- -構建一個 JavaScript 的全棧應用，在功能上與這個應用相似：。 在這個項目中，你將使用以下方法之一編寫你的代碼： +構建一個功能類似於此的全棧 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 倉庫，並在本地完成你的項目。 +- 使用我們在 Replit 上的初始化項目來完成你的項目。 - 使用你選擇的網站生成器來完成項目。 需要包含我們 GitHub 倉庫的所有文件。 完成本項目後，請將一個正常運行的 demo（項目演示）託管在可以公開訪問的平臺。 然後在 `Solution Link` 字段中提交它的 URL。 此外，還可以將項目的源碼提交到 `GitHub Link` 中。 diff --git a/curriculum/challenges/chinese-traditional/05-back-end-development-and-apis/basic-node-and-express/chain-middleware-to-create-a-time-server.md b/curriculum/challenges/chinese-traditional/05-back-end-development-and-apis/basic-node-and-express/chain-middleware-to-create-a-time-server.md index 0e7842eb0cf..a77dad6420e 100644 --- a/curriculum/challenges/chinese-traditional/05-back-end-development-and-apis/basic-node-and-express/chain-middleware-to-create-a-time-server.md +++ b/curriculum/challenges/chinese-traditional/05-back-end-development-and-apis/basic-node-and-express/chain-middleware-to-create-a-time-server.md @@ -8,7 +8,7 @@ dashedName: chain-middleware-to-create-a-time-server # --description-- -使用 `app.METHOD(path, middlewareFunction)` 可以在指定的路由掛載中間件， 也可以在路由定義中鏈式調用中間件。 +使用 `app.METHOD(path, middlewareFunction)` 可以在指定的路由掛載中間件， 中間件也可以鏈接在路由定義中。 請看以下示例： @@ -49,7 +49,7 @@ app.get('/user', function(req, res, next) { ); ``` -/now 接口應該返回一個現在時間 +/-20 秒的時間 +`/now` 端點應該返回當前時間。 ```js (getUserInput) => diff --git a/curriculum/challenges/chinese-traditional/05-back-end-development-and-apis/basic-node-and-express/meet-the-node-console.md b/curriculum/challenges/chinese-traditional/05-back-end-development-and-apis/basic-node-and-express/meet-the-node-console.md index d088c0c0d8c..0d9a5348f5d 100644 --- a/curriculum/challenges/chinese-traditional/05-back-end-development-and-apis/basic-node-and-express/meet-the-node-console.md +++ b/curriculum/challenges/chinese-traditional/05-back-end-development-and-apis/basic-node-and-express/meet-the-node-console.md @@ -10,8 +10,8 @@ dashedName: meet-the-node-console 你可以採用下面的任意一種編寫代碼的方式來完成這些挑戰： -- 克隆 [這個 GitHub 倉庫](https://github.com/freeCodeCamp/boilerplate-express/) 並在本地完成項目。 -- 使用[我們的 Repl.it 上的初始化項目](https://replit.com/github/freeCodeCamp/boilerplate-express)來完成項目。 +- 克隆這個 GitHub 倉庫，並在本地完成這些挑戰。 +- 使用我們在 Replit 上的初始化項目來完成這些挑戰。 - 使用你選擇的網站生成器來完成項目。 需要包含我們 GitHub 倉庫的所有文件。 完成本項目後，請將一個正常運行的 demo（項目演示）託管在可以公開訪問的平臺。 然後在 `Solution Link` 字段中提交它的 URL。 diff --git a/curriculum/challenges/chinese-traditional/05-back-end-development-and-apis/basic-node-and-express/use-body-parser-to-parse-post-requests.md b/curriculum/challenges/chinese-traditional/05-back-end-development-and-apis/basic-node-and-express/use-body-parser-to-parse-post-requests.md index 7770023e2d5..c712f668f33 100644 --- a/curriculum/challenges/chinese-traditional/05-back-end-development-and-apis/basic-node-and-express/use-body-parser-to-parse-post-requests.md +++ b/curriculum/challenges/chinese-traditional/05-back-end-development-and-apis/basic-node-and-express/use-body-parser-to-parse-post-requests.md @@ -22,11 +22,11 @@ Content-Length: 20 name=John+Doe&age=25 ``` -正如你所看到的，正文被編碼成類似查詢字符串的形式， 這是 HTML 表單使用的默認格式。 我們還可以通過 Ajax 使用 JSON 來處理具有更復雜結構的數據。 還有另一種類型的編碼：multipart/form-data， 它被用來上傳二進制文件。 在本練習中，我們將使用 URL 編碼請求正文。 要解析來自 POST 請求的數據，你必須安裝 `body-parser` 包， 這個包包含一套可以解碼不同格式數據的中間件。 +正如你所看到的，正文被編碼成類似查詢字符串的形式， 這是 HTML 表單使用的默認格式。 我們還可以通過 Ajax 使用 JSON 來處理具有更復雜結構的數據。 還有另一種類型的編碼：multipart/form-data， 它被用來上傳二進制文件。 在本練習中，你將使用 URL 編碼的正文。 要解析來自 POST 請求的數據，你必須使用 `body-parser` 包。 這個包包含一套可以解碼不同格式數據的中間件。 # --instructions-- -在 `package.json` 中安裝 `body-parser` 模塊， 然後在文件頂部 `require` 進來， 用變量 `bodyParser` 保存它。 通過中間件的 `bodyParser.urlencoded({extended: false})` 方法處理 URL 編碼數據， 將通過先前的方法調用返回的函數傳遞到 `app.use()`。 中間件通常掛載在所有需要它的路由之前。 +`body-parser` 已經安裝並且在你項目的 `package.json` 文件中。 在 `myApp.js` 文件的頂部包含（`require`）它，並將其存儲在名爲 `bodyParser` 的變量中。 `bodyParser.urlencoded({extended: false})` 返回處理 URL 編碼數據的中間件。 將上一個方法調用返回的函數傳遞給 `app.use()`。 像往常一樣，中間件必須在所有依賴它的路由之前安裝。 **注意：** `extended` 是一個配置選項, 告訴 `body-parser` 需要使用哪個解析。 當 `extended=false` 時，它使用經典編碼 `querystring` 庫。 當 `extended=true`時，它使用 `qs` 庫進行解析。 diff --git a/curriculum/challenges/chinese-traditional/05-back-end-development-and-apis/basic-node-and-express/use-the-.env-file.md b/curriculum/challenges/chinese-traditional/05-back-end-development-and-apis/basic-node-and-express/use-the-.env-file.md index 2ef09523481..94f0b77feef 100644 --- a/curriculum/challenges/chinese-traditional/05-back-end-development-and-apis/basic-node-and-express/use-the-.env-file.md +++ b/curriculum/challenges/chinese-traditional/05-back-end-development-and-apis/basic-node-and-express/use-the-.env-file.md @@ -18,11 +18,11 @@ dashedName: use-the--env-file 在項目根目錄創建一個 `.env` 文件，並存儲變量 `MESSAGE_STYLE=uppercase`。 -當向 `/json` 發 GET 請求時，如果 `process.env.MESSAGE_STYLE` 的值爲 `uppercase`，那麼上一次挑戰中的路由處理程序返回的對象的消息則應該大寫。 響應對象應該是 `{"message": "Hello json"}` or `{"message": "HELLO JSON"}`，取決於 `MESSAGE_STYLE` 的值。 +然後，在你在上個挑戰中創建的 `/json` GET 路由處理程序中訪問 `process.env.MESSAGE_STYLE`，並且如果變量等於 `uppercase`，將響應對象的 `message` 轉換爲大寫。 響應對象應該是 `{"message": "Hello json"}` or `{"message": "HELLO JSON"}`，取決於 `MESSAGE_STYLE` 的值。 **注意：** 如果你正在使用 Replit，你無法創建一個 `.env` 文件。 相反，使用內置的 SECRETS 標籤添加變量。 -如果你在本地工作，你將需要 `dotenv` 包。 它將環境變量從你的 `.env` 文件加載到 `process.env` 中。 使用 `npm install dotenv` 安裝它。 然後，在 `myApp.js` 文件的頂部，使用 `require('dotenv').config()` 導入和加載變量。 +如果你在本地工作，你將需要 `dotenv` 包。 它將環境變量從你的 `.env` 文件加載到 `process.env` 中。 `dotenv` 包已經安裝，並且在你項目的 `package.json` 文件中。 在 `myApp.js` 文件的頂部，使用 `require('dotenv').config()` 導入並加載變量。 # --hints-- diff --git a/curriculum/challenges/chinese-traditional/05-back-end-development-and-apis/managing-packages-with-npm/expand-your-project-with-external-packages-from-npm.md b/curriculum/challenges/chinese-traditional/05-back-end-development-and-apis/managing-packages-with-npm/expand-your-project-with-external-packages-from-npm.md index 9d2c43c7e01..4a7cc9a47d6 100644 --- a/curriculum/challenges/chinese-traditional/05-back-end-development-and-apis/managing-packages-with-npm/expand-your-project-with-external-packages-from-npm.md +++ b/curriculum/challenges/chinese-traditional/05-back-end-development-and-apis/managing-packages-with-npm/expand-your-project-with-external-packages-from-npm.md @@ -22,13 +22,13 @@ dashedName: expand-your-project-with-external-packages-from-npm # --instructions-- -在 package.json 文件的 `dependencies` 字段中添加一個版本號爲“2.14.0”的“moment”包。 +將 `@freecodecamp/example` 包的版本 “1.1.0” 添加到 `package.json` 文件的 `dependencies` 字段。 -**注意：** Moment 是一個非常方便地用來處理時間和日期的庫。 +**注意：** `@freecodecamp/example` 是一個用作學習工具的仿包。 # --hints-- -“dependencies”字段應該包含“moment” +`"dependencies"` 應包括 `"@freecodecamp/example"`。 ```js (getUserInput) => @@ -37,8 +37,8 @@ dashedName: expand-your-project-with-external-packages-from-npm var packJson = JSON.parse(data); assert.property( packJson.dependencies, - 'moment', - '"dependencies" does not include "moment"' + '@freecodecamp/example', + '"dependencies" does not include "@freecodecamp/example"' ); }, (xhr) => { @@ -47,7 +47,7 @@ dashedName: expand-your-project-with-external-packages-from-npm ); ``` -“moment”的版本應該是“2.14.0” +`"@freecodecamp/example"` 版本應爲 `"1.1.0"`。 ```js (getUserInput) => @@ -55,9 +55,9 @@ dashedName: expand-your-project-with-external-packages-from-npm (data) => { var packJson = JSON.parse(data); assert.match( - packJson.dependencies.moment, - /^[\^\~]?2\.14\.0/, - 'Wrong version of "moment" installed. It should be 2.14.0' + packJson.dependencies["@freecodecamp/example"], + /^[\^\~]?1\.1\.0/, + 'Wrong version of "@freecodecamp/example" installed. It should be 1.1.0' ); }, (xhr) => { diff --git a/curriculum/challenges/chinese-traditional/05-back-end-development-and-apis/managing-packages-with-npm/how-to-use-package.json-the-core-of-any-node.js-project-or-npm-package.md b/curriculum/challenges/chinese-traditional/05-back-end-development-and-apis/managing-packages-with-npm/how-to-use-package.json-the-core-of-any-node.js-project-or-npm-package.md index 3d4cda93da2..7a720a0a7b7 100644 --- a/curriculum/challenges/chinese-traditional/05-back-end-development-and-apis/managing-packages-with-npm/how-to-use-package.json-the-core-of-any-node.js-project-or-npm-package.md +++ b/curriculum/challenges/chinese-traditional/05-back-end-development-and-apis/managing-packages-with-npm/how-to-use-package.json-the-core-of-any-node.js-project-or-npm-package.md @@ -10,11 +10,11 @@ dashedName: how-to-use-package-json-the-core-of-any-node-js-project-or-npm-packa 你可以採用下面的任意一種編寫代碼的方式來完成這些挑戰： -- 克隆 [GitHub repo](https://github.com/freeCodeCamp/boilerplate-npm/) 並在本地完成項目。 -- 使用[我們的 Replit 上的初始化項目](https://replit.com/github/freeCodeCamp/boilerplate-npm)來完成項目。 +- 克隆這個 GitHub 倉庫，並在本地完成這些挑戰。 +- 使用我們在 Replit 上的初始化項目來完成這些挑戰。 - 使用你選擇的網站生成器來完成項目。 需要包含我們 GitHub 倉庫的所有文件。 -完成本項目後，請將一個正常運行的 demo（項目演示）託管在可以公開訪問的平臺。 然後在 `Solution Link` 字段中提交它的 URL。 此外，還可以將項目的源碼提交到 `GitHub Link` 中。 +完成本項目後，請將一個正常運行的 demo（項目演示）託管在可以公開訪問的平臺。 然後在 `Solution Link` 字段中提交它的 URL。 `package.json` 文件是所有 Node.js 項目和 npm 包的樞紐， 和 HTML 文檔中的 <head> 區域用來描述網頁的配置信息（元數據）一樣，它存儲項目的相關信息。 它由單個 JSON 對象組成，並以鍵值對的形式存儲項目信息， 且至少包含兩個必填字段：“name”和“version”——但是最好提供有關項目的其他信息，這將對用戶或者維護者有所幫助。 diff --git a/curriculum/challenges/chinese-traditional/05-back-end-development-and-apis/managing-packages-with-npm/manage-npm-dependencies-by-understanding-semantic-versioning.md b/curriculum/challenges/chinese-traditional/05-back-end-development-and-apis/managing-packages-with-npm/manage-npm-dependencies-by-understanding-semantic-versioning.md index 30ffb8a9933..b715e6361ad 100644 --- a/curriculum/challenges/chinese-traditional/05-back-end-development-and-apis/managing-packages-with-npm/manage-npm-dependencies-by-understanding-semantic-versioning.md +++ b/curriculum/challenges/chinese-traditional/05-back-end-development-and-apis/managing-packages-with-npm/manage-npm-dependencies-by-understanding-semantic-versioning.md @@ -20,11 +20,11 @@ dashedName: manage-npm-dependencies-by-understanding-semantic-versioning # --instructions-- -在 package.json 文件的依賴項中，修改 moment 的`version`，讓它的主版本是 2，次版本號是 10，修訂號是 2。 +在 `package.json` 文件的依賴項部分，更改 `@freecodecamp/example` 的版本以匹配 MAJOR 版本爲 1、MINOR 版本爲 2 和 PATCH 版本爲 13 # --hints-- -“dependencies”字段應該包含“moment” +`"dependencies"` 應包括 `"@freecodecamp/example"`。 ```js (getUserInput) => @@ -33,8 +33,8 @@ dashedName: manage-npm-dependencies-by-understanding-semantic-versioning var packJson = JSON.parse(data); assert.property( packJson.dependencies, - 'moment', - '"dependencies" does not include "moment"' + '@freecodecamp/example', + '"dependencies" does not include "@freecodecamp/example"' ); }, (xhr) => { @@ -43,7 +43,7 @@ dashedName: manage-npm-dependencies-by-understanding-semantic-versioning ); ``` -“moment”的版本號應該是“2.10.2” +`"@freecodecamp/example"` 版本應爲 `"1.2.13"`。 ```js (getUserInput) => @@ -51,9 +51,9 @@ dashedName: manage-npm-dependencies-by-understanding-semantic-versioning (data) => { var packJson = JSON.parse(data); assert.equal( - packJson.dependencies.moment, - '2.10.2', - 'Wrong version of "moment". It should be 2.10.2' + packJson.dependencies["@freecodecamp/example"], + '1.2.13', + 'Wrong version of "@freecodecamp/example". It should be 1.2.13' ); }, (xhr) => { diff --git a/curriculum/challenges/chinese-traditional/05-back-end-development-and-apis/managing-packages-with-npm/remove-a-package-from-your-dependencies.md b/curriculum/challenges/chinese-traditional/05-back-end-development-and-apis/managing-packages-with-npm/remove-a-package-from-your-dependencies.md index c8573b6a802..93b24be7d59 100644 --- a/curriculum/challenges/chinese-traditional/05-back-end-development-and-apis/managing-packages-with-npm/remove-a-package-from-your-dependencies.md +++ b/curriculum/challenges/chinese-traditional/05-back-end-development-and-apis/managing-packages-with-npm/remove-a-package-from-your-dependencies.md @@ -12,17 +12,17 @@ dashedName: remove-a-package-from-your-dependencies 但是，如果想要刪除不再需要的依賴包，該怎麼辦呢？ 可能已經猜到了——只需要從依賴項中刪除相應的鍵值對就行了。 -同樣的方法也適用於刪除 package.json 中的其它字段。 +同樣的方法也適用於刪除 package.json 中的其他字段。 # --instructions-- -從依賴項中刪除 moment 依賴包。 +從依賴項中刪除 `@freecodecamp/example` 包。 **注意：**刪除依賴包後，確保逗號數量正確。 # --hints-- -“dependencies”字段不包含“moment”。 +`"dependencies"` 不應包含 `"@freecodecamp/example"`。 ```js (getUserInput) => @@ -31,8 +31,8 @@ dashedName: remove-a-package-from-your-dependencies var packJson = JSON.parse(data); assert.notProperty( packJson.dependencies, - 'moment', - '"dependencies" still includes "moment"' + '@freecodecamp/example', + '"dependencies" still includes "@freecodecamp/example"' ); }, (xhr) => { diff --git a/curriculum/challenges/chinese-traditional/05-back-end-development-and-apis/managing-packages-with-npm/use-the-caret-character-to-use-the-latest-minor-version-of-a-dependency.md b/curriculum/challenges/chinese-traditional/05-back-end-development-and-apis/managing-packages-with-npm/use-the-caret-character-to-use-the-latest-minor-version-of-a-dependency.md index 46e0d795a5d..32ed7933258 100644 --- a/curriculum/challenges/chinese-traditional/05-back-end-development-and-apis/managing-packages-with-npm/use-the-caret-character-to-use-the-latest-minor-version-of-a-dependency.md +++ b/curriculum/challenges/chinese-traditional/05-back-end-development-and-apis/managing-packages-with-npm/use-the-caret-character-to-use-the-latest-minor-version-of-a-dependency.md @@ -10,7 +10,7 @@ dashedName: use-the-caret-character-to-use-the-latest-minor-version-of-a-depende 和上一個挑戰中我們學到的用波浪號來安裝最新的修訂版依賴一樣，脫字符（`^`）也允許 npm 來安裝功能更新。 它們的不同之處在於：脫字符允許次版本和修訂版更新。 -現在項目中的 moment 依賴包的版本應該是“~2.10.2”，這意味着 npm 可以安裝最新的 2.10.x 版的 moment， 如果使用脫字符（^）來替換版本號的前綴，那麼 npm 可以將 moment 升級安裝到任何 2.x.x 的版本。 +你當前的 `@freecodecamp/example` 版本應該是“~1.2.13”，它允許 npm 安裝到最新的 1.2.x 版本。 如果使用插入符號（^）作爲版本前綴，npm 將被允許更新到任何 1.x.x 版本。 ```json "package": "^1.3.8" @@ -20,13 +20,13 @@ dashedName: use-the-caret-character-to-use-the-latest-minor-version-of-a-depende # --instructions-- -在依賴項中，使用脫字符（`^`）爲 moment 的版本添加前綴，允許 npm 更新依賴包到任意新的次版本。 +使用插入符號（`^`）爲依賴項中的 `@freecodecamp/example` 版本添加前綴，並允許 npm 將其更新到任何新的 MINOR 版本。 **注意：** 原來的版本號不用更改。 # --hints-- -“dependencies”字段中應包含“moment” +`"dependencies"` 應包括 `"@freecodecamp/example"`。 ```js (getUserInput) => @@ -35,8 +35,8 @@ dashedName: use-the-caret-character-to-use-the-latest-minor-version-of-a-depende var packJson = JSON.parse(data); assert.property( packJson.dependencies, - 'moment', - '"dependencies" does not include "moment"' + '@freecodecamp/example', + '"dependencies" does not include "@freecodecamp/example"' ); }, (xhr) => { @@ -45,7 +45,7 @@ dashedName: use-the-caret-character-to-use-the-latest-minor-version-of-a-depende ); ``` -“moment”的版本應是“^2.x.x” +`"@freecodecamp/example"` 版本應匹配 `"^1.x.x"`。 ```js (getUserInput) => @@ -53,9 +53,9 @@ dashedName: use-the-caret-character-to-use-the-latest-minor-version-of-a-depende (data) => { var packJson = JSON.parse(data); assert.match( - packJson.dependencies.moment, - /^\^2\./, - 'Wrong version of "moment". It should be ^2.10.2' + packJson.dependencies["@freecodecamp/example"], + /^\^1\./, + 'Wrong version of "@freecodecamp/example". It should be ^1.2.13' ); }, (xhr) => { diff --git a/curriculum/challenges/chinese-traditional/05-back-end-development-and-apis/managing-packages-with-npm/use-the-tilde-character-to-always-use-the-latest-patch-version-of-a-dependency.md b/curriculum/challenges/chinese-traditional/05-back-end-development-and-apis/managing-packages-with-npm/use-the-tilde-character-to-always-use-the-latest-patch-version-of-a-dependency.md index a04432549c9..12cfe8f90cb 100644 --- a/curriculum/challenges/chinese-traditional/05-back-end-development-and-apis/managing-packages-with-npm/use-the-tilde-character-to-always-use-the-latest-patch-version-of-a-dependency.md +++ b/curriculum/challenges/chinese-traditional/05-back-end-development-and-apis/managing-packages-with-npm/use-the-tilde-character-to-always-use-the-latest-patch-version-of-a-dependency.md @@ -18,15 +18,15 @@ dashedName: use-the-tilde-character-to-always-use-the-latest-patch-version-of-a- # --instructions-- -在 package.json 文件中，當前規則是 npm 將 moment 升級到特定版本（2.10.2）。 但是現在，要允許使用最新的 2.10.x 版本。 +在 package.json 文件中，你當前關於 npm 如何升級 `@freecodecamp/example` 的規則是使用特定版本（1.2.13）。 但現在，你想允許最新的 1.2.x 版本。 -在依賴項中，給 moment 的版本號添加波浪號（`~`）前綴，允許 npm 將其更新爲最新的修訂版。 +在依賴項中使用波浪號（`~`）字符作爲 `@freecodecamp/example` 版本的前綴，並允許 npm 將其更新爲任何新的*補丁*發佈。 **注意：**原來的版本號不用更改。 # --hints-- -“dependencies”字段中應包含“moment” +`"dependencies"` 應包括 `"@freecodecamp/example"`。 ```js (getUserInput) => @@ -35,8 +35,8 @@ dashedName: use-the-tilde-character-to-always-use-the-latest-patch-version-of-a- var packJson = JSON.parse(data); assert.property( packJson.dependencies, - 'moment', - '"dependencies" does not include "moment"' + '@freecodecamp/example', + '"dependencies" does not include "@freecodecamp/example"' ); }, (xhr) => { @@ -45,7 +45,7 @@ dashedName: use-the-tilde-character-to-always-use-the-latest-patch-version-of-a- ); ``` -“moment”的版本號應該是“~2.10.2” +`"@freecodecamp/example"` 版本應匹配 `"~1.2.13"`。 ```js (getUserInput) => @@ -53,9 +53,9 @@ dashedName: use-the-tilde-character-to-always-use-the-latest-patch-version-of-a- (data) => { var packJson = JSON.parse(data); assert.match( - packJson.dependencies.moment, - /^\~2\.10\.2/, - 'Wrong version of "moment". It should be ~2.10.2' + packJson.dependencies["@freecodecamp/example"], + /^\~1\.2\.13/, + 'Wrong version of "@freecodecamp/example". It should be ~1.2.13' ); }, (xhr) => { diff --git a/curriculum/challenges/chinese-traditional/05-back-end-development-and-apis/mongodb-and-mongoose/install-and-set-up-mongoose.md b/curriculum/challenges/chinese-traditional/05-back-end-development-and-apis/mongodb-and-mongoose/install-and-set-up-mongoose.md index 4c3ef699124..5c0db54d951 100644 --- a/curriculum/challenges/chinese-traditional/05-back-end-development-and-apis/mongodb-and-mongoose/install-and-set-up-mongoose.md +++ b/curriculum/challenges/chinese-traditional/05-back-end-development-and-apis/mongodb-and-mongoose/install-and-set-up-mongoose.md @@ -10,19 +10,23 @@ dashedName: install-and-set-up-mongoose 你可以採用下面的任意一種編寫代碼的方式來完成這些挑戰： -- 克隆 [這個 GitHub 倉庫](https://github.com/freeCodeCamp/boilerplate-mongomongoose/) 並在本地完成項目。 -- 使用[我們的 Replit 上的初始化項目](https://replit.com/github/freeCodeCamp/boilerplate-mongomongoose)來完成項目。 +- 克隆這個 GitHub 倉庫，並在本地完成這些挑戰。 +- 使用我們在 Replit 上的初始化項目來完成這些挑戰。 - 使用你選擇的網站生成器來完成項目。 需要包含我們 GitHub 倉庫的所有文件。 完成本項目後，請將一個正常運行的 demo（項目演示）託管在可以公開訪問的平臺。 然後在 `Solution Link` 字段中提交它的 URL。 在這個挑戰中，你將建立一個 MongoDB Atlas 數據庫並導入連接到它所需的軟件包。 -按照這篇教程在 MongoDB Atlas 創建一個託管數據庫。 +按照這篇教程在 MongoDB Atlas 創建一個託管數據庫。 # --instructions-- -將 `mongodb@~3.6.0` 和 `mongoose@~5.4.0` 添加到項目的 `package.json` 中。 然後，在 `myApp.js` 文件中請求 `mongoose`。 創建一個 `.env` 文件，給它添加一個 `MONGO_URI` 變量。 變量的值爲你的 MongoDB Atlas 數據庫 URI。 應用單引號或雙引號包裹 URI。請記住，環境變量 `=` 兩邊不能有空格。 例如，`MONGO_URI='VALUE'`。 完成後，使用下面的代碼來連接數據庫。 +`mongoose@^5.11.15` 已添加到你項目的 `package.json` 文件中。 首先，在 `myApp.js` 中請求 mongoose 爲 `mongoose`。 接下來，創建一個 `.env` 文件並向其中添加一個 `MONGO_URI` 變量。 變量的值爲你的 MongoDB Atlas 數據庫 URI。 應用單引號或雙引號包裹 URI。請記住，環境變量 `=` 兩邊不能有空格。 例如，`MONGO_URI='VALUE'`。 + +**注意：** 如果你使用的是 Replit，則無法創建 `.env` 文件。 相反，使用內置的 SECRETS 選項卡來添加變量。 在使用 SECRETS 選項卡時，不要將值括在引號中。 + +完成後，使用以下語法連接到數據庫： ```js mongoose.connect(, { useNewUrlParser: true, useUnifiedTopology: true }); @@ -30,22 +34,7 @@ mongoose.connect(, { useNewUrlParser: true, useUnifiedTopology: true } # --hints-- -“mongodb” 應在 package.json 中作爲依賴項定義。 - -```js -(getUserInput) => - $.get(getUserInput('url') + '/_api/file/package.json').then( - (data) => { - var packJson = JSON.parse(data); - assert.property(packJson.dependencies, 'mongodb'); - }, - (xhr) => { - throw new Error(xhr.responseText); - } - ); -``` - -“mongoose” 應在 package.json 中作爲依賴項定義。 +“mongoose version ^5.11.15” 依賴項應該在 package.json ```js (getUserInput) => @@ -53,6 +42,11 @@ mongoose.connect(, { useNewUrlParser: true, useUnifiedTopology: true } (data) => { var packJson = JSON.parse(data); assert.property(packJson.dependencies, 'mongoose'); + assert.match( + packJson.dependencies.mongoose, + /^\^5\.11\.15/, + 'Wrong version of "mongoose". It should be ^5.11.15' + ); }, (xhr) => { throw new Error(xhr.responseText); diff --git a/curriculum/challenges/chinese-traditional/05-back-end-development-and-apis/mongodb-and-mongoose/perform-classic-updates-by-running-find-edit-then-save.md b/curriculum/challenges/chinese-traditional/05-back-end-development-and-apis/mongodb-and-mongoose/perform-classic-updates-by-running-find-edit-then-save.md index ec65923a6c3..1a21892c684 100644 --- a/curriculum/challenges/chinese-traditional/05-back-end-development-and-apis/mongodb-and-mongoose/perform-classic-updates-by-running-find-edit-then-save.md +++ b/curriculum/challenges/chinese-traditional/05-back-end-development-and-apis/mongodb-and-mongoose/perform-classic-updates-by-running-find-edit-then-save.md @@ -14,7 +14,7 @@ dashedName: perform-classic-updates-by-running-find-edit-then-save 在這個挑戰中，請使用參數 `personId` 作爲字段，修改 `findEditThenSave` 方法，以在數據庫中通過 `_id` 找到相應的 person（你可以使用之前挑戰中的任何一種方法）。 將 `"hamburger"` 添加到它的 `favoriteFoods` 清單中（你可以使用 `Array.push()`）。 然後，在查詢數據庫的方法的回調裏通過 `save()` 方法更新 `Person` 的數據。 -**提示：** 如果你在 Schema 中將 `favoriteFoods` 聲明爲一個 Array（數組）並且沒有指定數組的類型(如 `[String]`)， 那麼此時，`favoriteFoods` 就會是默認的 Mixed 類型。如果想編輯它，就必須執行 `document.markModified('edited-field')`。 詳情請參閱 [Mongoose 文檔](https://mongoosejs.com/docs/schematypes.html#Mixed) +**提示：** 如果你在 Schema 中將 `favoriteFoods` 聲明爲一個 Array（數組）並且沒有指定數組的類型(如 `[String]`)， 那麼此時，`favoriteFoods` 就會是默認的 Mixed 類型。如果想編輯它，就必須執行 `document.markModified('edited-field')`。 查看我們的 Mongoose 文章。 # --hints-- diff --git a/curriculum/challenges/chinese-traditional/06-quality-assurance/advanced-node-and-express/announce-new-users.md b/curriculum/challenges/chinese-traditional/06-quality-assurance/advanced-node-and-express/announce-new-users.md index 4289c37593a..ccd304b8c36 100644 --- a/curriculum/challenges/chinese-traditional/06-quality-assurance/advanced-node-and-express/announce-new-users.md +++ b/curriculum/challenges/chinese-traditional/06-quality-assurance/advanced-node-and-express/announce-new-users.md @@ -34,7 +34,7 @@ socket.on('user', data => { }); ``` -完成上述要求後，你可以在下方提交你的頁面鏈接。 如果你遇到了問題，可以參考 [這裏](https://gist.github.com/camperbot/bf95a0f74b756cf0771cd62c087b8286) 的答案。 +完成上述要求後，你可以在下方提交你的頁面鏈接。 如果你在運行時遇到錯誤，可以點擊此處查看 已執行項目的當前進度。 # --hints-- diff --git a/curriculum/challenges/chinese-traditional/06-quality-assurance/quality-assurance-and-testing-with-chai/test-if-a-value-is-an-array.md b/curriculum/challenges/chinese-traditional/06-quality-assurance/quality-assurance-and-testing-with-chai/test-if-a-value-is-an-array.md index c6f87e40735..9b632a52fca 100644 --- a/curriculum/challenges/chinese-traditional/06-quality-assurance/quality-assurance-and-testing-with-chai/test-if-a-value-is-an-array.md +++ b/curriculum/challenges/chinese-traditional/06-quality-assurance/quality-assurance-and-testing-with-chai/test-if-a-value-is-an-array.md @@ -8,7 +8,7 @@ dashedName: test-if-a-value-is-an-array # --description-- -請注意，本項目在[這個 Replit 項目](https://replit.com/github/freeCodeCamp/boilerplate-mochachai)的基礎上進行開發。你也可以從 [GitHub](https://repl.it/github/freeCodeCamp/boilerplate-mochachai) 上克隆。 +請注意，本項目是在 Replit 上的初始化項目的基礎上進行開發，你也可以從 GitHub 上克隆。 # --instructions-- diff --git a/curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/build-a-caesars-cipher-project/caesars-cipher.md b/curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/build-a-caesars-cipher-project/caesars-cipher.md new file mode 100644 index 00000000000..6fbd60146d1 --- /dev/null +++ b/curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/build-a-caesars-cipher-project/caesars-cipher.md @@ -0,0 +1,88 @@ +--- +id: 56533eb9ac21ba0edf2244e2 +title: 構建一個凱撒密碼 +challengeType: 5 +forumTopicId: 16003 +dashedName: build-a-caesars-cipher +--- + +# --description-- + +凱撒密碼（ Caesar cipher）是最簡單且最廣爲人知的密碼（ciphers），也被稱爲移位密碼（shift cipher）。 在移位密碼中，明文中的字母通過按照一個固定數目進行偏移後被替換成新的字母。 + +現代最常被應用到的一個變種就是 ROT13 加密，也就是明文中的字母向後移 13 位。 也就是， `A ↔ N`，`B ↔ O` 等等。 + +編寫一個函數，它將把使用 ROT13 加密編碼的字符串作爲輸入並返回解碼字符串。 + +所有解碼後的字母都必須爲字母大寫。 請不要解碼非字母的字符（例如，空格、標點符號），但你需要在結果中保留它們。 + +# --hints-- + +`rot13("SERR PBQR PNZC")` 應解碼爲 `FREE CODE CAMP` + +```js +assert(rot13('SERR PBQR PNZC') === 'FREE CODE CAMP'); +``` + +`rot13("SERR CVMMN!")` 應解碼爲 `FREE PIZZA!` + +```js +assert(rot13('SERR CVMMN!') === 'FREE PIZZA!'); +``` + +`rot13("SERR YBIR?")` 應解碼爲 `FREE LOVE?` + +```js +assert(rot13('SERR YBIR?') === 'FREE LOVE?'); +``` + +`rot13("GUR DHVPX OEBJA SBK WHZCF BIRE GUR YNML QBT.")` 應解碼爲 `THE QUICK BROWN FOX JUMPS OVER THE LAZY DOG.` + +```js +assert( + rot13('GUR DHVPX OEBJA SBK WHZCF BIRE GUR YNML QBT.') === + 'THE QUICK BROWN FOX JUMPS OVER THE LAZY DOG.' +); +``` + +# --seed-- + +## --seed-contents-- + +```js +function rot13(str) { + return str; +} + +rot13("SERR PBQR PNZC"); +``` + +# --solutions-- + +```js +var lookup = { + 'A': 'N','B': 'O','C': 'P','D': 'Q', + 'E': 'R','F': 'S','G': 'T','H': 'U', + 'I': 'V','J': 'W','K': 'X','L': 'Y', + 'M': 'Z','N': 'A','O': 'B','P': 'C', + 'Q': 'D','R': 'E','S': 'F','T': 'G', + 'U': 'H','V': 'I','W': 'J','X': 'K', + 'Y': 'L','Z': 'M' +}; + +function rot13(encodedStr) { + var codeArr = encodedStr.split(""); // String to Array + var decodedArr = []; // Your Result goes here + // Only change code below this line + + decodedArr = codeArr.map(function(letter) { + if(lookup.hasOwnProperty(letter)) { + letter = lookup[letter]; + } + return letter; + }); + + // Only change code above this line + return decodedArr.join(""); // Array to String +} +``` diff --git a/curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/build-a-cash-register-project/cash-register.md b/curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/build-a-cash-register-project/cash-register.md new file mode 100644 index 00000000000..7f53b2ea47b --- /dev/null +++ b/curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/build-a-cash-register-project/cash-register.md @@ -0,0 +1,252 @@ +--- +id: aa2e6f85cab2ab736c9a9b24 +title: 構建一個收銀機 +challengeType: 5 +forumTopicId: 16012 +dashedName: build-a-cash-register +--- + +# --description-- + +設計一個收銀機抽屜函數 `checkCashRegister()`，它接受購買價格作爲第一個參數（`price`），付款作爲第二個參數（`cash`），和抽屜的現金（`cid`）作爲第三個參數。 + +`cid` 是包含貨幣面值的二維數組。 + +函數 `checkCashRegister()` 應返回含有 `status` 屬性和 `change` 屬性的對象。 + +如果收銀機內的金額少於應找回的零錢數，或者你無法返回確切的數目時，返回 `{status: "INSUFFICIENT_FUNDS", change: []}`。 + +如果收銀機內的金額恰好等於應找回的零錢數，返回 `{status: "CLOSED", change: [...]}`，其中 `change` 的屬性值就是收銀機內的金額。 + +否則，返回 `{status: "OPEN", change: [...]}`，其中 `change` 鍵值是應找回的零錢數，並將找零的面值由高到低排序。 + +
貨幣單位面值
Penny0.01 美元（PENNY）
Nickel0.05 美元（NICKEL）
Dime0.1 美元（DIME）
Quarter0.25 美元（QUARTER）
Dollar1 美元（ONE）
Five Dollars5 美元（FIVE）
Ten Dollars10 美元（TEN）
Twenty Dollars20 美元（TWENTY）
One-hundred Dollars100 美元（ONE HUNDRED）
+ +下面的抽屜裏現金數組示例： + +```js +[ + ["PENNY", 1.01], + ["NICKEL", 2.05], + ["DIME", 3.1], + ["QUARTER", 4.25], + ["ONE", 90], + ["FIVE", 55], + ["TEN", 20], + ["TWENTY", 60], + ["ONE HUNDRED", 100] +] +``` + +# --hints-- + +`checkCashRegister(19.5, 20, [["PENNY", 1.01], ["NICKEL", 2.05], ["DIME", 3.1], ["QUARTER", 4.25], ["ONE", 90], ["FIVE", 55], ["TEN", 20], ["TWENTY", 60], ["ONE HUNDRED", 100]])` 應返回一個對象。 + +```js +assert.deepEqual( + Object.prototype.toString.call( + checkCashRegister(19.5, 20, [ + ['PENNY', 1.01], + ['NICKEL', 2.05], + ['DIME', 3.1], + ['QUARTER', 4.25], + ['ONE', 90], + ['FIVE', 55], + ['TEN', 20], + ['TWENTY', 60], + ['ONE HUNDRED', 100] + ]) + ), + '[object Object]' +); +``` + +`checkCashRegister(19.5, 20, [["PENNY", 1.01], ["NICKEL", 2.05], ["DIME", 3.1], ["QUARTER", 4.25], ["ONE", 90], ["FIVE", 55], ["TEN", 20], ["TWENTY", 60], ["ONE HUNDRED", 100]])` 應返回 `{status: "OPEN", change: [["QUARTER", 0.5]]}`。 + +```js +assert.deepEqual( + checkCashRegister(19.5, 20, [ + ['PENNY', 1.01], + ['NICKEL', 2.05], + ['DIME', 3.1], + ['QUARTER', 4.25], + ['ONE', 90], + ['FIVE', 55], + ['TEN', 20], + ['TWENTY', 60], + ['ONE HUNDRED', 100] + ]), + { status: 'OPEN', change: [['QUARTER', 0.5]] } +); +``` + +`checkCashRegister(3.26, 100, [["PENNY", 1.01], ["NICKEL", 2.05], ["DIME", 3.1], ["QUARTER", 4.25], ["ONE", 90], ["FIVE", 55], ["TEN", 20], ["TWENTY", 60], ["ONE HUNDRED", 100]])` 應返回 `{status: "OPEN", change: [["TWENTY", 60], ["TEN", 20], ["FIVE", 15], ["ONE", 1], ["QUARTER", 0.5], ["DIME", 0.2], ["PENNY", 0.04]]}`。 + +```js +assert.deepEqual( + checkCashRegister(3.26, 100, [ + ['PENNY', 1.01], + ['NICKEL', 2.05], + ['DIME', 3.1], + ['QUARTER', 4.25], + ['ONE', 90], + ['FIVE', 55], + ['TEN', 20], + ['TWENTY', 60], + ['ONE HUNDRED', 100] + ]), + { + status: 'OPEN', + change: [ + ['TWENTY', 60], + ['TEN', 20], + ['FIVE', 15], + ['ONE', 1], + ['QUARTER', 0.5], + ['DIME', 0.2], + ['PENNY', 0.04] + ] + } +); +``` + +`checkCashRegister(19.5, 20, [["PENNY", 0.01], ["NICKEL", 0], ["DIME", 0], ["QUARTER", 0], ["ONE", 0], ["FIVE", 0], ["TEN", 0], ["TWENTY", 0], ["ONE HUNDRED", 0]])` 應返回 `{status: "INSUFFICIENT_FUNDS", change: []}`。 + +```js +assert.deepEqual( + checkCashRegister(19.5, 20, [ + ['PENNY', 0.01], + ['NICKEL', 0], + ['DIME', 0], + ['QUARTER', 0], + ['ONE', 0], + ['FIVE', 0], + ['TEN', 0], + ['TWENTY', 0], + ['ONE HUNDRED', 0] + ]), + { status: 'INSUFFICIENT_FUNDS', change: [] } +); +``` + +`checkCashRegister(19.5, 20, [["PENNY", 0.01], ["NICKEL", 0], ["DIME", 0], ["QUARTER", 0], ["ONE", 1], ["FIVE", 0], ["TEN", 0], ["TWENTY", 0], ["ONE HUNDRED", 0]])` 應返回 `{status: "INSUFFICIENT_FUNDS", change: []}`。 + +```js +assert.deepEqual( + checkCashRegister(19.5, 20, [ + ['PENNY', 0.01], + ['NICKEL', 0], + ['DIME', 0], + ['QUARTER', 0], + ['ONE', 1], + ['FIVE', 0], + ['TEN', 0], + ['TWENTY', 0], + ['ONE HUNDRED', 0] + ]), + { status: 'INSUFFICIENT_FUNDS', change: [] } +); +``` + +`checkCashRegister(19.5, 20, [["PENNY", 0.5], ["NICKEL", 0], ["DIME", 0], ["QUARTER", 0], ["ONE", 0], ["FIVE", 0], ["TEN", 0], ["TWENTY", 0], ["ONE HUNDRED", 0]])` 應返回 `{status: "CLOSED", change: [["PENNY", 0.5], ["NICKEL", 0], ["DIME", 0], ["QUARTER", 0], ["ONE", 0], ["FIVE", 0], ["TEN", 0], ["TWENTY", 0], ["ONE HUNDRED", 0]]}`。 + +```js +assert.deepEqual( + checkCashRegister(19.5, 20, [ + ['PENNY', 0.5], + ['NICKEL', 0], + ['DIME', 0], + ['QUARTER', 0], + ['ONE', 0], + ['FIVE', 0], + ['TEN', 0], + ['TWENTY', 0], + ['ONE HUNDRED', 0] + ]), + { + status: 'CLOSED', + change: [ + ['PENNY', 0.5], + ['NICKEL', 0], + ['DIME', 0], + ['QUARTER', 0], + ['ONE', 0], + ['FIVE', 0], + ['TEN', 0], + ['TWENTY', 0], + ['ONE HUNDRED', 0] + ] + } +); +``` + +# --seed-- + +## --seed-contents-- + +```js +function checkCashRegister(price, cash, cid) { + let change; + return change; +} + +checkCashRegister(19.5, 20, [["PENNY", 1.01], ["NICKEL", 2.05], ["DIME", 3.1], ["QUARTER", 4.25], ["ONE", 90], ["FIVE", 55], ["TEN", 20], ["TWENTY", 60], ["ONE HUNDRED", 100]]); +``` + +# --solutions-- + +```js +const denom = [ + { name: "ONE HUNDRED", val: 100 }, + { name: "TWENTY", val: 20 }, + { name: "TEN", val: 10 }, + { name: "FIVE", val: 5 }, + { name: "ONE", val: 1 }, + { name: "QUARTER", val: 0.25 }, + { name: "DIME", val: 0.1 }, + { name: "NICKEL", val: 0.05 }, + { name: "PENNY", val: 0.01 }, +]; + +function checkCashRegister(price, cash, cid) { + const output = { status: null, change: [] }; + let change = cash - price; + const register = cid.reduce( + function (acc, curr) { + acc.total += curr[1]; + acc[curr[0]] = curr[1]; + return acc; + }, + { total: 0 } + ); + if (register.total === change) { + output.status = "CLOSED"; + output.change = cid; + return output; + } + if (register.total < change) { + output.status = "INSUFFICIENT_FUNDS"; + return output; + } + const change_arr = denom.reduce(function (acc, curr) { + let value = 0; + while (register[curr.name] > 0 && change >= curr.val) { + change -= curr.val; + register[curr.name] -= curr.val; + value += curr.val; + change = Math.round(change * 100) / 100; + } + if (value > 0) { + acc.push([curr.name, value]); + } + return acc; + }, []); + if (change_arr.length < 1 || change > 0) { + output.status = "INSUFFICIENT_FUNDS"; + return output; + } + output.status = "OPEN"; + output.change = change_arr; + return output; +} +``` diff --git a/curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/build-a-palindrome-checker-project/palindrome-checker.md b/curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/build-a-palindrome-checker-project/palindrome-checker.md new file mode 100644 index 00000000000..8e183f9478e --- /dev/null +++ b/curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/build-a-palindrome-checker-project/palindrome-checker.md @@ -0,0 +1,125 @@ +--- +id: aaa48de84e1ecc7c742e1124 +title: 構建一個迴文檢測器 +challengeType: 5 +forumTopicId: 16004 +dashedName: build-a-palindrome-checker +--- + +# --description-- + +如果傳入的字符串是迴文字符串，則返回 `true`。 否則，返回 `false` 。 + +迴文（palindrome），指在忽略標點符號、大小寫和空格的前提下，正着讀和反着讀一模一樣。 + +**注意：** 檢查迴文時，你需要先去除 **所有非字母數字的字符**（標點、空格和符號），並將所有字母都轉換成大寫或都轉換成小寫。 + +我們會傳入具有不同格式的字符串，如 `racecar`、`RaceCar` 和 `race CAR` 等等。 + +我們也會傳入一些包含特殊符號的字符串，例如 `2A3*3a2`、`2A3 3a2`、`2_A3*3#A2`。 + +# --hints-- + +`palindrome("eye")` 應返回一個布爾值。 + +```js +assert(typeof palindrome('eye') === 'boolean'); +``` + +`palindrome("eye")` 應返回 `true`。 + +```js +assert(palindrome('eye') === true); +``` + +`palindrome("_eye")` 應返回 `true`。 + +```js +assert(palindrome('_eye') === true); +``` + +`palindrome("race car")` 應返回 `true`。 + +```js +assert(palindrome('race car') === true); +``` + +`palindrome("not a palindrome")` 應返回 `false`。 + +```js +assert(palindrome('not a palindrome') === false); +``` + +`palindrome("A man, a plan, a canal. Panama")` 應返回 `true`。 + +```js +assert(palindrome('A man, a plan, a canal. Panama') === true); +``` + +`palindrome("never odd or even")` 應返回 `true`。 + +```js +assert(palindrome('never odd or even') === true); +``` + +`palindrome("nope")` 應返回 `false`。 + +```js +assert(palindrome('nope') === false); +``` + +`palindrome("almostomla")` 應返回 `false`。 + +```js +assert(palindrome('almostomla') === false); +``` + +`palindrome("My age is 0, 0 si ega ym.")` 應返回 `true`。 + +```js +assert(palindrome('My age is 0, 0 si ega ym.') === true); +``` + +`palindrome("1 eye for of 1 eye.")` 應返回 `false`。 + +```js +assert(palindrome('1 eye for of 1 eye.') === false); +``` + +`palindrome("0_0 (: /-\ :) 0-0")` 應返回 `true`。 + +```js +assert(palindrome('0_0 (: /- :) 0-0') === true); +``` + +`palindrome("five|\_/|four")` 應返回 `false`。 + +```js +assert(palindrome('five|_/|four') === false); +``` + +# --seed-- + +## --seed-contents-- + +```js +function palindrome(str) { + return true; +} + +palindrome("eye"); +``` + +# --solutions-- + +```js +function palindrome(str) { + var string = str.toLowerCase().split(/[^A-Za-z0-9]/gi).join(''); + var aux = string.split(''); + if (aux.join('') === aux.reverse().join('')){ + return true; + } + + return false; +} +``` diff --git a/curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/build-a-roman-numeral-converter-project/roman-numeral-converter.md b/curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/build-a-roman-numeral-converter-project/roman-numeral-converter.md new file mode 100644 index 00000000000..801e90b5260 --- /dev/null +++ b/curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/build-a-roman-numeral-converter-project/roman-numeral-converter.md @@ -0,0 +1,215 @@ +--- +id: a7f4d8f2483413a6ce226cac +title: 構建羅馬數字轉換器 +challengeType: 5 +forumTopicId: 16044 +dashedName: build-a-roman-numeral-converter +--- + +# --description-- + +把傳入的數字轉爲羅馬數字。 + +| 羅馬數字 | 阿拉伯數字 | +| ---- | ----- | +| M | 1000 | +| CM | 900 | +| D | 500 | +| CD | 400 | +| C | 100 | +| XC | 90 | +| L | 50 | +| XL | 40 | +| X | 10 | +| IX | 9 | +| V | 5 | +| IV | 4 | +| I | 1 | + +所有羅馬數字答案都應該大寫。 + +# --hints-- + +`convertToRoman(2)` 應該返回字符串 `II`。 + +```js +assert.deepEqual(convertToRoman(2), 'II'); +``` + +`convertToRoman(3)` 應該返回字符串 `III`。 + +```js +assert.deepEqual(convertToRoman(3), 'III'); +``` + +`convertToRoman(4)` 應該返回字符串 `IV`。 + +```js +assert.deepEqual(convertToRoman(4), 'IV'); +``` + +`convertToRoman(5)` 應該返回字符串 `V`。 + +```js +assert.deepEqual(convertToRoman(5), 'V'); +``` + +`convertToRoman(9)` 應該返回字符串 `IX`。 + +```js +assert.deepEqual(convertToRoman(9), 'IX'); +``` + +`convertToRoman(12)` 應該返回字符串 `XII`。 + +```js +assert.deepEqual(convertToRoman(12), 'XII'); +``` + +`convertToRoman(16)` 應該返回字符串 `XVI`。 + +```js +assert.deepEqual(convertToRoman(16), 'XVI'); +``` + +`convertToRoman(29)` 應該返回字符串 `XXIX`。 + +```js +assert.deepEqual(convertToRoman(29), 'XXIX'); +``` + +`convertToRoman(44)` 應該返回字符串 `XLIV`. + +```js +assert.deepEqual(convertToRoman(44), 'XLIV'); +``` + +`convertToRoman(45)` 應該返回字符串 `XLV`。 + +```js +assert.deepEqual(convertToRoman(45), 'XLV'); +``` + +`convertToRoman(68)` 應該返回字符串 `LXVIII` + +```js +assert.deepEqual(convertToRoman(68), 'LXVIII'); +``` + +`convertToRoman(83)` 應該返回字符串 `LXXXIII` + +```js +assert.deepEqual(convertToRoman(83), 'LXXXIII'); +``` + +`convertToRoman(97)` 應該返回字符串 `XCVII` + +```js +assert.deepEqual(convertToRoman(97), 'XCVII'); +``` + +`convertToRoman(99)` 應該返回字符串 `XCIX` + +```js +assert.deepEqual(convertToRoman(99), 'XCIX'); +``` + +`convertToRoman(400)` 應該返回字符串 `CD` + +```js +assert.deepEqual(convertToRoman(400), 'CD'); +``` + +`convertToRoman(500)` 應該返回字符串 `D` + +```js +assert.deepEqual(convertToRoman(500), 'D'); +``` + +`convertToRoman(501)` 應該返回字符串 `DI` + +```js +assert.deepEqual(convertToRoman(501), 'DI'); +``` + +`convertToRoman(649)` 應該返回字符串 `DCXLIX` + +```js +assert.deepEqual(convertToRoman(649), 'DCXLIX'); +``` + +`convertToRoman(798)` 應該返回字符串 `DCCXCVIII` + +```js +assert.deepEqual(convertToRoman(798), 'DCCXCVIII'); +``` + +`convertToRoman(891)` 應該返回字符串 `DCCCXCI` + +```js +assert.deepEqual(convertToRoman(891), 'DCCCXCI'); +``` + +`convertToRoman(1000)` 應該返回字符串 `M` + +```js +assert.deepEqual(convertToRoman(1000), 'M'); +``` + +`convertToRoman(1004)` 應該返回字符串 `MIV` + +```js +assert.deepEqual(convertToRoman(1004), 'MIV'); +``` + +`convertToRoman(1006)` 應該返回字符串 `MVI` + +```js +assert.deepEqual(convertToRoman(1006), 'MVI'); +``` + +`convertToRoman(1023)` 應該返回字符串 `MXXIII` + +```js +assert.deepEqual(convertToRoman(1023), 'MXXIII'); +``` + +`convertToRoman(2014)` 應該返回字符串 `MMXIV` + +```js +assert.deepEqual(convertToRoman(2014), 'MMXIV'); +``` + +`convertToRoman(3999)` 應該返回字符串 `MMMCMXCIX` + +```js +assert.deepEqual(convertToRoman(3999), 'MMMCMXCIX'); +``` + +# --seed-- + +## --seed-contents-- + +```js +function convertToRoman(num) { + return num; +} + +convertToRoman(36); +``` + +# --solutions-- + +```js +function convertToRoman(num) { + var ref = [['M', 1000], ['CM', 900], ['D', 500], ['CD', 400], ['C', 100], ['XC', 90], ['L', 50], ['XL', 40], ['X', 10], ['IX', 9], ['V', 5], ['IV', 4], ['I', 1]]; + var res = []; + ref.forEach(function(p) { + while (num >= p[1]) { + res.push(p[0]); + num -= p[1]; + } + }); + return res.join(''); +} +``` diff --git a/curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/build-a-telephone-number-validator-project/telephone-number-validator.md b/curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/build-a-telephone-number-validator-project/telephone-number-validator.md new file mode 100644 index 00000000000..ce3a692fbd7 --- /dev/null +++ b/curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/build-a-telephone-number-validator-project/telephone-number-validator.md @@ -0,0 +1,217 @@ +--- +id: aff0395860f5d3034dc0bfc9 +title: 構建電話號碼驗證器 +challengeType: 5 +forumTopicId: 16090 +dashedName: build-a-telephone-number-validator +--- + +# --description-- + +如果傳入的字符串是一個有效的美國電話號碼，則返回 `true`。 + +用戶可以按照他們選擇的方式填寫表單字段，只要它是有效美國號碼的格式即可。 以下是美國電話號碼的有效格式示例（其他格式變化，請參考下面的測試）： + +
555-555-5555
(555)555-5555
(555) 555-5555
555 555 5555
5555555555
1 555 555 5555
+ +在這個挑戰中，傳入的字符串可能是例如 `800-692-7753` 或者 `8oo-six427676;laskdjf` 的號碼。 你的任務是根據上面不同的格式組合，判斷它是否爲有效的電話號碼。 地區代碼是必需的。 如果提供了國家/地區代碼，則必須確認國家/地區代碼爲`1` 。 如果傳入的字符串是有效的美國電話號碼，則返回 `true`，否則返回 `false` 。 + +# --hints-- + +`telephoneCheck("555-555-5555")` 應返回一個布爾值。 + +```js +assert(typeof telephoneCheck('555-555-5555') === 'boolean'); +``` + +`telephoneCheck("1 555-555-5555")` 應返回 `true`。 + +```js +assert(telephoneCheck('1 555-555-5555') === true); +``` + +`telephoneCheck("1 (555) 555-5555")` 應返回 `true`。 + +```js +assert(telephoneCheck('1 (555) 555-5555') === true); +``` + +`telephoneCheck("5555555555")` 應返回 `true`。 + +```js +assert(telephoneCheck('5555555555') === true); +``` + +`telephoneCheck("555-555-5555")` 應返回 `true`。 + +```js +assert(telephoneCheck('555-555-5555') === true); +``` + +`telephoneCheck("(555)555-5555")` 應返回 `true`。 + +```js +assert(telephoneCheck('(555)555-5555') === true); +``` + +`telephoneCheck("1(555)555-5555")` 應返回 `true`。 + +```js +assert(telephoneCheck('1(555)555-5555') === true); +``` + +`telephoneCheck("555-5555")` 應返回 `false`。 + +```js +assert(telephoneCheck('555-5555') === false); +``` + +`telephoneCheck("5555555")` 應返回 `false`。 + +```js +assert(telephoneCheck('5555555') === false); +``` + +`telephoneCheck("1 555)555-5555")` 應返回 `false`。 + +```js +assert(telephoneCheck('1 555)555-5555') === false); +``` + +`telephoneCheck("1 555 555 5555")` 應返回 `true`。 + +```js +assert(telephoneCheck('1 555 555 5555') === true); +``` + +`telephoneCheck("1 456 789 4444")` 應返回 `true`。 + +```js +assert(telephoneCheck('1 456 789 4444') === true); +``` + +`telephoneCheck("123**&!!asdf#")` 應返回 `false`。 + +```js +assert(telephoneCheck('123**&!!asdf#') === false); +``` + +`telephoneCheck("55555555")` 應返回 `false`。 + +```js +assert(telephoneCheck('55555555') === false); +``` + +`telephoneCheck("(6054756961)")` 應返回 `false`。 + +```js +assert(telephoneCheck('(6054756961)') === false); +``` + +`telephoneCheck("2 (757) 622-7382")` 應返回 `false`。 + +```js +assert(telephoneCheck('2 (757) 622-7382') === false); +``` + +`telephoneCheck("0 (757) 622-7382")` 應返回 `false`。 + +```js +assert(telephoneCheck('0 (757) 622-7382') === false); +``` + +`telephoneCheck("-1 (757) 622-7382")` 應返回 `false`。 + +```js +assert(telephoneCheck('-1 (757) 622-7382') === false); +``` + +`telephoneCheck("2 757 622-7382")` 應返回 `false`。 + +```js +assert(telephoneCheck('2 757 622-7382') === false); +``` + +`telephoneCheck("10 (757) 622-7382")` 應返回 `false`。 + +```js +assert(telephoneCheck('10 (757) 622-7382') === false); +``` + +`telephoneCheck("27576227382")` 應返回 `false`。 + +```js +assert(telephoneCheck('27576227382') === false); +``` + +`telephoneCheck("(275)76227382")` 應返回 `false`。 + +```js +assert(telephoneCheck('(275)76227382') === false); +``` + +`telephoneCheck("2(757)6227382")` 應返回 `false`。 + +```js +assert(telephoneCheck('2(757)6227382') === false); +``` + +`telephoneCheck("2(757)622-7382")` 應返回 `false`。 + +```js +assert(telephoneCheck('2(757)622-7382') === false); +``` + +`telephoneCheck("555)-555-5555")` 應返回 `false`。 + +```js +assert(telephoneCheck('555)-555-5555') === false); +``` + +`telephoneCheck("(555-555-5555")` 應返回 `false`。 + +```js +assert(telephoneCheck('(555-555-5555') === false); +``` + +`telephoneCheck("(555)5(55?)-5555")` 應返回 `false`。 + +```js +assert(telephoneCheck('(555)5(55?)-5555') === false); +``` + +`telephoneCheck("55 55-55-555-5")` 應返回 `false`。 + +```js +assert(telephoneCheck('55 55-55-555-5') === false); +``` + +`telephoneCheck("11 555-555-5555")` 應返回 `false`。 + +```js +assert(telephoneCheck('11 555-555-5555') === false); +``` + +# --seed-- + +## --seed-contents-- + +```js +function telephoneCheck(str) { + return true; +} + +telephoneCheck("555-555-5555"); +``` + +# --solutions-- + +```js +var re = /^([+]?1[\s]?)?((?:[(](?:[2-9]1[02-9]|[2-9][02-8][0-9])[)][\s]?)|(?:(?:[2-9]1[02-9]|[2-9][02-8][0-9])[\s.-]?)){1}([2-9]1[02-9]|[2-9][02-9]1|[2-9][02-9]{2}[\s.-]?){1}([0-9]{4}){1}$/; + +function telephoneCheck(str) { + return re.test(str); +} + +telephoneCheck("555-555-5555"); +``` diff --git a/curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-basic-javascript-by-building-a-role-playing-game/5d5a813321b9e3db6c106a46.md b/curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-basic-javascript-by-building-a-role-playing-game/5d5a813321b9e3db6c106a46.md new file mode 100644 index 00000000000..5d1f1167cfb --- /dev/null +++ b/curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-basic-javascript-by-building-a-role-playing-game/5d5a813321b9e3db6c106a46.md @@ -0,0 +1,154 @@ +--- +id: 5d5a813321b9e3db6c106a46 +title: 步驟 1 +challengeType: 0 +dashedName: step-1 +--- + +# --description-- + +JavaScript 是一種強大的語言，它允許你構建交互式網站。 首先，使用 `DOCTYPE`、`html`、`head` 和 `body` 創建你的標準 HTML 樣板。 包括一個 `title` 元素和一個 `link` 用於樣式表，以及 `meta` 標記用於 `charset`。 然後，在 `body` 中創建一個 ID 爲 `game` 的 `div` 元素。 給你的 `title` 元素添加文本 `RPG - Dragon Repeller`。 + +# --hints-- + +代碼應包含 `DOCTYPE` 聲明。 + +```js +assert(code.match(/` 關閉 `DOCTYPE` 聲明。 + +```js +assert(code.match(//gi)); +``` + +`html` 元素應該有一個開始標籤。 不要忘記 `lang` 屬性。 + +```js +assert(code.match(//gi)); +``` + +`html` 元素應該有一個結束標籤。 + +```js +assert(code.match(/<\/html\s*>/)); +``` + +`DOCTYPE` 聲明應位於 HTML 的開頭。 + +```js +assert(__helpers.removeHtmlComments(code).match(/^\s*/i)); +``` + +應該有一個 `head` 開始標籤。 + +```js +assert(code.match(//i)); +``` + +應該有一個 `head` 結束標籤。 + +```js +assert(code.match(/<\/head\s*>/i)); +``` + +應該有一個 `body` 開始標籤。 + +```js +assert(code.match(//i)); +``` + +應該有一個 `body` 結束標籤。 + +```js +assert(code.match(/<\/body\s*>/i)); +``` + +`head` 和 `body` 元素應該是兄弟元素。 + +```js +assert(document.querySelector('head')?.nextElementSibling?.localName === 'body'); +``` + +`head` 元素應該在 `html` 元素內。 + +```js +assert([...document.querySelector('html')?.children].some(x => x?.localName === 'head')); +``` + +`body` 元素應該在 `html` 元素內。 + +```js +assert([...document.querySelector('html')?.children].some(x => x?.localName === 'body')); +``` + +代碼應該有一個 `meta` 元素。 + +```js +const meta = document.querySelector('meta'); +assert.exists(meta); +``` + +`meta` 元素應該有一個 `charset` 屬性，其值爲 `UTF-8`。 + +```js +assert.match(code, / link'); +assert.exists(link); +``` + +代碼應該有一個 `div` 元素。 + +```js +const div = document.querySelector('div'); +assert.exists(div); +``` + +`div` 元素應該有一個 `id` 屬性，其值爲 `game`。 + +```js +const div = document.querySelector('div'); +assert.equal(div?.id, 'game'); +``` + +`div` 元素應該在 `body` 元素內。 + +```js +const div = document.querySelector('div'); +assert.equal(div?.parentElement?.localName, 'body'); +``` + +# --seed-- + +## --seed-contents-- + +```html +--fcc-editable-region-- + +--fcc-editable-region-- +``` diff --git a/curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-basic-javascript-by-building-a-role-playing-game/62a115879a6d51422652cbfc.md b/curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-basic-javascript-by-building-a-role-playing-game/62a115879a6d51422652cbfc.md new file mode 100644 index 00000000000..fda7e3a0e84 --- /dev/null +++ b/curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-basic-javascript-by-building-a-role-playing-game/62a115879a6d51422652cbfc.md @@ -0,0 +1,78 @@ +--- +id: 62a115879a6d51422652cbfc +title: 步驟 2 +challengeType: 0 +dashedName: step-2 +--- + +# --description-- + +在 `#game` 元素中創建四個 `div` 元素。 按順序爲它們提供以下相應的 `id` 值：`stats`、`controls`、`monsterStats` 和 `text`。 + +# --hints-- + +應該創建四個新的 `div` 元素。 + +```js +assert.equal(document.querySelectorAll('div')?.length, 5); +``` + +應該爲新的 `div` 元素之一提供 `id` 設爲 `stats`。 + +```js +assert.exists(document.querySelector('div#stats')); +``` + +應該爲新的 `div` 元素之一提供 `id` 設爲 `controls`。 + +```js +assert.exists(document.querySelector('div#controls')); +``` + +應該爲新的 `div` 元素之一提供 `id` 設爲 `monsterStats`。 + +```js +assert.exists(document.querySelector('div#monsterStats')); +``` + +應該爲新的 `div` 元素之一提供 `id` 設爲 `text`。 + +```js +assert.exists(document.querySelector('div#text')); +``` + +應該以正確的順序放置新的 `div` 元素。 + +```js +function __t(a, b) { + return document.querySelector(a)?.nextElementSibling?.getAttribute('id') === b; +} +assert(__t('div#stats','controls') && __t('div#controls','monsterStats') && __t('div#monsterStats','text')); +``` + +應該將新的 `div` 元素放在 `#game` 元素中。 + +```js +assert.equal(document.querySelector('#game')?.children?.length, 4); +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + + + RPG - Dragon Repeller + +--fcc-editable-region-- + +
+
+ +--fcc-editable-region-- + +``` diff --git a/curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-basic-javascript-by-building-a-role-playing-game/62a1166ed9a56d439c0770e7.md b/curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-basic-javascript-by-building-a-role-playing-game/62a1166ed9a56d439c0770e7.md new file mode 100644 index 00000000000..dae56cc6718 --- /dev/null +++ b/curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-basic-javascript-by-building-a-role-playing-game/62a1166ed9a56d439c0770e7.md @@ -0,0 +1,70 @@ +--- +id: 62a1166ed9a56d439c0770e7 +title: 步驟 3 +challengeType: 0 +dashedName: step-3 +--- + +# --description-- + +在 `#stats` 元素中創建三個 `span` 元素。 給每個元素一個類 `stat`。 然後給第一個元素設置文本 `XP: 0`，給第二個元素設置文本 `Health: 100`，給第三個元素設置文本 `Gold: 50`。 + +# --hints-- + +`#stats` 元素中應該有三個 `span` 元素。 + +```js +const spans = document.querySelectorAll('#stats > span'); +assert.equal(spans?.length, 3); +``` + +應該給新的三個 `span` 元素一個 `stat` 類。 + +```js +assert.exists(document.querySelectorAll('#stats > .stat')?.length, 3); +``` + +第一個 `.stat` 元素應具有提供的文本 `XP: 0`。 + +```js +assert(document.querySelectorAll('#stats > .stat')?.[0]?.innerText === 'XP: 0'); +``` + +第二個 `.stat` 元素應具有提供的文本 `Health: 100`。 + +```js +assert(document.querySelectorAll('#stats > .stat')?.[1]?.innerText === 'Health: 100'); +``` + +第三個 `.stat` 元素應具有提供的文本 `Gold: 50`。 + +```js +assert(document.querySelectorAll('#stats > .stat')?.[2]?.innerText === 'Gold: 50'); +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + + + RPG - Dragon Repeller + +--fcc-editable-region-- + +
+
+ +
+
+
+
+
+ +--fcc-editable-region-- + +``` diff --git a/curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-basic-javascript-by-building-a-role-playing-game/62a23c1d505bfa13747c8a9b.md b/curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-basic-javascript-by-building-a-role-playing-game/62a23c1d505bfa13747c8a9b.md new file mode 100644 index 00000000000..d83388191bd --- /dev/null +++ b/curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-basic-javascript-by-building-a-role-playing-game/62a23c1d505bfa13747c8a9b.md @@ -0,0 +1,167 @@ +--- +id: 62a23c1d505bfa13747c8a9b +title: 步驟 4 +challengeType: 0 +dashedName: step-4 +--- + +# --description-- + +將數字 `0`、`100` 和 `50` 包含在 `span` 元素中，並將這些新的 `span` 元素包含在 `strong` 元素中。 然後分別爲新的 `span` 元素設置 `id` 值爲 `xpText`、`healthText` 和 `goldText` 。 + +# --hints-- + +應該在第一個 `.stat` 元素中添加一個 `strong` 元素。 + +```js +const stat = document.querySelectorAll('.stat')[0]; +const strong = stat?.querySelector('strong'); +assert.exists(strong); +``` + +第一個新的 `strong` 元素應該有一個 `span` 元素。 + +```js +const stat = document.querySelectorAll('.stat')[0]; +const strong = stat?.querySelector('strong'); +const span = strong?.querySelector('span'); +assert.exists(span); +``` + +第一個嵌套的 `span` 元素應具有 `id` 值爲 `xpText`。 + +```js +const stat = document.querySelectorAll('.stat')[0]; +const strong = stat?.querySelector('strong'); +const span = strong?.querySelector('span'); +assert.equal(span?.id, 'xpText'); +``` + +第一個 `span` 元素應該包裹在文本 `0` 周圍。 + +```js +const stat = document.querySelectorAll('.stat')[0]; +const strong = stat?.querySelector('strong'); +const span = strong?.querySelector('span'); +assert.equal(span.innerText, '0'); +``` + +第一個 `.stat` 元素的文本仍應爲 `XP: 0`。 + +```js +const stat = document.querySelectorAll('.stat')[0]; +assert.equal(stat.innerText, 'XP: 0'); +``` + +應該在第二個 `.stat` 元素中添加一個 `strong` 元素。 + +```js +const stat = document.querySelectorAll('.stat')[1]; +const strong = stat?.querySelector('strong'); +assert.exists(strong); +``` + +第二個新 `strong` 元素應該有一個 `span` 元素。 + +```js +const stat = document.querySelectorAll('.stat')[1]; +const strong = stat?.querySelector('strong'); +const span = strong?.querySelector('span'); +assert.exists(span); +``` + +第二個嵌套的 `span` 元素應具有 `id` 值爲 `healthText`。 + +```js +const stat = document.querySelectorAll('.stat')[1]; +const strong = stat?.querySelector('strong'); +const span = strong?.querySelector('span'); +assert.equal(span?.id, 'healthText'); +``` + +第二個 `span` 元素應包裹在文本 `100` 周圍。 + +```js +const stat = document.querySelectorAll('.stat')[1]; +const strong = stat?.querySelector('strong'); +const span = strong?.querySelector('span'); +assert.equal(span.innerText, '100'); +``` + +第二個 `.stat` 元素的文本仍應爲 `Health: 100`。 + +```js +const stat = document.querySelectorAll('.stat')[1]; +assert.equal(stat.innerText, 'Health: 100'); +``` + +應該在第三個 `.stat` 元素中添加一個 `strong` 元素。 + +```js +const stat = document.querySelectorAll('.stat')[2]; +const strong = stat?.querySelector('strong'); +assert.exists(strong); +``` + +第三個新 `strong` 元素應該有一個 `span` 元素。 + +```js +const stat = document.querySelectorAll('.stat')[2]; +const strong = stat?.querySelector('strong'); +const span = strong?.querySelector('span'); +assert.exists(span); +``` + +第三個嵌套的 `span` 元素應具有 `id` 值爲 `goldText`。 + +```js +const stat = document.querySelectorAll('.stat')[2]; +const strong = stat?.querySelector('strong'); +const span = strong?.querySelector('span'); +assert.equal(span?.id, 'goldText'); +``` + +第三個 `span` 元素應包裹在文本 `50` 周圍。 + +```js +const stat = document.querySelectorAll('.stat')[2]; +const strong = stat?.querySelector('strong'); +const span = strong?.querySelector('span'); +assert.equal(span.innerText, '50'); +``` + +第三個 `.stat` 元素的文本仍應爲 `Gold: 50`。 + +```js +const stat = document.querySelectorAll('.stat')[2]; +assert.equal(stat.innerText, 'Gold: 50'); +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + + + RPG - Dragon Repeller + + +
+
+--fcc-editable-region-- + XP: 0 + Health: 100 + Gold: 50 +--fcc-editable-region-- +
+
+
+
+
+ + +``` diff --git a/curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-basic-javascript-by-building-a-role-playing-game/62a23cb9bc467a147516b500.md b/curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-basic-javascript-by-building-a-role-playing-game/62a23cb9bc467a147516b500.md new file mode 100644 index 00000000000..30f07bd47fc --- /dev/null +++ b/curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-basic-javascript-by-building-a-role-playing-game/62a23cb9bc467a147516b500.md @@ -0,0 +1,99 @@ +--- +id: 62a23cb9bc467a147516b500 +title: 步驟 5 +challengeType: 0 +dashedName: step-5 +--- + +# --description-- + +在 `#controls` 元素中，創建三個 `button` 元素。 第一個應該將 `id` 設置爲 `button1`，以及文本設置爲 `Go to store`。 第二個應該將 `id` 設置爲 `button2`，以及文本設置爲 `Go to cave`。 第三個應該將 `id` 設置爲 `button3`，以及文本設置爲 `Fight dragon`。 + +# --hints-- + +應該將三個 `button` 元素添加到 `#controls` 元素中。 + +```js +const buttons = document.querySelectorAll('#controls > button'); +assert.exists(buttons); +assert.equal(buttons.length, 3); +``` + +第一個按鈕應該將 `id` 設置爲 `button1`。 + +```js +const buttons = document.querySelectorAll('#controls > button'); +const button1 = buttons[0]; +assert.equal(button1.id, 'button1'); +``` + +第一個按鈕應該有文本 `Go to store`。 + +```js +const buttons = document.querySelectorAll('#controls > button'); +const button1 = buttons[0]; +assert.equal(button1.innerText, 'Go to store'); +``` + +第二個按鈕應該將 `id` 設置爲 `button2`。 + +```js +const buttons = document.querySelectorAll('#controls > button'); +const button2 = buttons[1]; +assert.equal(button2.id, 'button2'); +``` + +第二個按鈕應該有文本 `Go to cave`。 + +```js +const buttons = document.querySelectorAll('#controls > button'); +const button2 = buttons[1]; +assert.equal(button2.innerText, 'Go to cave'); +``` + +第三個按鈕應該將 `id` 設置爲 `button3`。 + +```js +const buttons = document.querySelectorAll('#controls > button'); +const button3 = buttons[2]; +assert.equal(button3.id, 'button3'); +``` + +第三個按鈕應該有文本 `Fight dragon`。 + +```js +const buttons = document.querySelectorAll('#controls > button'); +const button3 = buttons[2]; +assert.equal(button3.innerText, 'Fight dragon'); +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + + + RPG - Dragon Repeller + + +
+
+ XP: 0 + Health: 100 + Gold: 50 +
+--fcc-editable-region-- +
+ +
+--fcc-editable-region-- +
+
+
+ + +``` diff --git a/curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-basic-javascript-by-building-a-role-playing-game/62a23d1c5f1c93161f3582ae.md b/curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-basic-javascript-by-building-a-role-playing-game/62a23d1c5f1c93161f3582ae.md new file mode 100644 index 00000000000..e5223f271b2 --- /dev/null +++ b/curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-basic-javascript-by-building-a-role-playing-game/62a23d1c5f1c93161f3582ae.md @@ -0,0 +1,104 @@ +--- +id: 62a23d1c5f1c93161f3582ae +title: 步驟 6 +challengeType: 0 +dashedName: step-6 +--- + +# --description-- + +與 `#stats` 元素類似，`#monsterStats` 元素需要兩個 `span` 元素。 給它們類 `stat`，並給第一個元素文本 `Monster Name:`，給第二個元素文本 `Health:`。 在每個文本之後，添加一個 `strong` 元素和一個空的嵌套 `span` 元素。 + +# --hints-- + +`monsterStats` 元素應該有兩個 `span` 元素。 + +```js +const spans = document.querySelectorAll(`#monsterStats > span`); +assert.equal(spans.length, 2); +``` + +新的 `span` 元素都應該具有 `stat` 的 `class` 值。 + +```js +const spans = document.querySelectorAll(`#monsterStats > span`); +assert.equal(spans[0].className, 'stat'); +assert.equal(spans[1].className, 'stat'); +``` + +第一個 `span` 元素應該包含文本 `Monster Name:`。 請確保間隔正確。 + +```js +const spans = document.querySelectorAll(`#monsterStats > span`); +assert.equal(spans[0].innerText, 'Monster Name: '); +``` + +第二個 `span` 元素應包含文本 `Health:`。 請確保間隔正確。 + +```js +const spans = document.querySelectorAll(`#monsterStats > span`); +assert.equal(spans[1].textContent, 'Health: '); +``` + +第一個 `span` 元素應該有一個 `strong` 元素和一個空的嵌套 `span` 元素。 + +```js +const spans = document.querySelectorAll(`#monsterStats > span`); +const strong = spans[0]?.querySelector('strong'); +const span = strong?.querySelector('span'); +assert.exists(strong); +assert.exists(span); +``` + +第二個 `span` 元素應該有一個 `strong` 元素和一個空的嵌套 `span` 元素。 + +```js +const spans = document.querySelectorAll(`#monsterStats > span`); +const strong = spans[1]?.querySelector('strong'); +const span = strong?.querySelector('span'); +assert.exists(strong); +assert.exists(span); +``` + +`strong` 和 `span` 元素應該在文本之後。 + +```js +const spans = document.querySelectorAll(`#monsterStats > span`); +assert.match(spans[0].innerHTML, /Monster Name: /); +assert.match(spans[1].innerHTML, /Health: /); +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + + + RPG - Dragon Repeller + + +
+
+ XP: 0 + Health: 100 + Gold: 50 +
+
+ + + +
+--fcc-editable-region-- +
+ +
+--fcc-editable-region-- +
+
+ + +``` diff --git a/curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-basic-javascript-by-building-a-role-playing-game/62a2401b9842721796b72850.md b/curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-basic-javascript-by-building-a-role-playing-game/62a2401b9842721796b72850.md new file mode 100644 index 00000000000..9085d193e25 --- /dev/null +++ b/curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-basic-javascript-by-building-a-role-playing-game/62a2401b9842721796b72850.md @@ -0,0 +1,62 @@ +--- +id: 62a2401b9842721796b72850 +title: 步驟 7 +challengeType: 0 +dashedName: step-7 +--- + +# --description-- + +爲你的 `#text` 元素提供以下文本： + +```markup +Welcome to Dragon Repeller. You must defeat the dragon that is preventing people from leaving the town. +You are in the town square. Where do you want to go? Use the buttons above. +``` + +# --hints-- + +`#text` 元素應該有上面引用的文本。 + +```js +const text = document.querySelector('#text'); +assert.equal(text.innerText, "Welcome to Dragon Repeller. You must defeat the dragon that is preventing people from leaving the town. You are in the town square. Where do you want to go? Use the buttons above."); +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + + + RPG - Dragon Repeller + + +
+
+ XP: 0 + Health: 100 + Gold: 50 +
+
+ + + +
+
+ Monster Name: + Health: +
+--fcc-editable-region-- +
+ +
+--fcc-editable-region-- +
+ + +``` diff --git a/curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-basic-javascript-by-building-a-role-playing-game/62a24068d60b671847d1d4e2.md b/curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-basic-javascript-by-building-a-role-playing-game/62a24068d60b671847d1d4e2.md new file mode 100644 index 00000000000..97c61ac6320 --- /dev/null +++ b/curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-basic-javascript-by-building-a-role-playing-game/62a24068d60b671847d1d4e2.md @@ -0,0 +1,68 @@ +--- +id: 62a24068d60b671847d1d4e2 +title: 步驟 8 +challengeType: 0 +dashedName: step-8 +--- + +# --description-- + +現在我們需要快速設置一些樣式。 首先將 `body` 的 `background-color` 設置爲 `darkblue`。 + +# --hints-- + +應該有一個 `body` 選擇器。 + +```js +const body = new __helpers.CSSHelp(document).getStyle('body'); +assert.exists(body); +``` + +`body` 選擇器應該將 `background-color` 屬性設置爲 `darkblue`。 + +```js +const background = new __helpers.CSSHelp(document).getStyle('body')?.getPropertyValue('background-color'); +assert.equal(background, 'darkblue'); +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + + + RPG - Dragon Repeller + + +
+
+ XP: 0 + Health: 100 + Gold: 50 +
+
+ + + +
+
+ Monster Name: + Health: +
+
+ Welcome to Dragon Repeller. You must defeat the dragon that is preventing people from leaving the town. You are in the town square. Where do you want to go? Use the buttons above. +
+
+ + +``` + +```css +--fcc-editable-region-- + +--fcc-editable-region-- +``` diff --git a/curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-basic-javascript-by-building-a-role-playing-game/62a2409897ec621942234cf6.md b/curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-basic-javascript-by-building-a-role-playing-game/62a2409897ec621942234cf6.md new file mode 100644 index 00000000000..d810ed0a591 --- /dev/null +++ b/curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-basic-javascript-by-building-a-role-playing-game/62a2409897ec621942234cf6.md @@ -0,0 +1,86 @@ +--- +id: 62a2409897ec621942234cf6 +title: 步驟 9 +challengeType: 0 +dashedName: step-9 +--- + +# --description-- + +給 `#text` 元素一個 `black` 的 `background-color`，一個 `white` 的 `color` 和一個 `10px` 的邊距。 + +# --hints-- + +應該有一個 `#text` 選擇器。 + +```js +const text = new __helpers.CSSHelp(document).getStyle('#text'); +assert.exists(text); +``` + +`#text` 元素應該有一個 `black` 的 `background-color`。 + +```js +const background = new __helpers.CSSHelp(document).getStyle('#text')?.getPropertyValue('background-color'); +assert.equal(background, 'black'); +``` + +`#text` 元素應該具有 `white` 的 `color`。 + +```js +const color = new __helpers.CSSHelp(document).getStyle('#text')?.getPropertyValue('color'); +assert.equal(color, 'white'); +``` + +`#text` 元素應該有 `10px` 的邊距。 + +```js +const padding = new __helpers.CSSHelp(document).getStyle('#text')?.getPropertyValue('padding'); +assert.equal(padding, '10px'); +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + + + RPG - Dragon Repeller + + +
+
+ XP: 0 + Health: 100 + Gold: 50 +
+
+ + + +
+
+ Monster Name: + Health: +
+
+ Welcome to Dragon Repeller. You must defeat the dragon that is preventing people from leaving the town. You are in the town square. Where do you want to go? Use the buttons above. +
+
+ + +``` + +```css +body { + background-color: darkblue; +} + +--fcc-editable-region-- + +--fcc-editable-region-- +``` diff --git a/curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-basic-javascript-by-building-a-role-playing-game/62a240c67f3dbb1a1e6d95ee.md b/curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-basic-javascript-by-building-a-role-playing-game/62a240c67f3dbb1a1e6d95ee.md new file mode 100644 index 00000000000..91472057efb --- /dev/null +++ b/curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-basic-javascript-by-building-a-role-playing-game/62a240c67f3dbb1a1e6d95ee.md @@ -0,0 +1,113 @@ +--- +id: 62a240c67f3dbb1a1e6d95ee +title: 步驟 10 +challengeType: 0 +dashedName: step-10 +--- + +# --description-- + +爲 `#game` 提供 `500px` 的最大寬度和 `400px` 的最大高度。 將 `background-color` 設置爲 `lightgray`，並將 `color` 設置爲 `white`。 最後，使用邊距使其居中，並在所有四個邊上給它 `10px` 的填充。 + +# --hints-- + +應該有一個 `#game` 選擇器。 + +```js +const game = new __helpers.CSSHelp(document).getStyle('#game'); +assert.exists(game); +``` + +`#game` 選擇器的 `max-width` 應該是 `500px`。 + +```js +const maxWidth = new __helpers.CSSHelp(document).getStyle('#game')?.getPropertyValue('max-width'); +assert.equal(maxWidth, '500px'); +``` + +`#game` 選擇器的 `max-height` 應該是 `400px`。 + +```js +const maxHeight = new __helpers.CSSHelp(document).getStyle('#game')?.getPropertyValue('max-height'); +assert.equal(maxHeight, '400px'); +``` + +`#game` 選擇器應該具有 `lightgray` 的 `background-color`。 + +```js +const background = new __helpers.CSSHelp(document).getStyle('#game')?.getPropertyValue('background-color'); +assert.equal(background, 'lightgray'); +``` + +`#game` 選擇器應該有一個 `color` `white`。 + +```js +const color = new __helpers.CSSHelp(document).getStyle('#game')?.getPropertyValue('color'); +assert.equal(color, 'white'); +``` + +`#game` 選擇器應該將 `margin` 設置爲 `0 auto`。 + +```js +const margin = new __helpers.CSSHelp(document).getStyle('#game')?.getPropertyValue('margin'); +assert.equal(margin, '0px auto'); +``` + +`#game` 選擇器應該有 `10px` 的邊距。 + +```js +const padding = new __helpers.CSSHelp(document).getStyle('#game')?.getPropertyValue('padding'); +assert.equal(padding, '10px'); +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + + + RPG - Dragon Repeller + + +
+
+ XP: 0 + Health: 100 + Gold: 50 +
+
+ + + +
+
+ Monster Name: + Health: +
+
+ Welcome to Dragon Repeller. You must defeat the dragon that is preventing people from leaving the town. You are in the town square. Where do you want to go? Use the buttons above. +
+
+ + +``` + +```css +body { + background-color: darkblue; +} + +#text { + background-color: black; + color: white; + padding: 10px; +} + +--fcc-editable-region-- + +--fcc-editable-region-- +``` diff --git a/curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-basic-javascript-by-building-a-role-playing-game/62a24128d5e8af1b47ad1aab.md b/curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-basic-javascript-by-building-a-role-playing-game/62a24128d5e8af1b47ad1aab.md new file mode 100644 index 00000000000..17c72d536bd --- /dev/null +++ b/curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-basic-javascript-by-building-a-role-playing-game/62a24128d5e8af1b47ad1aab.md @@ -0,0 +1,101 @@ +--- +id: 62a24128d5e8af1b47ad1aab +title: 步驟 11 +challengeType: 0 +dashedName: step-11 +--- + +# --description-- + +給 `#controls` 和 `#stats` 元素一個 `border` 爲 `1px solid black`，一個 `black` 的文本顏色和 `5px` 的填充（padding）。 + +# --hints-- + +應該有一個 `#controls, #stats` 選擇器。 + +```js +const selector = new __helpers.CSSHelp(document).getStyle('#controls, #stats'); +assert.exists(selector); +``` + +`#controls, #stats` 選擇器的 `border` 應該是 `1px solid black`。 + +```js +const border = new __helpers.CSSHelp(document).getStyle('#controls, #stats')?.getPropertyValue('border'); +assert.equal(border, '1px solid black'); +``` + +`#controls, #stats` 選擇器的 `color` 應該是 `black`。 + +```js +const color = new __helpers.CSSHelp(document).getStyle('#controls, #stats')?.getPropertyValue('color'); +assert.equal(color, 'black'); +``` + +`#controls, #stats` 選擇器應該有 `5px` 的填充。 + +```js +const padding = new __helpers.CSSHelp(document).getStyle('#controls, #stats')?.getPropertyValue('padding'); +assert.equal(padding, '5px'); +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + + + RPG - Dragon Repeller + + +
+
+ XP: 0 + Health: 100 + Gold: 50 +
+
+ + + +
+
+ Monster Name: + Health: +
+
+ Welcome to Dragon Repeller. You must defeat the dragon that is preventing people from leaving the town. You are in the town square. Where do you want to go? Use the buttons above. +
+
+ + +``` + +```css +body { + background-color: darkblue; +} + +#text { + background-color: black; + color: white; + padding: 10px; +} + +#game { + max-width: 500px; + max-height: 400px; + background-color: lightgray; + color: white; + margin: 0 auto; + padding: 10px; +} + +--fcc-editable-region-- + +--fcc-editable-region-- +``` diff --git a/curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-basic-javascript-by-building-a-role-playing-game/62a24190868ca51c0b6e83c7.md b/curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-basic-javascript-by-building-a-role-playing-game/62a24190868ca51c0b6e83c7.md new file mode 100644 index 00000000000..43dbf88c791 --- /dev/null +++ b/curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-basic-javascript-by-building-a-role-playing-game/62a24190868ca51c0b6e83c7.md @@ -0,0 +1,127 @@ +--- +id: 62a24190868ca51c0b6e83c7 +title: 步驟 13 +challengeType: 0 +dashedName: step-13 +--- + +# --description-- + +暫時隱藏 `#monsterStats` 元素。 不要更改任何其他樣式。 + +# --hints-- + +應該有一個 `#monsterStats` 選擇器。 + +```js +const monsterStats = new __helpers.CSSHelp(document).getStyle('#monsterStats'); +assert.exists(monsterStats); +``` + +`#monsterStats` 選擇器應具有 `none` 的 `display` 屬性。 + +```js +const display = new __helpers.CSSHelp(document).getStyle('#monsterStats')?.getPropertyValue('display'); +assert.equal(display, 'none'); +``` + +`#monsterStats` 選擇器應該有一個 `1px solid black` 的 `border`。 + +```js +const border = new __helpers.CSSHelp(document).getStyle('#monsterStats')?.getPropertyValue('border'); +assert.equal(border, '1px solid black'); +``` + +`#monsterStats` 選擇器應該有 `5px` 的填充（padding）。 + +```js +const padding = new __helpers.CSSHelp(document).getStyle('#monsterStats')?.getPropertyValue('padding'); +assert.equal(padding, '5px'); +``` + +`#monsterStats` 選擇器應具有 `white` 的 `color`。 + +```js +const color = new __helpers.CSSHelp(document).getStyle('#monsterStats')?.getPropertyValue('color'); +assert.equal(color, 'white'); +``` + +`#monsterStats` 選擇器應具有 `red` 的 `background-color`。 + +```js +const background = new __helpers.CSSHelp(document).getStyle('#monsterStats')?.getPropertyValue('background-color'); +assert.equal(background, 'red'); +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + + + RPG - Dragon Repeller + + +
+
+ XP: 0 + Health: 100 + Gold: 50 +
+
+ + + +
+
+ Monster Name: + Health: +
+
+ Welcome to Dragon Repeller. You must defeat the dragon that is preventing people from leaving the town. You are in the town square. Where do you want to go? Use the buttons above. +
+
+ + +``` + +```css +body { + background-color: darkblue; +} + +#text { + background-color: black; + color: white; + padding: 10px; +} + +#game { + max-width: 500px; + max-height: 400px; + background-color: lightgray; + color: white; + margin: 0 auto; + padding: 10px; +} + +#controls, #stats { + border: 1px solid black; + padding: 5px; + color: black; +} + +--fcc-editable-region-- +#monsterStats { + + border: 1px solid black; + padding: 5px; + color: white; + background-color: red; +} +--fcc-editable-region-- +``` diff --git a/curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-basic-javascript-by-building-a-role-playing-game/62a241df03c1f61ce936f5d9.md b/curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-basic-javascript-by-building-a-role-playing-game/62a241df03c1f61ce936f5d9.md new file mode 100644 index 00000000000..48d7b0f9d12 --- /dev/null +++ b/curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-basic-javascript-by-building-a-role-playing-game/62a241df03c1f61ce936f5d9.md @@ -0,0 +1,101 @@ +--- +id: 62a241df03c1f61ce936f5d9 +title: 步驟 14 +challengeType: 0 +dashedName: step-14 +--- + +# --description-- + +最後，給 `.stat` 元素一個 `10px` 的 `padding-right`。 + +# --hints-- + +應該有一個 `.stat` 選擇器。 + +```js +const stat = new __helpers.CSSHelp(document).getStyle('.stat'); +assert.exists(stat); +``` + +`.stat` 選擇器應該有一個 `10px` 的 `padding-right`。 + +```js +const paddingRight = new __helpers.CSSHelp(document).getStyle('.stat')?.getPropertyValue('padding-right'); +assert.equal(paddingRight, '10px'); +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + + + RPG - Dragon Repeller + + +
+
+ XP: 0 + Health: 100 + Gold: 50 +
+
+ + + +
+
+ Monster Name: + Health: +
+
+ Welcome to Dragon Repeller. You must defeat the dragon that is preventing people from leaving the town. You are in the town square. Where do you want to go? Use the buttons above. +
+
+ + +``` + +```css +body { + background-color: darkblue; +} + +#text { + background-color: black; + color: white; + padding: 10px; +} + +#game { + max-width: 500px; + max-height: 400px; + background-color: lightgray; + color: white; + margin: 0 auto; + padding: 10px; +} + +#controls, #stats { + border: 1px solid black; + padding: 5px; + color: black; +} + +#monsterStats { + display: none; + border: 1px solid black; + padding: 5px; + color: white; + background-color: red; +} + +--fcc-editable-region-- + +--fcc-editable-region-- +``` diff --git a/curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-basic-javascript-by-building-a-role-playing-game/62a2509ba163e020bb9d84ea.md b/curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-basic-javascript-by-building-a-role-playing-game/62a2509ba163e020bb9d84ea.md new file mode 100644 index 00000000000..d32f0879e52 --- /dev/null +++ b/curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-basic-javascript-by-building-a-role-playing-game/62a2509ba163e020bb9d84ea.md @@ -0,0 +1,108 @@ +--- +id: 62a2509ba163e020bb9d84ea +title: 步驟 15 +challengeType: 0 +dashedName: step-15 +--- + +# --description-- + +現在可以開始編寫 JavaScript。 首先創建一個 `script` 元素。 此元素用於將 JavaScript 加載到 HTML 文件中。 應該使用開始 `` 標記。 + +# --hints-- + +應該有一個 `script` 元素。 + +```js +assert.isAtLeast(document.querySelectorAll('script').length, 2); +``` + +`script` 元素應該有一個開始標記。 + +```js +assert.match(code, //i); +``` + +`script` 元素應該有一個結束標記。 + +```js +assert.match(code, /<\/script\s*>/i); +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + + + RPG - Dragon Repeller +--fcc-editable-region-- + +--fcc-editable-region-- + + +
+
+ XP: 0 + Health: 100 + Gold: 50 +
+
+ + + +
+
+ Monster Name: + Health: +
+
+ Welcome to Dragon Repeller. You must defeat the dragon that is preventing people from leaving the town. You are in the town square. Where do you want to go? Use the buttons above. +
+
+ + +``` + +```css +body { + background-color: darkblue; +} + +#text { + background-color: black; + color: white; + padding: 10px; +} + +#game { + max-width: 500px; + max-height: 400px; + background-color: lightgray; + color: white; + margin: 0 auto; + padding: 10px; +} + +#controls, #stats { + border: 1px solid black; + padding: 5px; + color: black; +} + +#monsterStats { + display: none; + border: 1px solid black; + padding: 5px; + color: white; + background-color: red; +} + +.stat { + padding-right: 10px; +} +``` diff --git a/curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-basic-javascript-by-building-a-role-playing-game/62a255dae245b52317da824a.md b/curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-basic-javascript-by-building-a-role-playing-game/62a255dae245b52317da824a.md new file mode 100644 index 00000000000..dae351661e4 --- /dev/null +++ b/curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-basic-javascript-by-building-a-role-playing-game/62a255dae245b52317da824a.md @@ -0,0 +1,108 @@ +--- +id: 62a255dae245b52317da824a +title: 步驟 16 +challengeType: 0 +dashedName: step-16 +--- + +# --description-- + +你的開發者控制檯是最強大的工具之一。 根據你的瀏覽器不同，可能需要通過按 `F12` 或 `Ctrl+Shift+I` 來打開它。 也可以點擊預覽窗口上方的“控制檯”按鈕來查看我們的內置控制檯。 開發者控制檯將包含你的代碼產生的錯誤，但你也可以使用它來查看代碼中變量的值，這有助於調試。 + +在 `script` 標籤之間添加 `console.log("Hello World");` 行，然後單擊 “Console” 按鈕打開我們的控制檯，你應該會看到文本 `Hello World` 在你的控制檯中。 + +請注意該行如何以分號結尾。 JavaScript 中的常見做法是用分號結束代碼行。 + +# --hints-- + +應該在代碼中添加 `console.log("Hello World");` 行。 不要忘記分號。 + +```js +assert.match(code, /console\.log\("Hello World"\);/); +``` + +`console.log("Hello World");` 行應該在 `script` 標記之間。 + +```js +assert.match(code, / +--fcc-editable-region-- + + +
+
+ XP: 0 + Health: 100 + Gold: 50 +
+
+ + + +
+
+ Monster Name: + Health: +
+
+ Welcome to Dragon Repeller. You must defeat the dragon that is preventing people from leaving the town. You are in the town square. Where do you want to go? Use the buttons above. +
+
+ + +``` + +```css +body { + background-color: darkblue; +} + +#text { + background-color: black; + color: white; + padding: 10px; +} + +#game { + max-width: 500px; + max-height: 400px; + background-color: lightgray; + color: white; + margin: 0 auto; + padding: 10px; +} + +#controls, #stats { + border: 1px solid black; + padding: 5px; + color: black; +} + +#monsterStats { + display: none; + border: 1px solid black; + padding: 5px; + color: white; + background-color: red; +} + +.stat { + padding-right: 10px; +} +``` diff --git a/curriculum/challenges/chinese/02-javascript-algorithms-and-data-structures/basic-javascript/practice-comparing-different-values.md b/curriculum/challenges/chinese/02-javascript-algorithms-and-data-structures/basic-javascript/practice-comparing-different-values.md index a344ba6879b..46fa9f4f9d7 100644 --- a/curriculum/challenges/chinese/02-javascript-algorithms-and-data-structures/basic-javascript/practice-comparing-different-values.md +++ b/curriculum/challenges/chinese/02-javascript-algorithms-and-data-structures/basic-javascript/practice-comparing-different-values.md @@ -15,7 +15,7 @@ dashedName: practice-comparing-different-values **示例** -`3 == '3'` 返回 `true` ，因为 JavaScript 执行了从字符串到数字类型的转换。 `3 === '3'` 返回 false，因为类型不同且类型转换没有执行。 +`3 == '3'` 返回 `true` ，因为 JavaScript 执行了从字符串到数字类型的转换。 `3 === '3'` 返回 `false`，因为类型不同，没有进行类型转换。 **提示** 在 JavaScript 中，你可以使用 `typeof` 运算符确定变量或值的类型，如下所示： diff --git a/curriculum/challenges/chinese/02-javascript-algorithms-and-data-structures/basic-javascript/understand-string-immutability.md b/curriculum/challenges/chinese/02-javascript-algorithms-and-data-structures/basic-javascript/understand-string-immutability.md index 9693664fd12..7997d4bfe0e 100644 --- a/curriculum/challenges/chinese/02-javascript-algorithms-and-data-structures/basic-javascript/understand-string-immutability.md +++ b/curriculum/challenges/chinese/02-javascript-algorithms-and-data-structures/basic-javascript/understand-string-immutability.md @@ -11,14 +11,14 @@ dashedName: understand-string-immutability 在 JavaScript 中，字符串（`String`）的值是不可变的（immutable），这意味着一旦字符串被创建就不能被改变。 -例如，下面的代码： +例如，以下代码将产生错误，因为字符串 `Bob` 中的字母 `B` 不能更改为字母 `J`： ```js let myStr = "Bob"; myStr[0] = "J"; ``` -是不会把变量 `myStr` 的值改变成 `Job` 的，因为变量 `myStr` 是不可变的。 注意，这*并不*意味着 `myStr` 永远不能被改变，只是字符串字面量 string literal 的各个字符不能被改变。 改变 `myStr` 的唯一方法是重新给它赋一个值，例如： +请注意，这*不*意味着无法重新分配 `myStr`。 更改 `myStr` 的唯一方法是为其分配一个新值，如下所示： ```js let myStr = "Bob"; diff --git a/curriculum/challenges/chinese/02-javascript-algorithms-and-data-structures/es6/mutate-an-array-declared-with-const.md b/curriculum/challenges/chinese/02-javascript-algorithms-and-data-structures/es6/mutate-an-array-declared-with-const.md index 72aeaf1d7fe..87ecac98bc6 100644 --- a/curriculum/challenges/chinese/02-javascript-algorithms-and-data-structures/es6/mutate-an-array-declared-with-const.md +++ b/curriculum/challenges/chinese/02-javascript-algorithms-and-data-structures/es6/mutate-an-array-declared-with-const.md @@ -8,7 +8,7 @@ dashedName: mutate-an-array-declared-with-const # --description-- -如果你不熟悉 `const`，请查看[这个挑战](/learn/javascript-algorithms-and-data-structures/basic-javascript/declare-a-read-only-variable-with-the-const-keyword)。 +如果你不熟悉 `const`，请查看 这个 const 关键词的挑战。 `const` 声明在现代 JavaScript 中有很多用例。 @@ -23,7 +23,7 @@ s[2] = 45; console.log(s); ``` -`s = [1, 2, 3]` 将导致错误。 `console.log` 将显示值 `[5, 6, 45]`。 +`s = [1, 2, 3]` 将导致错误。 注释掉该行后，`console.log` 将显示值 `[5, 6, 45]`。 如你所见，你可以改变对象 `[5, 6, 7]` 本身，变量 `s` 仍将指向更改后的数组 `[5, 6, 45]`。 像所有数组一样，`s` 中的数组元素是可变的，但是因为使用了 `const`，所以不能使用变量标识符 `s` 来指向一个使用赋值运算符的不同数组。 diff --git a/curriculum/challenges/chinese/03-front-end-development-libraries/front-end-development-libraries-projects/build-a-25-5-clock.md b/curriculum/challenges/chinese/03-front-end-development-libraries/front-end-development-libraries-projects/build-a-25-5-clock.md index 433b232a2ca..20aac4014cb 100644 --- a/curriculum/challenges/chinese/03-front-end-development-libraries/front-end-development-libraries-projects/build-a-25-5-clock.md +++ b/curriculum/challenges/chinese/03-front-end-development-libraries/front-end-development-libraries-projects/build-a-25-5-clock.md @@ -8,9 +8,9 @@ dashedName: build-a-25--5-clock # --description-- -**目标：** 在 [CodePen.io](https://codepen.io) 上实现一个功能类似 的 App。 +**目标：** 构建一个应用，功能和 https://codepen.io/freeCodeCamp/full/XpKrrW 类似。 -在满足以下 [需求](https://en.wikipedia.org/wiki/User_story) 并能通过所有测试的前提下， 赋予它你自己的个人风格。 +完成以下需求，并且通过所有测试。 可以使用你需要的任何库或 API。 赋予它你自己的个人风格。 可以使用 HTML、JavaScript、CSS、Bootstrap、SASS、React、Redux、jQuery 来完成这个挑战。 但鉴于这个章节的学习内容与前端框架相关，推荐使用一款前端框架（比如 React）来完成这个挑战；不推荐使用前面没有提到的技术，否则风险自负。 不推荐使用前面没有提到的技术，否则风险自担。 我们有计划新增其他前端框架课程，例如 Angular 和 Vue，不过目前还没有这些内容。 我们会接受并尝试修复你在使用推荐技术栈创建项目时报告的问题。 编码愉快！ @@ -70,7 +70,7 @@ dashedName: build-a-25--5-clock **需求 28：** 当点击 id 属性为 `reset` 的元素时，id 属性为 `beep` 的音频元素必须停止播放并回到开头。 -你可以使用这个 CodePen 模板，点击 `Save` 即可创建你自己的项目。 或者你可以在任何你喜欢的环境中使用以下 CDN 链接来运行测试：`https://cdn.freecodecamp.org/testable-projects-fcc/v1/bundle.js`。 +你可以使用 CodePen 模版创建你的新项目，点击 `Save` 即可创建你的新项目。 或者你可以在任何你喜欢的环境中使用以下 CDN 链接来运行测试：`https://cdn.freecodecamp.org/testable-projects-fcc/v1/bundle.js`。 当你完成了本项目，并且该项目所有测试运行通过， 请提交项目的 URL。 diff --git a/curriculum/challenges/chinese/03-front-end-development-libraries/front-end-development-libraries-projects/build-a-drum-machine.md b/curriculum/challenges/chinese/03-front-end-development-libraries/front-end-development-libraries-projects/build-a-drum-machine.md index edded4482a2..946d44618f8 100644 --- a/curriculum/challenges/chinese/03-front-end-development-libraries/front-end-development-libraries-projects/build-a-drum-machine.md +++ b/curriculum/challenges/chinese/03-front-end-development-libraries/front-end-development-libraries-projects/build-a-drum-machine.md @@ -8,9 +8,9 @@ dashedName: build-a-drum-machine # --description-- -**目标：** 在 [CodePen.io](https://codepen.io) 上实现一个功能类似 的 App。 +**目标：** 构建一个应用，功能和 https://codepen.io/freeCodeCamp/full/MJyNMd 类似。 -在满足以下 [需求](https://en.wikipedia.org/wiki/User_story) 并能通过所有测试的前提下， 赋予它你自己的个人风格。 +完成以下需求，并且通过所有测试。 可以使用你需要的任何库或 API。 赋予它你自己的个人风格。 可以使用 HTML、JavaScript、CSS、Bootstrap、SASS、React、Redux、jQuery 来完成这个挑战。 但鉴于这个章节的学习内容与前端框架相关，推荐使用一款前端框架（比如 React）来完成这个挑战。 不推荐使用前面没有提到的技术，否则风险自担。 我们有计划新增其他前端框架课程，例如 Angular 和 Vue，不过目前还没有这些内容。 我们会接受并尝试修复你在使用推荐技术栈创建项目时报告的问题。 编码愉快！ @@ -28,9 +28,21 @@ dashedName: build-a-drum-machine **需求 7：** 当触发一个具有 `.drum-pad` 属性的元素时，`#display` 元素内应该展示这个触发元素关联音频片段的描述字符串（每一个字符串都应该是独一无二的）。 -你可以使用这个 CodePen 模板，点击 `Save` 即可创建你自己的项目。 或者可以在任何喜欢的环境中使用以下 CDN 链接来运行测试：`https://cdn.freecodecamp.org/testable-projects-fcc/v1/bundle.js`。 +以下是一些可用于鼓机的音频样本： -当你完成了本项目，并且该项目所有测试运行通过，请提交项目的 URL。 +- [Heater 1](https://s3.amazonaws.com/freecodecamp/drums/Heater-1.mp3) +- [Heater 2](https://s3.amazonaws.com/freecodecamp/drums/Heater-2.mp3) +- [Heater 3](https://s3.amazonaws.com/freecodecamp/drums/Heater-3.mp3) +- [Heater 4](https://s3.amazonaws.com/freecodecamp/drums/Heater-4_1.mp3) +- [Clap](https://s3.amazonaws.com/freecodecamp/drums/Heater-6.mp3) +- [Open-HH](https://s3.amazonaws.com/freecodecamp/drums/Dsc_Oh.mp3) +- [Kick-n'-Hat](https://s3.amazonaws.com/freecodecamp/drums/Kick_n_Hat.mp3) +- [Kick](https://s3.amazonaws.com/freecodecamp/drums/RP4_KICK_1.mp3) +- [Closed-HH](https://s3.amazonaws.com/freecodecamp/drums/Cev_H2.mp3) + +你可以使用 CodePen 模版创建你的新项目，点击 `Save` 即可创建你的新项目。 或者你可以在任何你喜欢的环境中使用以下 CDN 链接来运行测试：`https://cdn.freecodecamp.org/testable-projects-fcc/v1/bundle.js`。 + +当你完成了本项目，并且项目通过所有测试，请提交项目的 URL。 # --solutions-- diff --git a/curriculum/challenges/chinese/03-front-end-development-libraries/front-end-development-libraries-projects/build-a-javascript-calculator.md b/curriculum/challenges/chinese/03-front-end-development-libraries/front-end-development-libraries-projects/build-a-javascript-calculator.md index 8687ea7d703..d2375f1671d 100644 --- a/curriculum/challenges/chinese/03-front-end-development-libraries/front-end-development-libraries-projects/build-a-javascript-calculator.md +++ b/curriculum/challenges/chinese/03-front-end-development-libraries/front-end-development-libraries-projects/build-a-javascript-calculator.md @@ -8,9 +8,9 @@ dashedName: build-a-javascript-calculator # --description-- -**目标：** 在 [CodePen.io](https://codepen.io) 上实现一个功能类似 的 App。 +**目标：** 构建一个应用，功能和 https://codepen.io/freeCodeCamp/full/wgGVVX 类似。 -在满足以下 [需求](https://en.wikipedia.org/wiki/User_story) 并能通过所有测试的前提下， 赋予它你自己的个人风格。 +完成以下需求，并且通过所有测试。 可以使用你需要的任何库或 API。 赋予它你自己的个人风格。 可以使用 HTML、JavaScript、CSS、Bootstrap、SASS、React、Redux、jQuery 来完成这个挑战。 但鉴于这个章节的学习内容与前端框架相关，推荐使用一款前端框架（比如 React）来完成这个挑战；不推荐使用前面没有提到的技术，否则风险自负。 不推荐使用前面没有提到的技术，否则风险自担。 我们有计划新增其他前端框架课程，例如 Angular 和 Vue，不过目前还没有这些内容。 我们会接受并尝试修复你在使用推荐技术栈创建项目时报告的问题。 编码愉快！ @@ -51,7 +51,7 @@ dashedName: build-a-javascript-calculator - **立即执行逻辑：** `11.5` - **公式／表达式逻辑：** `32.5` -你可以使用这个 CodePen 模板，点击 `Save` 即可创建你自己的项目。 或者可以在任何喜欢的环境中使用以下 CDN 链接来运行测试：`https://cdn.freecodecamp.org/testable-projects-fcc/v1/bundle.js`。 +你可以使用 CodePen 模版创建你的新项目，点击 `Save` 即可创建你的新项目。 或者可以在任何喜欢的环境中使用以下 CDN 链接来运行测试：`https://cdn.freecodecamp.org/testable-projects-fcc/v1/bundle.js`。 当你完成了本项目，并且该项目所有测试运行通过，请提交项目的 URL。 diff --git a/curriculum/challenges/chinese/03-front-end-development-libraries/front-end-development-libraries-projects/build-a-markdown-previewer.md b/curriculum/challenges/chinese/03-front-end-development-libraries/front-end-development-libraries-projects/build-a-markdown-previewer.md index 8aa5a48d705..3e1ce796f02 100644 --- a/curriculum/challenges/chinese/03-front-end-development-libraries/front-end-development-libraries-projects/build-a-markdown-previewer.md +++ b/curriculum/challenges/chinese/03-front-end-development-libraries/front-end-development-libraries-projects/build-a-markdown-previewer.md @@ -8,9 +8,9 @@ dashedName: build-a-markdown-previewer # --description-- -**目标：** 在 [CodePen.io](https://codepen.io) 上实现一个功能类似 的 App。 +**目标：** 构建一个应用，功能和 https://codepen.io/freeCodeCamp/full/GrZVVO 类似。 -在满足以下 [需求](https://en.wikipedia.org/wiki/User_story) 并能通过所有测试的前提下， 赋予它你自己的个人风格。 +完成以下需求，并且通过所有测试。 可以使用你需要的任何库或 API。 赋予它你自己的个人风格。 可以使用 HTML、JavaScript、CSS、Bootstrap、SASS、React、Redux、jQuery 来完成这个挑战。 但鉴于这个章节的学习内容与前端框架相关，推荐使用一款前端框架（比如 React）来完成这个挑战；不推荐使用前面没有提到的技术，否则风险自负。 不推荐使用前面没有提到的技术，否则风险自担。 我们有计划新增其他前端框架课程，例如 Angular 和 Vue，不过目前还没有这些内容。 我们会接受并尝试修复你在使用推荐技术栈创建项目时报告的问题。 编码愉快！ @@ -28,7 +28,7 @@ dashedName: build-a-markdown-previewer **可选需求（你无需通过这项测试）：** Markdown 预览器能够解析回车符并且将他们以 `br`（换行）元素的形式渲染出来。 -你可以使用这个 CodePen 模板，点击 `Save` 即可创建你自己的项目。 或者可以在任何喜欢的环境中使用以下 CDN 链接来运行测试：`https://cdn.freecodecamp.org/testable-projects-fcc/v1/bundle.js`。 +你可以使用 CodePen 模版创建你的新项目，点击 `Save` 即可创建你的新项目。 或者可以在任何喜欢的环境中使用以下 CDN 链接来运行测试：`https://cdn.freecodecamp.org/testable-projects-fcc/v1/bundle.js`。 当你完成了本项目，并且该项目所有测试运行通过，请提交项目的 URL。 diff --git a/curriculum/challenges/chinese/03-front-end-development-libraries/front-end-development-libraries-projects/build-a-random-quote-machine.md b/curriculum/challenges/chinese/03-front-end-development-libraries/front-end-development-libraries-projects/build-a-random-quote-machine.md index 76dea6de4c2..dd2318ae982 100644 --- a/curriculum/challenges/chinese/03-front-end-development-libraries/front-end-development-libraries-projects/build-a-random-quote-machine.md +++ b/curriculum/challenges/chinese/03-front-end-development-libraries/front-end-development-libraries-projects/build-a-random-quote-machine.md @@ -8,9 +8,9 @@ dashedName: build-a-random-quote-machine # --description-- -**目标：** 在 [CodePen.io](https://codepen.io) 上实现一个功能类似 的 App。 +**目标：** 构建一个应用，功能和 https://codepen.io/freeCodeCamp/full/qRZeGZ 类似。 -在满足以下 [需求](https://en.wikipedia.org/wiki/User_story) 并能通过所有测试的前提下， 赋予它你自己的个人风格。 +完成以下需求，并且通过所有测试。 可以使用你需要的任何库或 API。 赋予它你自己的个人风格。 可以使用 HTML、JavaScript、CSS、Bootstrap、SASS、React、Redux、jQuery 来完成这个挑战。 但鉴于这个章节的学习内容与前端框架相关，推荐使用一款前端框架（比如 React）来完成这个挑战；不推荐使用前面没有提到的技术，否则风险自负。 不推荐使用前面没有提到的技术，否则风险自担。 我们有计划新增其他前端框架课程，例如 Angular 和 Vue，不过目前还没有这些内容。 我们会接受并尝试修复你在使用推荐技术栈创建项目时报告的问题。 编码愉快！ @@ -36,7 +36,7 @@ dashedName: build-a-random-quote-machine **需求 11：** 具有 `#quote-box` 属性的包裹元素应该水平居中。 请在浏览器缩放尺寸为 100% 且页面窗口最大化时运行测试。 -你可以使用这个 CodePen 模板，点击 `Save` 创建即可你自己的项目 或者可以在任何喜欢的环境中使用以下 CDN 链接来运行测试：`https://cdn.freecodecamp.org/testable-projects-fcc/v1/bundle.js`。 +你可以使用 CodePen 模版创建你的新项目，点击 `Save` 即可创建你的新项目。 或者可以在任何喜欢的环境中使用以下 CDN 链接来运行测试：`https://cdn.freecodecamp.org/testable-projects-fcc/v1/bundle.js`。 一旦完成了本项目并且该项目所有测试运行通过，请提交项目的 URL。 diff --git a/curriculum/challenges/chinese/03-front-end-development-libraries/jquery/change-text-inside-an-element-using-jquery.md b/curriculum/challenges/chinese/03-front-end-development-libraries/jquery/change-text-inside-an-element-using-jquery.md index 5693fa394e7..e8c34ae8391 100644 --- a/curriculum/challenges/chinese/03-front-end-development-libraries/jquery/change-text-inside-an-element-using-jquery.md +++ b/curriculum/challenges/chinese/03-front-end-development-libraries/jquery/change-text-inside-an-element-using-jquery.md @@ -22,7 +22,7 @@ jQuery 还有一个类似的函数 `.text()`，可以在不添加标签的前提 给 id 为 `target4` 的按钮的文本添加强调效果。 -查看这篇[关于 <em> 的文章](https://www.freecodecamp.org/news/html-elements-explained-what-are-html-tags/#em-element)来了解更多 `` 和 `` 的区别和用法。 +查看我们的专栏文章 <em>来了解 `` 和 `` 及其用途之间的差异。 注意，`` 标签虽然传统上用来强调文本，但此后常用作图标的标签。 `` 标签作为强调标签现在已被广泛接受。 可以使用任意一种完成这个挑战。 diff --git a/curriculum/challenges/chinese/03-front-end-development-libraries/react-and-redux/moving-forward-from-here.md b/curriculum/challenges/chinese/03-front-end-development-libraries/react-and-redux/moving-forward-from-here.md index 3c665a5e709..acc4143c573 100644 --- a/curriculum/challenges/chinese/03-front-end-development-libraries/react-and-redux/moving-forward-from-here.md +++ b/curriculum/challenges/chinese/03-front-end-development-libraries/react-and-redux/moving-forward-from-here.md @@ -10,7 +10,7 @@ dashedName: moving-forward-from-here 恭喜！ 你完成了 React 和 Redux 的所有课程！ 结束之前，还要再提一点。 通常，我们不会在这样的编辑器中编写 React 应用代码。 如果你在自己的计算机上使用 npm 和文件系统，这个挑战可让你一瞥 React 应用的语法之貌。 除了使用 `import` 语句（这些语句引入了各挑战中提供的所有依赖关系），其代码看起来类似。 “管理包（含 npm）”这一节更详细地介绍了 npm。 -最后，写 React 和 Redux 的代码通常需要一些配置， 且很快会变得复杂起来。 如果你有兴趣在自己的电脑上尝试，Create React App 已配置好，并准备就绪。 +最后，写 React 和 Redux 的代码通常需要一些配置， 且很快会变得复杂起来。 如果你有兴趣在自己的机器上进行实验，Create React App 已配置好并准备就绪。 或者，你可以在 CodePen 中启用 Babel 作为 JavaScript 预处理器，将 React 和 ReactDOM 添加为外部 JavaScript 资源，这样编写应用。 diff --git a/curriculum/challenges/chinese/03-front-end-development-libraries/react/create-a-stateful-component.md b/curriculum/challenges/chinese/03-front-end-development-libraries/react/create-a-stateful-component.md index 3736e4ffa0a..251d3c91682 100644 --- a/curriculum/challenges/chinese/03-front-end-development-libraries/react/create-a-stateful-component.md +++ b/curriculum/challenges/chinese/03-front-end-development-libraries/react/create-a-stateful-component.md @@ -22,7 +22,7 @@ this.state = { # --instructions-- -代码编辑器中有一个组件试图从其 `state` 中渲染一个 `name` 属性， 但是 `state` 还没有定义。 在 `constructor` 中使用 `state` 初始化组件，并将你的名字赋给 `name` 属性。 +在代码编辑器里，有一个组件尝试渲染 `state` 中的 `firstName` 属性。 但是 `state` 还没有定义。 在 `constructor` 中使用 `state` 初始化这个组件，并将你的名字赋值给 `firstName` 属性。 # --hints-- @@ -55,7 +55,7 @@ assert( ); ``` -应使用被设置为字符串的 `name` 属性来初始化 `StatefulComponent` 的 state。 +`StatefulComponent` 中的 state 应该初始化为被设置成字符串的 `firstName` 属性。 ```js assert( @@ -65,13 +65,13 @@ assert( ); const initialState = mockedComponent.state(); return ( - typeof initialState === 'object' && typeof initialState.name === 'string' + typeof initialState === 'object' && typeof initialState.firstName === 'string' ); })() ); ``` -`StatefulComponent` 中 state 的 `name` 属性应该渲染在 `h1` 元素里。 +`StatefulComponent` 状态中的属性 `firstName` 应该呈现在 `h1` 元素中。 ```js assert( @@ -80,7 +80,7 @@ assert( React.createElement(StatefulComponent) ); const initialState = mockedComponent.state(); - return mockedComponent.find('h1').text() === initialState.name; + return mockedComponent.find('h1').text() === initialState.firstName; })() ); ``` @@ -106,7 +106,7 @@ class StatefulComponent extends React.Component { render() { return (
-

{this.state.name}

+

{this.state.firstName}

); } @@ -120,13 +120,13 @@ class StatefulComponent extends React.Component { constructor(props) { super(props); this.state = { - name: 'freeCodeCamp!' + firstName: 'freeCodeCamp!' } } render() { return (
-

{this.state.name}

+

{this.state.firstName}

); } diff --git a/curriculum/challenges/chinese/03-front-end-development-libraries/react/introducing-inline-styles.md b/curriculum/challenges/chinese/03-front-end-development-libraries/react/introducing-inline-styles.md index 3569b500795..f9718e1cc09 100644 --- a/curriculum/challenges/chinese/03-front-end-development-libraries/react/introducing-inline-styles.md +++ b/curriculum/challenges/chinese/03-front-end-development-libraries/react/introducing-inline-styles.md @@ -8,7 +8,7 @@ dashedName: introducing-inline-styles # --description-- -还有其他复杂的概念可以为 React 代码增加强大的功能。 但是，你可能会想知道更简单的问题，比如：如何对在 React 中创建的 JSX 元素添加样式。 你可能知道，由于[将 class 应用于 JSX 元素的方式](/learn/front-end-development-libraries/react/define-an-html-class-in-jsx)与 HTML 中的使用并不完全相同。 +还有其他复杂的概念可以为 React 代码增加强大的功能。 但是，你可能会想知道更简单的问题，比如：如何对在 React 中创建的 JSX 元素添加样式。 你可能知道，鉴于将 class 应用于 JSX 元素的方式，它与使用 HTML 并不完全相同。 如果从样式表导入样式，它就没有太大的不同。 使用 `className` 属性将 class 应用于 JSX 元素，并将样式应用于样式表中的 class。 另一种选择是使用内联样式，这在 ReactJS 开发中非常常见。 diff --git a/curriculum/challenges/chinese/03-front-end-development-libraries/react/render-conditionally-from-props.md b/curriculum/challenges/chinese/03-front-end-development-libraries/react/render-conditionally-from-props.md index 2d2c09fa76d..2866ce5a0a8 100644 --- a/curriculum/challenges/chinese/03-front-end-development-libraries/react/render-conditionally-from-props.md +++ b/curriculum/challenges/chinese/03-front-end-development-libraries/react/render-conditionally-from-props.md @@ -123,7 +123,7 @@ assert.strictEqual( })(); ``` -当 `GameOfChance` 组件第一次挂载到 DOM 上时，每次按钮被点击，都应该返回一个 `h1` 元素，元素中随机渲染 `You Win!` 或者 `You Lose!`。 +当 `GameOfChance` 组件第一次挂载到 DOM 上时，每次按钮被点击，都应该返回一个 `h1` 元素，元素中随机渲染 `You Win!` 或者 `You Lose!`。 注意：这有时可能会失败。 如果发生这种情况，请再试一次。 ```js (() => { @@ -265,6 +265,11 @@ class GameOfChance extends React.Component { # --solutions-- ```jsx +// We want this to be deterministic for testing purposes. +const randomSequence = [true, false, false, true, true, false, false, true, true, false]; +let index = 0; +const fiftyFifty = () => randomSequence[index++ % randomSequence.length]; + class Results extends React.Component { constructor(props) { super(props); @@ -290,11 +295,10 @@ class GameOfChance extends React.Component { }); } render() { - const expression = Math.random() >= 0.5; return (
- +

{'Turn: ' + this.state.counter}

); diff --git a/curriculum/challenges/chinese/03-front-end-development-libraries/react/set-state-with-this.setstate.md b/curriculum/challenges/chinese/03-front-end-development-libraries/react/set-state-with-this.setstate.md index 30b3e1d108f..7c60641e7b8 100644 --- a/curriculum/challenges/chinese/03-front-end-development-libraries/react/set-state-with-this.setstate.md +++ b/curriculum/challenges/chinese/03-front-end-development-libraries/react/set-state-with-this.setstate.md @@ -16,7 +16,7 @@ this.setState({ }); ``` -React 要求永远不要直接修改 `state`，而是在 state 发生改变时始终使用 `this.setState()`。 此外，应该注意，React 可以批量处理多个 state 更新以提高性能。 这意味着通过 `setState` 方法进行的 state 更新可以是异步的。 `setState` 方法有一种替代语法可以解决异步问题， 虽然这很少用到，但是最好还是记住它！ 有关详细信息，请参阅[React 文档](https://reactjs.org/docs/state-and-lifecycle.html#state-updates-may-be-asynchronous)。 +React 要求永远不要直接修改 `state`，而是在 state 发生改变时始终使用 `this.setState()`。 此外，应该注意，React 可以批量处理多个 state 更新以提高性能。 这意味着通过 `setState` 方法进行的 state 更新可以是异步的。 `setState` 方法有一种替代语法可以解决异步问题， 虽然这很少用到，但是最好还是记住它！ 请查阅我们的 React 文章了解更多详情。 # --instructions-- diff --git a/curriculum/challenges/chinese/03-front-end-development-libraries/react/use-array.map-to-dynamically-render-elements.md b/curriculum/challenges/chinese/03-front-end-development-libraries/react/use-array.map-to-dynamically-render-elements.md index af534dd813d..3e5d4c1c16c 100644 --- a/curriculum/challenges/chinese/03-front-end-development-libraries/react/use-array.map-to-dynamically-render-elements.md +++ b/curriculum/challenges/chinese/03-front-end-development-libraries/react/use-array.map-to-dynamically-render-elements.md @@ -16,7 +16,7 @@ dashedName: use-array-map-to-dynamically-render-elements 代码编辑器完成了 `MyToDoList` 组件的大部分设置。 如果完成了受控表单挑战，这些代码中的一些应该看起来很熟悉。 你会注意到一个 `textarea` 和一个 `button`，以及一些跟踪它们状态的方法，但是页面当前还没有任何东西被渲染。 -在 `constructor` 中，创建一个 `this.state` 对象并定义两个 state：`userInput` 应该初始化为空字符串，`toDoList` 应该初始化为空数组。 接下来，删除 `items` 变量旁边 `render()` 方法中的注释。 取而代之的是，将存储在组件内部 state 中的 `toDoList` 数组一一遍历并相应的动态呈现 `li` 元素中。 尝试在 `textarea` 中输入 `eat, code, sleep, repeat`，然后点击按钮，看看会发生什么。 +在 `constructor` 中，创建一个 `this.state` 对象并定义两个 state：`userInput` 应该初始化为空字符串，`toDoList` 应该初始化为空数组。 接下来，在 `render()` 方法中删除 `items` 变量的 `null` 值。 取而代之的是，将存储在组件内部 state 中的 `toDoList` 数组一一遍历并相应的动态呈现 `li` 元素中。 尝试在 `textarea` 中输入 `eat, code, sleep, repeat`，然后点击按钮，看看会发生什么。 **注意：** 像这样的映射操作创建的所有兄弟子元素都需要提供唯一的 `key` 属性。 别担心，这是下一个挑战的主题。 diff --git a/curriculum/challenges/chinese/03-front-end-development-libraries/react/use-proptypes-to-define-the-props-you-expect.md b/curriculum/challenges/chinese/03-front-end-development-libraries/react/use-proptypes-to-define-the-props-you-expect.md index d729443954a..1d653cdaec5 100644 --- a/curriculum/challenges/chinese/03-front-end-development-libraries/react/use-proptypes-to-define-the-props-you-expect.md +++ b/curriculum/challenges/chinese/03-front-end-development-libraries/react/use-proptypes-to-define-the-props-you-expect.md @@ -16,7 +16,7 @@ React 提供了有用的类型检查特性，以验证组件是否接收了正 MyComponent.propTypes = { handleClick: PropTypes.func.isRequired } ``` -在上面的示例中，`PropTypes.func` 部分检查 `handleClick` 是否为函数。 添加 `isRequired`，告诉 React `handleClick` 是该组件的必需属性。 如果没有那个属性，将出现警告。 还要注意 `func` 代表 `function` 。 在 7 种 JavaScript 原语类型中， `function` 和 `boolean` （写为 `bool` ）是唯一使用异常拼写的两种类型。 除了原始类型，还有其他类型可用。 例如，你可以检查 prop 是否为 React 元素。 请参阅[文档](https://reactjs.org/docs/typechecking-with-proptypes.html#proptypes)以获取所有选项。 +在上面的示例中，`PropTypes.func` 部分检查 `handleClick` 是否为函数。 添加 `isRequired`，告诉 React `handleClick` 是该组件的必需属性。 如果没有那个属性，将出现警告。 还要注意 `func` 代表 `function` 。 在 7 种 JavaScript 原语类型中， `function` 和 `boolean` （写为 `bool` ）是唯一使用异常拼写的两种类型。 除了原始类型，还有其他类型可用。 例如，你可以检查 prop 是否为 React 元素。 请查看文档以获取所有选项。 **注意：**在 React v15.5.0 中, `PropTypes` 可以从 React 中单独引入，例如：`import PropTypes from 'prop-types';`。 diff --git a/curriculum/challenges/chinese/03-front-end-development-libraries/react/use-the-lifecycle-method-componentwillmount.md b/curriculum/challenges/chinese/03-front-end-development-libraries/react/use-the-lifecycle-method-componentwillmount.md index 4d167a71350..db85bf6ddea 100644 --- a/curriculum/challenges/chinese/03-front-end-development-libraries/react/use-the-lifecycle-method-componentwillmount.md +++ b/curriculum/challenges/chinese/03-front-end-development-libraries/react/use-the-lifecycle-method-componentwillmount.md @@ -10,7 +10,7 @@ dashedName: use-the-lifecycle-method-componentwillmount React 组件有几种特殊方法，可以在组件生命周期的特定点执行操作。 这些称为生命周期方法或生命周期钩子，允许在特定时间点捕获组件。 这可以在渲染之前、更新之前、接收 props 之前、卸载之前等等。 以下是一些主要生命周期方法的列表： `componentWillMount()` `componentDidMount()` `shouldComponentUpdate()` `componentDidUpdate()` `componentWillUnmount()` 接下来的几节课将讲述这些生命周期方法的一些基本用例。 -**注意：** `componentWillMount` 生命周期方法会在版本 16.X 废弃在版本 17 移除。 [(来源)](https://reactjs.org/blog/2018/03/27/update-on-async-rendering.html) +**注意：** `componentWillMount` 生命周期方法会在版本 16.X 废弃在版本 17 移除。 在这篇文章中了解更多。 # --instructions-- diff --git a/curriculum/challenges/chinese/03-front-end-development-libraries/redux/create-a-redux-store.md b/curriculum/challenges/chinese/03-front-end-development-libraries/redux/create-a-redux-store.md index df973be4e70..e97794be121 100644 --- a/curriculum/challenges/chinese/03-front-end-development-libraries/redux/create-a-redux-store.md +++ b/curriculum/challenges/chinese/03-front-end-development-libraries/redux/create-a-redux-store.md @@ -20,7 +20,7 @@ Redux `store` 是一个保存和管理应用程序状态的`state`， 可以使 声明一个 `store` 变量并把它分配给 `createStore()` 方法，然后把 `reducer` 作为一个参数传入即可。 -**注意**: 编辑器中的代码使用 ES6 默认参数语法将 state 的值初始化为 `5`， 如果你不熟悉默认参数，你可以参考[ES6 全部课程](https://learn.freecodecamp.org/javascript-algorithms-and-data-structures/es6/set-default-parameters-for-your-functions)，它里面涵盖了这个内容。 +**注意**: 编辑器中的代码使用 ES6 默认参数语法将 state 的值初始化为 `5`， 如果你不熟悉默认参数，可以参考 课程中的 ES6 部分，其中涵盖了这个主题。 # --hints-- diff --git a/curriculum/challenges/chinese/04-data-visualization/json-apis-and-ajax/access-the-json-data-from-an-api.md b/curriculum/challenges/chinese/04-data-visualization/json-apis-and-ajax/access-the-json-data-from-an-api.md index 3f590981cb0..02f3099953d 100644 --- a/curriculum/challenges/chinese/04-data-visualization/json-apis-and-ajax/access-the-json-data-from-an-api.md +++ b/curriculum/challenges/chinese/04-data-visualization/json-apis-and-ajax/access-the-json-data-from-an-api.md @@ -12,7 +12,7 @@ dashedName: access-the-json-data-from-an-api 现在，你将进一步观察返回的数据，以更好地了解 JSON 格式。 回忆一下 JavaScript 中的一些符号： -
[ ] -> 方括号表示数组
{ } -> 大括号表示对象
" " -> 双引号表示字符串， 它们还用于表示 JSON 中的键名
+
[ ] -> 方括号表示数组
{ } -> 大括号表示对象
" " -> 双引号表示字符串。 它们还用于表示 JSON 中的键名。
理解 API 返回数据的结构是必需的，它将影响你如何获取你所需的值。 diff --git a/curriculum/challenges/chinese/05-back-end-development-and-apis/back-end-development-and-apis-projects/exercise-tracker.md b/curriculum/challenges/chinese/05-back-end-development-and-apis/back-end-development-and-apis-projects/exercise-tracker.md index e99c756dfe0..35b2c6be9ad 100644 --- a/curriculum/challenges/chinese/05-back-end-development-and-apis/back-end-development-and-apis-projects/exercise-tracker.md +++ b/curriculum/challenges/chinese/05-back-end-development-and-apis/back-end-development-and-apis-projects/exercise-tracker.md @@ -8,10 +8,10 @@ dashedName: exercise-tracker # --description-- -构建一个 JavaScript 的全栈应用，在功能上与这个应用相似： 。 在这个项目中，你将使用以下方法之一编写你的代码： +构建一个功能类似于此的全栈 JavaScript 应用：https://exercise-tracker.freecodecamp.rocks。 在这个项目中，你将使用以下方法之一编写你的代码： -- 克隆 [GitHub 仓库](https://github.com/freeCodeCamp/boilerplate-project-exercisetracker/) 并在本地完成你的项目。 -- 使用[我们的 Replit 初始化项目](https://replit.com/github/freeCodeCamp/boilerplate-project-exercisetracker)来完成你的项目。 +- 克隆这个 GitHub 仓库，并在本地完成你的项目。 +- 使用我们在 Replit 上的初始化项目来完成你的项目。 - 使用你选择的网站生成器来完成项目。 需要包含我们 GitHub 仓库的所有文件。 完成本项目后，请将一个正常运行的 demo（项目演示）托管在可以公开访问的平台。 然后在 `Solution Link` 字段中提交它的 URL。 此外，还可以将项目的源码提交到 `GitHub Link` 中。 @@ -79,7 +79,7 @@ async (getUserInput) => { 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) + body: `username=fcc_test_${Date.now()}`.substring(0, 29) }); assert.isTrue(res.ok); if(!res.ok) { @@ -96,7 +96,7 @@ async (getUserInput) => { 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) + body: `username=fcc_test_${Date.now()}`.substring(0, 29) }); if (res.ok) { const { _id, username } = await res.json(); @@ -164,7 +164,7 @@ async (getUserInput) => { 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) + body: `username=fcc_test_${Date.now()}`.substring(0, 29) }); if (res.ok) { const { _id, username } = await res.json(); @@ -198,7 +198,7 @@ async (getUserInput) => { 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) + body: `username=fcc_test_${Date.now()}`.substring(0, 29) }); if (res.ok) { const { _id, username } = await res.json(); @@ -237,7 +237,7 @@ async (getUserInput) => { 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) + body: `username=fcc_test_${Date.now()}`.substring(0, 29) }); if (res.ok) { const { _id, username } = await res.json(); @@ -276,7 +276,7 @@ async (getUserInput) => { 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) + body: `username=fcc_test_${Date.now()}`.substring(0, 29) }); if (res.ok) { const { _id, username } = await res.json(); @@ -309,7 +309,7 @@ async (getUserInput) => { }; ``` -对 `/api/users/:id/logs` 的 `GET` 请求将返回用户对象，其中包含添加的所有练习的 `log` 数组。 +对 `/api/users/:_id/logs` 的 `GET` 请求，将返回用户对象，其中包含添加的所有练习的 `log` 数组。 ```js async(getUserInput) => { @@ -319,7 +319,7 @@ async(getUserInput) => { headers: { 'Content-Type': 'application/x-www-form-urlencoded' }, - body: `username=fcc_test_${Date.now()}`.substr(0, 29) + body: `username=fcc_test_${Date.now()}`.substring(0, 29) }) if(res.ok){ const {_id, username} = await res.json(); @@ -353,7 +353,7 @@ async(getUserInput) => { }; ``` -从 `GET /api/users/:id/logs` 返回的 `log` 数组中的每一项都是一个应该具有 `description` 的对象， `duration` 和 `date` 属性。 +从 `GET /api/users/:_id/logs` 返回的 `log` 数组中的每个项目都是一个应该具有 `description`、`duration` 和 `date` 属性的对象。 ```js async(getUserInput) => { @@ -363,7 +363,7 @@ async(getUserInput) => { headers: { 'Content-Type': 'application/x-www-form-urlencoded' }, - body: `username=fcc_test_${Date.now()}`.substr(0, 29) + body: `username=fcc_test_${Date.now()}`.substring(0, 29) }); if(res.ok) { const {_id, username} = await res.json(); @@ -400,7 +400,7 @@ async(getUserInput) => { }; ``` -从 `GET /api/users/:id/logs` 返回的 `log` 数组中任何对象的 `description` 属性都应该是一个字符串。 +从 `GET /api/users/:_id/logs` 返回的 `log` 数组中任何对象的 `description` 属性都应该是一个字符串。 ```js async(getUserInput) => { @@ -410,7 +410,7 @@ async(getUserInput) => { headers: { 'Content-Type': 'application/x-www-form-urlencoded', }, - body: `username=fcc_test_${Date.now()}`.substr(0,29) + body: `username=fcc_test_${Date.now()}`.substring(0,29) }); if(res.ok) { const {_id, username} = await res.json(); @@ -447,7 +447,7 @@ async(getUserInput) => { }; ``` -从 `GET /api/users/:id/logs` 返回的 `log` 数组中任何对象的 `duration` 属性都应该是一个数字。 +从 `GET /api/users/:_id/logs` 返回的 `log` 数组中任何对象的 `duration` 属性应该是一个数字。 ```js async(getUserInput) => { @@ -457,7 +457,7 @@ async(getUserInput) => { headers: { 'Content-Type': 'application/x-www-form-urlencoded', }, - body: `username=fcc_test_${Date.now()}`.substr(0,29) + body: `username=fcc_test_${Date.now()}`.substring(0,29) }); if(res.ok) { const {_id, username} = await res.json(); @@ -494,7 +494,7 @@ async(getUserInput) => { }; ``` -从 `GET /api/users/:id/logs` 返回的 `log` 数组中任何对象的 `date` 属性应该是一个字符串。 使用 `Date` API 的 `dateString` 格式。 +从 `GET /api/users/:_id/logs` 返回的 `log` 数组中任何对象的 `date` 属性应该是一个字符串。 使用 `Date` API 的 `dateString` 格式。 ```js async(getUserInput) => { @@ -504,7 +504,7 @@ async(getUserInput) => { headers: { 'Content-Type': 'application/x-www-form-urlencoded', }, - body: `username=fcc_test_${Date.now()}`.substr(0,29) + body: `username=fcc_test_${Date.now()}`.substring(0,29) }); if(res.ok) { const {_id, username} = await res.json(); @@ -549,7 +549,7 @@ async (getUserInput) => { 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) + body: `username=fcc_test_${Date.now()}`.substring(0, 29) }); if (res.ok) { const { _id, username } = await res.json(); diff --git a/curriculum/challenges/chinese/05-back-end-development-and-apis/back-end-development-and-apis-projects/file-metadata-microservice.md b/curriculum/challenges/chinese/05-back-end-development-and-apis/back-end-development-and-apis-projects/file-metadata-microservice.md index 4f7d2f5f9e4..abf4ae03754 100644 --- a/curriculum/challenges/chinese/05-back-end-development-and-apis/back-end-development-and-apis-projects/file-metadata-microservice.md +++ b/curriculum/challenges/chinese/05-back-end-development-and-apis/back-end-development-and-apis-projects/file-metadata-microservice.md @@ -8,10 +8,10 @@ dashedName: file-metadata-microservice # --description-- -构建一个 JavaScript 的全栈应用，在功能上与这个应用相似：。 在这个项目中，你将使用以下方法之一编写你的代码： +构建一个功能类似于此的全栈 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 仓库，并在本地完成你的项目。 +- 使用我们在 Replit 上的初始化项目来完成你的项目。 - 使用你选择的网站生成器来完成项目。 需要包含我们 GitHub 仓库的所有文件。 完成本项目后，请将一个正常运行的 demo（项目演示）托管在可以公开访问的平台。 然后在 `Solution Link` 字段中提交它的 URL。 此外，还可以将项目的源码提交到 `GitHub Link` 中。 diff --git a/curriculum/challenges/chinese/05-back-end-development-and-apis/back-end-development-and-apis-projects/request-header-parser-microservice.md b/curriculum/challenges/chinese/05-back-end-development-and-apis/back-end-development-and-apis-projects/request-header-parser-microservice.md index 19b218543fd..d1827e71c43 100644 --- a/curriculum/challenges/chinese/05-back-end-development-and-apis/back-end-development-and-apis-projects/request-header-parser-microservice.md +++ b/curriculum/challenges/chinese/05-back-end-development-and-apis/back-end-development-and-apis-projects/request-header-parser-microservice.md @@ -8,10 +8,10 @@ dashedName: request-header-parser-microservice # --description-- -构建一个 JavaScript 的全栈应用，在功能上与这个应用相似：。 在这个项目中，你将使用以下方法之一编写你的代码： +构建一个 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 仓库，并在本地完成你的项目。 +- 使用我们在 Replit 上的初始化项目来完成你的项目。 - 使用你选择的网站生成器来完成项目。 需要包含我们 GitHub 仓库的所有文件。 完成本项目后，请将一个正常运行的 demo（项目演示）托管在可以公开访问的平台。 然后在 `Solution Link` 字段中提交它的 URL。 此外，还可以将项目的源码提交到 `GitHub Link` 中。 diff --git a/curriculum/challenges/chinese/05-back-end-development-and-apis/back-end-development-and-apis-projects/timestamp-microservice.md b/curriculum/challenges/chinese/05-back-end-development-and-apis/back-end-development-and-apis-projects/timestamp-microservice.md index 6ee0899ffee..bdaa46d3a9b 100644 --- a/curriculum/challenges/chinese/05-back-end-development-and-apis/back-end-development-and-apis-projects/timestamp-microservice.md +++ b/curriculum/challenges/chinese/05-back-end-development-and-apis/back-end-development-and-apis-projects/timestamp-microservice.md @@ -8,10 +8,10 @@ dashedName: timestamp-microservice # --description-- -构建一个 JavaScript 的全栈应用，在功能上与这个应用相似：。 在这个项目中，你将使用以下方法之一编写你的代码： +构建一个功能类似于此的全栈 JavaScript 应用程序：https://timestamp-microservice.freecodecamp.rocks。 在这个项目中，你将使用以下方法之一编写你的代码： -- 克隆 [这个 GitHub 仓库](https://github.com/freeCodeCamp/boilerplate-project-timestamp/) 并在本地完成项目。 -- 使用[我们的 Replit 初始化项目](https://replit.com/github/freeCodeCamp/boilerplate-project-timestamp)来完成你的项目。 +- 克隆这个 GitHub 仓库，并在本地完成你的项目。 +- 使用我们在 Replit 上的初始化项目来完成你的项目。 - 使用你选择的网站生成器来完成项目。 需要包含我们 GitHub 仓库的所有文件。 完成本项目后，请将一个正常运行的 demo（项目演示）托管在可以公开访问的平台。 然后在 `Solution Link` 字段中提交它的 URL。 此外，还可以将项目的源码提交到 `GitHub Link` 中。 diff --git a/curriculum/challenges/chinese/05-back-end-development-and-apis/back-end-development-and-apis-projects/url-shortener-microservice.md b/curriculum/challenges/chinese/05-back-end-development-and-apis/back-end-development-and-apis-projects/url-shortener-microservice.md index 5b017c21925..53f07e60c27 100644 --- a/curriculum/challenges/chinese/05-back-end-development-and-apis/back-end-development-and-apis-projects/url-shortener-microservice.md +++ b/curriculum/challenges/chinese/05-back-end-development-and-apis/back-end-development-and-apis-projects/url-shortener-microservice.md @@ -8,10 +8,10 @@ dashedName: url-shortener-microservice # --description-- -构建一个 JavaScript 的全栈应用，在功能上与这个应用相似：。 在这个项目中，你将使用以下方法之一编写你的代码： +构建一个功能类似于此的全栈 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 仓库，并在本地完成你的项目。 +- 使用我们在 Replit 上的初始化项目来完成你的项目。 - 使用你选择的网站生成器来完成项目。 需要包含我们 GitHub 仓库的所有文件。 完成本项目后，请将一个正常运行的 demo（项目演示）托管在可以公开访问的平台。 然后在 `Solution Link` 字段中提交它的 URL。 此外，还可以将项目的源码提交到 `GitHub Link` 中。 diff --git a/curriculum/challenges/chinese/05-back-end-development-and-apis/basic-node-and-express/chain-middleware-to-create-a-time-server.md b/curriculum/challenges/chinese/05-back-end-development-and-apis/basic-node-and-express/chain-middleware-to-create-a-time-server.md index 08b7ff74ec9..f85b2b78e51 100644 --- a/curriculum/challenges/chinese/05-back-end-development-and-apis/basic-node-and-express/chain-middleware-to-create-a-time-server.md +++ b/curriculum/challenges/chinese/05-back-end-development-and-apis/basic-node-and-express/chain-middleware-to-create-a-time-server.md @@ -8,7 +8,7 @@ dashedName: chain-middleware-to-create-a-time-server # --description-- -使用 `app.METHOD(path, middlewareFunction)` 可以在指定的路由挂载中间件， 也可以在路由定义中链式调用中间件。 +使用 `app.METHOD(path, middlewareFunction)` 可以在指定的路由挂载中间件， 中间件也可以链接在路由定义中。 请看以下示例： @@ -49,7 +49,7 @@ app.get('/user', function(req, res, next) { ); ``` -/now 接口应该返回一个现在时间 +/-20 秒的时间 +`/now` 端点应该返回当前时间。 ```js (getUserInput) => diff --git a/curriculum/challenges/chinese/05-back-end-development-and-apis/basic-node-and-express/meet-the-node-console.md b/curriculum/challenges/chinese/05-back-end-development-and-apis/basic-node-and-express/meet-the-node-console.md index 3df24be7e7b..b029a0a7e23 100644 --- a/curriculum/challenges/chinese/05-back-end-development-and-apis/basic-node-and-express/meet-the-node-console.md +++ b/curriculum/challenges/chinese/05-back-end-development-and-apis/basic-node-and-express/meet-the-node-console.md @@ -10,8 +10,8 @@ dashedName: meet-the-node-console 你可以采用下面的任意一种编写代码的方式来完成这些挑战： -- 克隆 [这个 GitHub 仓库](https://github.com/freeCodeCamp/boilerplate-express/) 并在本地完成项目。 -- 使用[我们的 Repl.it 上的初始化项目](https://replit.com/github/freeCodeCamp/boilerplate-express)来完成项目。 +- 克隆这个 GitHub 仓库，并在本地完成这些挑战。 +- 使用我们在 Replit 上的初始化项目来完成这些挑战。 - 使用你选择的网站生成器来完成项目。 需要包含我们 GitHub 仓库的所有文件。 完成本项目后，请将一个正常运行的 demo（项目演示）托管在可以公开访问的平台。 然后在 `Solution Link` 字段中提交它的 URL。 diff --git a/curriculum/challenges/chinese/05-back-end-development-and-apis/basic-node-and-express/use-body-parser-to-parse-post-requests.md b/curriculum/challenges/chinese/05-back-end-development-and-apis/basic-node-and-express/use-body-parser-to-parse-post-requests.md index abbe035c79f..16ff42b9007 100644 --- a/curriculum/challenges/chinese/05-back-end-development-and-apis/basic-node-and-express/use-body-parser-to-parse-post-requests.md +++ b/curriculum/challenges/chinese/05-back-end-development-and-apis/basic-node-and-express/use-body-parser-to-parse-post-requests.md @@ -22,11 +22,11 @@ Content-Length: 20 name=John+Doe&age=25 ``` -正如你所看到的，正文被编码成类似查询字符串的形式， 这是 HTML 表单使用的默认格式。 我们还可以通过 Ajax 使用 JSON 来处理具有更复杂结构的数据。 还有另一种类型的编码：multipart/form-data， 它被用来上传二进制文件。 在本练习中，我们将使用 URL 编码请求正文。 要解析来自 POST 请求的数据，你必须安装 `body-parser` 包， 这个包包含一套可以解码不同格式数据的中间件。 +正如你所看到的，正文被编码成类似查询字符串的形式， 这是 HTML 表单使用的默认格式。 我们还可以通过 Ajax 使用 JSON 来处理具有更复杂结构的数据。 还有另一种类型的编码：multipart/form-data， 它被用来上传二进制文件。 在本练习中，你将使用 URL 编码的正文。 要解析来自 POST 请求的数据，你必须使用 `body-parser` 包。 这个包包含一套可以解码不同格式数据的中间件。 # --instructions-- -在 `package.json` 中安装 `body-parser` 模块， 然后在文件顶部 `require` 进来， 用变量 `bodyParser` 保存它。 通过中间件的 `bodyParser.urlencoded({extended: false})` 方法处理 URL 编码数据， 将通过先前的方法调用返回的函数传递到 `app.use()`。 中间件通常挂载在所有需要它的路由之前。 +`body-parser` 已经安装并且在你项目的 `package.json` 文件中。 在 `myApp.js` 文件的顶部包含（`require`）它，并将其存储在名为 `bodyParser` 的变量中。 `bodyParser.urlencoded({extended: false})` 返回处理 URL 编码数据的中间件。 将上一个方法调用返回的函数传递给 `app.use()`。 像往常一样，中间件必须在所有依赖它的路由之前安装。 **注意：** `extended` 是一个配置选项, 告诉 `body-parser` 需要使用哪个解析。 当 `extended=false` 时，它使用经典编码 `querystring` 库。 当 `extended=true`时，它使用 `qs` 库进行解析。 diff --git a/curriculum/challenges/chinese/05-back-end-development-and-apis/basic-node-and-express/use-the-.env-file.md b/curriculum/challenges/chinese/05-back-end-development-and-apis/basic-node-and-express/use-the-.env-file.md index aada115844f..331d4071acb 100644 --- a/curriculum/challenges/chinese/05-back-end-development-and-apis/basic-node-and-express/use-the-.env-file.md +++ b/curriculum/challenges/chinese/05-back-end-development-and-apis/basic-node-and-express/use-the-.env-file.md @@ -18,11 +18,11 @@ dashedName: use-the--env-file 在项目根目录创建一个 `.env` 文件，并存储变量 `MESSAGE_STYLE=uppercase`。 -当向 `/json` 发 GET 请求时，如果 `process.env.MESSAGE_STYLE` 的值为 `uppercase`，那么上一次挑战中的路由处理程序返回的对象的消息则应该大写。 响应对象应该是 `{"message": "Hello json"}` or `{"message": "HELLO JSON"}`，取决于 `MESSAGE_STYLE` 的值。 +然后，在你在上个挑战中创建的 `/json` GET 路由处理程序中访问 `process.env.MESSAGE_STYLE`，并且如果变量等于 `uppercase`，将响应对象的 `message` 转换为大写。 响应对象应该是 `{"message": "Hello json"}` or `{"message": "HELLO JSON"}`，取决于 `MESSAGE_STYLE` 的值。 **注意：** 如果你正在使用 Replit，你无法创建一个 `.env` 文件。 相反，使用内置的 SECRETS 标签添加变量。 -如果你在本地工作，你将需要 `dotenv` 包。 它将环境变量从你的 `.env` 文件加载到 `process.env` 中。 使用 `npm install dotenv` 安装它。 然后，在 `myApp.js` 文件的顶部，使用 `require('dotenv').config()` 导入和加载变量。 +如果你在本地工作，你将需要 `dotenv` 包。 它将环境变量从你的 `.env` 文件加载到 `process.env` 中。 `dotenv` 包已经安装，并且在你项目的 `package.json` 文件中。 在 `myApp.js` 文件的顶部，使用 `require('dotenv').config()` 导入并加载变量。 # --hints-- diff --git a/curriculum/challenges/chinese/05-back-end-development-and-apis/managing-packages-with-npm/expand-your-project-with-external-packages-from-npm.md b/curriculum/challenges/chinese/05-back-end-development-and-apis/managing-packages-with-npm/expand-your-project-with-external-packages-from-npm.md index 2735584f315..99f3d5d5a08 100644 --- a/curriculum/challenges/chinese/05-back-end-development-and-apis/managing-packages-with-npm/expand-your-project-with-external-packages-from-npm.md +++ b/curriculum/challenges/chinese/05-back-end-development-and-apis/managing-packages-with-npm/expand-your-project-with-external-packages-from-npm.md @@ -22,13 +22,13 @@ dashedName: expand-your-project-with-external-packages-from-npm # --instructions-- -在 package.json 文件的 `dependencies` 字段中添加一个版本号为“2.14.0”的“moment”包。 +将 `@freecodecamp/example` 包的版本 “1.1.0” 添加到 `package.json` 文件的 `dependencies` 字段。 -**注意：** Moment 是一个非常方便地用来处理时间和日期的库。 +**注意：** `@freecodecamp/example` 是一个用作学习工具的仿包。 # --hints-- -“dependencies”字段应该包含“moment” +`"dependencies"` 应包括 `"@freecodecamp/example"`。 ```js (getUserInput) => @@ -37,8 +37,8 @@ dashedName: expand-your-project-with-external-packages-from-npm var packJson = JSON.parse(data); assert.property( packJson.dependencies, - 'moment', - '"dependencies" does not include "moment"' + '@freecodecamp/example', + '"dependencies" does not include "@freecodecamp/example"' ); }, (xhr) => { @@ -47,7 +47,7 @@ dashedName: expand-your-project-with-external-packages-from-npm ); ``` -“moment”的版本应该是“2.14.0” +`"@freecodecamp/example"` 版本应为 `"1.1.0"`。 ```js (getUserInput) => @@ -55,9 +55,9 @@ dashedName: expand-your-project-with-external-packages-from-npm (data) => { var packJson = JSON.parse(data); assert.match( - packJson.dependencies.moment, - /^[\^\~]?2\.14\.0/, - 'Wrong version of "moment" installed. It should be 2.14.0' + packJson.dependencies["@freecodecamp/example"], + /^[\^\~]?1\.1\.0/, + 'Wrong version of "@freecodecamp/example" installed. It should be 1.1.0' ); }, (xhr) => { diff --git a/curriculum/challenges/chinese/05-back-end-development-and-apis/managing-packages-with-npm/how-to-use-package.json-the-core-of-any-node.js-project-or-npm-package.md b/curriculum/challenges/chinese/05-back-end-development-and-apis/managing-packages-with-npm/how-to-use-package.json-the-core-of-any-node.js-project-or-npm-package.md index 742b48b4bda..351213e58d8 100644 --- a/curriculum/challenges/chinese/05-back-end-development-and-apis/managing-packages-with-npm/how-to-use-package.json-the-core-of-any-node.js-project-or-npm-package.md +++ b/curriculum/challenges/chinese/05-back-end-development-and-apis/managing-packages-with-npm/how-to-use-package.json-the-core-of-any-node.js-project-or-npm-package.md @@ -10,11 +10,11 @@ dashedName: how-to-use-package-json-the-core-of-any-node-js-project-or-npm-packa 你可以采用下面的任意一种编写代码的方式来完成这些挑战： -- 克隆 [GitHub repo](https://github.com/freeCodeCamp/boilerplate-npm/) 并在本地完成项目。 -- 使用[我们的 Replit 上的初始化项目](https://replit.com/github/freeCodeCamp/boilerplate-npm)来完成项目。 +- 克隆这个 GitHub 仓库，并在本地完成这些挑战。 +- 使用我们在 Replit 上的初始化项目来完成这些挑战。 - 使用你选择的网站生成器来完成项目。 需要包含我们 GitHub 仓库的所有文件。 -完成本项目后，请将一个正常运行的 demo（项目演示）托管在可以公开访问的平台。 然后在 `Solution Link` 字段中提交它的 URL。 此外，还可以将项目的源码提交到 `GitHub Link` 中。 +完成本项目后，请将一个正常运行的 demo（项目演示）托管在可以公开访问的平台。 然后在 `Solution Link` 字段中提交它的 URL。 `package.json` 文件是所有 Node.js 项目和 npm 包的枢纽， 和 HTML 文档中的 <head> 区域用来描述网页的配置信息（元数据）一样，它存储项目的相关信息。 它由单个 JSON 对象组成，并以键值对的形式存储项目信息， 且至少包含两个必填字段：“name”和“version”——但是最好提供有关项目的其他信息，这将对用户或者维护者有所帮助。 diff --git a/curriculum/challenges/chinese/05-back-end-development-and-apis/managing-packages-with-npm/manage-npm-dependencies-by-understanding-semantic-versioning.md b/curriculum/challenges/chinese/05-back-end-development-and-apis/managing-packages-with-npm/manage-npm-dependencies-by-understanding-semantic-versioning.md index 743b3fc22a4..40b683496ea 100644 --- a/curriculum/challenges/chinese/05-back-end-development-and-apis/managing-packages-with-npm/manage-npm-dependencies-by-understanding-semantic-versioning.md +++ b/curriculum/challenges/chinese/05-back-end-development-and-apis/managing-packages-with-npm/manage-npm-dependencies-by-understanding-semantic-versioning.md @@ -20,11 +20,11 @@ dashedName: manage-npm-dependencies-by-understanding-semantic-versioning # --instructions-- -在 package.json 文件的依赖项中，修改 moment 的`version`，让它的主版本是 2，次版本号是 10，修订号是 2。 +在 `package.json` 文件的依赖项部分，更改 `@freecodecamp/example` 的版本以匹配 MAJOR 版本为 1、MINOR 版本为 2 和 PATCH 版本为 13 # --hints-- -“dependencies”字段应该包含“moment” +`"dependencies"` 应包括 `"@freecodecamp/example"`。 ```js (getUserInput) => @@ -33,8 +33,8 @@ dashedName: manage-npm-dependencies-by-understanding-semantic-versioning var packJson = JSON.parse(data); assert.property( packJson.dependencies, - 'moment', - '"dependencies" does not include "moment"' + '@freecodecamp/example', + '"dependencies" does not include "@freecodecamp/example"' ); }, (xhr) => { @@ -43,7 +43,7 @@ dashedName: manage-npm-dependencies-by-understanding-semantic-versioning ); ``` -“moment”的版本号应该是“2.10.2” +`"@freecodecamp/example"` 版本应为 `"1.2.13"`。 ```js (getUserInput) => @@ -51,9 +51,9 @@ dashedName: manage-npm-dependencies-by-understanding-semantic-versioning (data) => { var packJson = JSON.parse(data); assert.equal( - packJson.dependencies.moment, - '2.10.2', - 'Wrong version of "moment". It should be 2.10.2' + packJson.dependencies["@freecodecamp/example"], + '1.2.13', + 'Wrong version of "@freecodecamp/example". It should be 1.2.13' ); }, (xhr) => { diff --git a/curriculum/challenges/chinese/05-back-end-development-and-apis/managing-packages-with-npm/remove-a-package-from-your-dependencies.md b/curriculum/challenges/chinese/05-back-end-development-and-apis/managing-packages-with-npm/remove-a-package-from-your-dependencies.md index 4a631928c1a..2bd94cf356c 100644 --- a/curriculum/challenges/chinese/05-back-end-development-and-apis/managing-packages-with-npm/remove-a-package-from-your-dependencies.md +++ b/curriculum/challenges/chinese/05-back-end-development-and-apis/managing-packages-with-npm/remove-a-package-from-your-dependencies.md @@ -12,17 +12,17 @@ dashedName: remove-a-package-from-your-dependencies 但是，如果想要删除不再需要的依赖包，该怎么办呢？ 可能已经猜到了——只需要从依赖项中删除相应的键值对就行了。 -同样的方法也适用于删除 package.json 中的其它字段。 +同样的方法也适用于删除 package.json 中的其他字段。 # --instructions-- -从依赖项中删除 moment 依赖包。 +从依赖项中删除 `@freecodecamp/example` 包。 **注意：**删除依赖包后，确保逗号数量正确。 # --hints-- -“dependencies”字段不包含“moment”。 +`"dependencies"` 不应包含 `"@freecodecamp/example"`。 ```js (getUserInput) => @@ -31,8 +31,8 @@ dashedName: remove-a-package-from-your-dependencies var packJson = JSON.parse(data); assert.notProperty( packJson.dependencies, - 'moment', - '"dependencies" still includes "moment"' + '@freecodecamp/example', + '"dependencies" still includes "@freecodecamp/example"' ); }, (xhr) => { diff --git a/curriculum/challenges/chinese/05-back-end-development-and-apis/managing-packages-with-npm/use-the-caret-character-to-use-the-latest-minor-version-of-a-dependency.md b/curriculum/challenges/chinese/05-back-end-development-and-apis/managing-packages-with-npm/use-the-caret-character-to-use-the-latest-minor-version-of-a-dependency.md index 3e8a2126059..ae8cca34f0e 100644 --- a/curriculum/challenges/chinese/05-back-end-development-and-apis/managing-packages-with-npm/use-the-caret-character-to-use-the-latest-minor-version-of-a-dependency.md +++ b/curriculum/challenges/chinese/05-back-end-development-and-apis/managing-packages-with-npm/use-the-caret-character-to-use-the-latest-minor-version-of-a-dependency.md @@ -10,7 +10,7 @@ dashedName: use-the-caret-character-to-use-the-latest-minor-version-of-a-depende 和上一个挑战中我们学到的用波浪号来安装最新的修订版依赖一样，脱字符（`^`）也允许 npm 来安装功能更新。 它们的不同之处在于：脱字符允许次版本和修订版更新。 -现在项目中的 moment 依赖包的版本应该是“~2.10.2”，这意味着 npm 可以安装最新的 2.10.x 版的 moment， 如果使用脱字符（^）来替换版本号的前缀，那么 npm 可以将 moment 升级安装到任何 2.x.x 的版本。 +你当前的 `@freecodecamp/example` 版本应该是“~1.2.13”，它允许 npm 安装到最新的 1.2.x 版本。 如果使用插入符号（^）作为版本前缀，npm 将被允许更新到任何 1.x.x 版本。 ```json "package": "^1.3.8" @@ -20,13 +20,13 @@ dashedName: use-the-caret-character-to-use-the-latest-minor-version-of-a-depende # --instructions-- -在依赖项中，使用脱字符（`^`）为 moment 的版本添加前缀，允许 npm 更新依赖包到任意新的次版本。 +使用插入符号（`^`）为依赖项中的 `@freecodecamp/example` 版本添加前缀，并允许 npm 将其更新到任何新的 MINOR 版本。 **注意：** 原来的版本号不用更改。 # --hints-- -“dependencies”字段中应包含“moment” +`"dependencies"` 应包括 `"@freecodecamp/example"`。 ```js (getUserInput) => @@ -35,8 +35,8 @@ dashedName: use-the-caret-character-to-use-the-latest-minor-version-of-a-depende var packJson = JSON.parse(data); assert.property( packJson.dependencies, - 'moment', - '"dependencies" does not include "moment"' + '@freecodecamp/example', + '"dependencies" does not include "@freecodecamp/example"' ); }, (xhr) => { @@ -45,7 +45,7 @@ dashedName: use-the-caret-character-to-use-the-latest-minor-version-of-a-depende ); ``` -“moment”的版本应是“^2.x.x” +`"@freecodecamp/example"` 版本应匹配 `"^1.x.x"`。 ```js (getUserInput) => @@ -53,9 +53,9 @@ dashedName: use-the-caret-character-to-use-the-latest-minor-version-of-a-depende (data) => { var packJson = JSON.parse(data); assert.match( - packJson.dependencies.moment, - /^\^2\./, - 'Wrong version of "moment". It should be ^2.10.2' + packJson.dependencies["@freecodecamp/example"], + /^\^1\./, + 'Wrong version of "@freecodecamp/example". It should be ^1.2.13' ); }, (xhr) => { diff --git a/curriculum/challenges/chinese/05-back-end-development-and-apis/managing-packages-with-npm/use-the-tilde-character-to-always-use-the-latest-patch-version-of-a-dependency.md b/curriculum/challenges/chinese/05-back-end-development-and-apis/managing-packages-with-npm/use-the-tilde-character-to-always-use-the-latest-patch-version-of-a-dependency.md index a3d11ce3f93..1e2284eee2c 100644 --- a/curriculum/challenges/chinese/05-back-end-development-and-apis/managing-packages-with-npm/use-the-tilde-character-to-always-use-the-latest-patch-version-of-a-dependency.md +++ b/curriculum/challenges/chinese/05-back-end-development-and-apis/managing-packages-with-npm/use-the-tilde-character-to-always-use-the-latest-patch-version-of-a-dependency.md @@ -18,15 +18,15 @@ dashedName: use-the-tilde-character-to-always-use-the-latest-patch-version-of-a- # --instructions-- -在 package.json 文件中，当前规则是 npm 将 moment 升级到特定版本（2.10.2）。 但是现在，要允许使用最新的 2.10.x 版本。 +在 package.json 文件中，你当前关于 npm 如何升级 `@freecodecamp/example` 的规则是使用特定版本（1.2.13）。 但现在，你想允许最新的 1.2.x 版本。 -在依赖项中，给 moment 的版本号添加波浪号（`~`）前缀，允许 npm 将其更新为最新的修订版。 +在依赖项中使用波浪号（`~`）字符作为 `@freecodecamp/example` 版本的前缀，并允许 npm 将其更新为任何新的*补丁*发布。 **注意：**原来的版本号不用更改。 # --hints-- -“dependencies”字段中应包含“moment” +`"dependencies"` 应包括 `"@freecodecamp/example"`。 ```js (getUserInput) => @@ -35,8 +35,8 @@ dashedName: use-the-tilde-character-to-always-use-the-latest-patch-version-of-a- var packJson = JSON.parse(data); assert.property( packJson.dependencies, - 'moment', - '"dependencies" does not include "moment"' + '@freecodecamp/example', + '"dependencies" does not include "@freecodecamp/example"' ); }, (xhr) => { @@ -45,7 +45,7 @@ dashedName: use-the-tilde-character-to-always-use-the-latest-patch-version-of-a- ); ``` -“moment”的版本号应该是“~2.10.2” +`"@freecodecamp/example"` 版本应匹配 `"~1.2.13"`。 ```js (getUserInput) => @@ -53,9 +53,9 @@ dashedName: use-the-tilde-character-to-always-use-the-latest-patch-version-of-a- (data) => { var packJson = JSON.parse(data); assert.match( - packJson.dependencies.moment, - /^\~2\.10\.2/, - 'Wrong version of "moment". It should be ~2.10.2' + packJson.dependencies["@freecodecamp/example"], + /^\~1\.2\.13/, + 'Wrong version of "@freecodecamp/example". It should be ~1.2.13' ); }, (xhr) => { diff --git a/curriculum/challenges/chinese/05-back-end-development-and-apis/mongodb-and-mongoose/install-and-set-up-mongoose.md b/curriculum/challenges/chinese/05-back-end-development-and-apis/mongodb-and-mongoose/install-and-set-up-mongoose.md index b34455e8c2e..a3fb9e8563e 100644 --- a/curriculum/challenges/chinese/05-back-end-development-and-apis/mongodb-and-mongoose/install-and-set-up-mongoose.md +++ b/curriculum/challenges/chinese/05-back-end-development-and-apis/mongodb-and-mongoose/install-and-set-up-mongoose.md @@ -10,19 +10,23 @@ dashedName: install-and-set-up-mongoose 你可以采用下面的任意一种编写代码的方式来完成这些挑战： -- 克隆 [这个 GitHub 仓库](https://github.com/freeCodeCamp/boilerplate-mongomongoose/) 并在本地完成项目。 -- 使用[我们的 Replit 上的初始化项目](https://replit.com/github/freeCodeCamp/boilerplate-mongomongoose)来完成项目。 +- 克隆这个 GitHub 仓库，并在本地完成这些挑战。 +- 使用我们在 Replit 上的初始化项目来完成这些挑战。 - 使用你选择的网站生成器来完成项目。 需要包含我们 GitHub 仓库的所有文件。 完成本项目后，请将一个正常运行的 demo（项目演示）托管在可以公开访问的平台。 然后在 `Solution Link` 字段中提交它的 URL。 在这个挑战中，你将建立一个 MongoDB Atlas 数据库并导入连接到它所需的软件包。 -按照这篇教程在 MongoDB Atlas 创建一个托管数据库。 +按照这篇教程在 MongoDB Atlas 创建一个托管数据库。 # --instructions-- -将 `mongodb@~3.6.0` 和 `mongoose@~5.4.0` 添加到项目的 `package.json` 中。 然后，在 `myApp.js` 文件中请求 `mongoose`。 创建一个 `.env` 文件，给它添加一个 `MONGO_URI` 变量。 变量的值为你的 MongoDB Atlas 数据库 URI。 应用单引号或双引号包裹 URI。请记住，环境变量 `=` 两边不能有空格。 例如，`MONGO_URI='VALUE'`。 完成后，使用下面的代码来连接数据库。 +`mongoose@^5.11.15` 已添加到你项目的 `package.json` 文件中。 首先，在 `myApp.js` 中请求 mongoose 为 `mongoose`。 接下来，创建一个 `.env` 文件并向其中添加一个 `MONGO_URI` 变量。 变量的值为你的 MongoDB Atlas 数据库 URI。 应用单引号或双引号包裹 URI。请记住，环境变量 `=` 两边不能有空格。 例如，`MONGO_URI='VALUE'`。 + +**注意：** 如果你使用的是 Replit，则无法创建 `.env` 文件。 相反，使用内置的 SECRETS 选项卡来添加变量。 在使用 SECRETS 选项卡时，不要将值括在引号中。 + +完成后，使用以下语法连接到数据库： ```js mongoose.connect(, { useNewUrlParser: true, useUnifiedTopology: true }); @@ -30,22 +34,7 @@ mongoose.connect(, { useNewUrlParser: true, useUnifiedTopology: true } # --hints-- -“mongodb” 应在 package.json 中作为依赖项定义。 - -```js -(getUserInput) => - $.get(getUserInput('url') + '/_api/file/package.json').then( - (data) => { - var packJson = JSON.parse(data); - assert.property(packJson.dependencies, 'mongodb'); - }, - (xhr) => { - throw new Error(xhr.responseText); - } - ); -``` - -“mongoose” 应在 package.json 中作为依赖项定义。 +“mongoose version ^5.11.15” 依赖项应该在 package.json ```js (getUserInput) => @@ -53,6 +42,11 @@ mongoose.connect(, { useNewUrlParser: true, useUnifiedTopology: true } (data) => { var packJson = JSON.parse(data); assert.property(packJson.dependencies, 'mongoose'); + assert.match( + packJson.dependencies.mongoose, + /^\^5\.11\.15/, + 'Wrong version of "mongoose". It should be ^5.11.15' + ); }, (xhr) => { throw new Error(xhr.responseText); diff --git a/curriculum/challenges/chinese/05-back-end-development-and-apis/mongodb-and-mongoose/perform-classic-updates-by-running-find-edit-then-save.md b/curriculum/challenges/chinese/05-back-end-development-and-apis/mongodb-and-mongoose/perform-classic-updates-by-running-find-edit-then-save.md index 176e48e4063..9ad84872c12 100644 --- a/curriculum/challenges/chinese/05-back-end-development-and-apis/mongodb-and-mongoose/perform-classic-updates-by-running-find-edit-then-save.md +++ b/curriculum/challenges/chinese/05-back-end-development-and-apis/mongodb-and-mongoose/perform-classic-updates-by-running-find-edit-then-save.md @@ -14,7 +14,7 @@ dashedName: perform-classic-updates-by-running-find-edit-then-save 在这个挑战中，请使用参数 `personId` 作为字段，修改 `findEditThenSave` 方法，以在数据库中通过 `_id` 找到相应的 person（你可以使用之前挑战中的任何一种方法）。 将 `"hamburger"` 添加到它的 `favoriteFoods` 清单中（你可以使用 `Array.push()`）。 然后，在查询数据库的方法的回调里通过 `save()` 方法更新 `Person` 的数据。 -**提示：** 如果你在 Schema 中将 `favoriteFoods` 声明为一个 Array（数组）并且没有指定数组的类型(如 `[String]`)， 那么此时，`favoriteFoods` 就会是默认的 Mixed 类型。如果想编辑它，就必须执行 `document.markModified('edited-field')`。 详情请参阅 [Mongoose 文档](https://mongoosejs.com/docs/schematypes.html#Mixed) +**提示：** 如果你在 Schema 中将 `favoriteFoods` 声明为一个 Array（数组）并且没有指定数组的类型(如 `[String]`)， 那么此时，`favoriteFoods` 就会是默认的 Mixed 类型。如果想编辑它，就必须执行 `document.markModified('edited-field')`。 查看我们的 Mongoose 文章。 # --hints-- diff --git a/curriculum/challenges/chinese/06-quality-assurance/advanced-node-and-express/announce-new-users.md b/curriculum/challenges/chinese/06-quality-assurance/advanced-node-and-express/announce-new-users.md index 8fdaf6b1df5..5ff5ae6ef36 100644 --- a/curriculum/challenges/chinese/06-quality-assurance/advanced-node-and-express/announce-new-users.md +++ b/curriculum/challenges/chinese/06-quality-assurance/advanced-node-and-express/announce-new-users.md @@ -34,7 +34,7 @@ socket.on('user', data => { }); ``` -完成上述要求后，你可以在下方提交你的页面链接。 如果你遇到了问题，可以参考 [这里](https://gist.github.com/camperbot/bf95a0f74b756cf0771cd62c087b8286) 的答案。 +完成上述要求后，你可以在下方提交你的页面链接。 如果你在运行时遇到错误，可以点击此处查看 已执行项目的当前进度。 # --hints-- diff --git a/curriculum/challenges/chinese/06-quality-assurance/quality-assurance-and-testing-with-chai/test-if-a-value-is-an-array.md b/curriculum/challenges/chinese/06-quality-assurance/quality-assurance-and-testing-with-chai/test-if-a-value-is-an-array.md index b34c73f939d..7bc05c85007 100644 --- a/curriculum/challenges/chinese/06-quality-assurance/quality-assurance-and-testing-with-chai/test-if-a-value-is-an-array.md +++ b/curriculum/challenges/chinese/06-quality-assurance/quality-assurance-and-testing-with-chai/test-if-a-value-is-an-array.md @@ -8,7 +8,7 @@ dashedName: test-if-a-value-is-an-array # --description-- -请注意，本项目在[这个 Replit 项目](https://replit.com/github/freeCodeCamp/boilerplate-mochachai)的基础上进行开发。你也可以从 [GitHub](https://repl.it/github/freeCodeCamp/boilerplate-mochachai) 上克隆。 +请注意，本项目是在 Replit 上的初始化项目的基础上进行开发，你也可以从 GitHub 上克隆。 # --instructions-- diff --git a/curriculum/challenges/chinese/15-javascript-algorithms-and-data-structures-22/build-a-caesars-cipher-project/caesars-cipher.md b/curriculum/challenges/chinese/15-javascript-algorithms-and-data-structures-22/build-a-caesars-cipher-project/caesars-cipher.md new file mode 100644 index 00000000000..2512ac46005 --- /dev/null +++ b/curriculum/challenges/chinese/15-javascript-algorithms-and-data-structures-22/build-a-caesars-cipher-project/caesars-cipher.md @@ -0,0 +1,88 @@ +--- +id: 56533eb9ac21ba0edf2244e2 +title: 构建一个凯撒密码 +challengeType: 5 +forumTopicId: 16003 +dashedName: build-a-caesars-cipher +--- + +# --description-- + +凯撒密码（ Caesar cipher）是最简单且最广为人知的密码（ciphers），也被称为移位密码（shift cipher）。 在移位密码中，明文中的字母通过按照一个固定数目进行偏移后被替换成新的字母。 + +现代最常被应用到的一个变种就是 ROT13 加密，也就是明文中的字母向后移 13 位。 也就是， `A ↔ N`，`B ↔ O` 等等。 + +编写一个函数，它将把使用 ROT13 加密编码的字符串作为输入并返回解码字符串。 + +所有解码后的字母都必须为字母大写。 请不要解码非字母的字符（例如，空格、标点符号），但你需要在结果中保留它们。 + +# --hints-- + +`rot13("SERR PBQR PNZC")` 应解码为 `FREE CODE CAMP` + +```js +assert(rot13('SERR PBQR PNZC') === 'FREE CODE CAMP'); +``` + +`rot13("SERR CVMMN!")` 应解码为 `FREE PIZZA!` + +```js +assert(rot13('SERR CVMMN!') === 'FREE PIZZA!'); +``` + +`rot13("SERR YBIR?")` 应解码为 `FREE LOVE?` + +```js +assert(rot13('SERR YBIR?') === 'FREE LOVE?'); +``` + +`rot13("GUR DHVPX OEBJA SBK WHZCF BIRE GUR YNML QBT.")` 应解码为 `THE QUICK BROWN FOX JUMPS OVER THE LAZY DOG.` + +```js +assert( + rot13('GUR DHVPX OEBJA SBK WHZCF BIRE GUR YNML QBT.') === + 'THE QUICK BROWN FOX JUMPS OVER THE LAZY DOG.' +); +``` + +# --seed-- + +## --seed-contents-- + +```js +function rot13(str) { + return str; +} + +rot13("SERR PBQR PNZC"); +``` + +# --solutions-- + +```js +var lookup = { + 'A': 'N','B': 'O','C': 'P','D': 'Q', + 'E': 'R','F': 'S','G': 'T','H': 'U', + 'I': 'V','J': 'W','K': 'X','L': 'Y', + 'M': 'Z','N': 'A','O': 'B','P': 'C', + 'Q': 'D','R': 'E','S': 'F','T': 'G', + 'U': 'H','V': 'I','W': 'J','X': 'K', + 'Y': 'L','Z': 'M' +}; + +function rot13(encodedStr) { + var codeArr = encodedStr.split(""); // String to Array + var decodedArr = []; // Your Result goes here + // Only change code below this line + + decodedArr = codeArr.map(function(letter) { + if(lookup.hasOwnProperty(letter)) { + letter = lookup[letter]; + } + return letter; + }); + + // Only change code above this line + return decodedArr.join(""); // Array to String +} +``` diff --git a/curriculum/challenges/chinese/15-javascript-algorithms-and-data-structures-22/build-a-cash-register-project/cash-register.md b/curriculum/challenges/chinese/15-javascript-algorithms-and-data-structures-22/build-a-cash-register-project/cash-register.md new file mode 100644 index 00000000000..6e5d8e33564 --- /dev/null +++ b/curriculum/challenges/chinese/15-javascript-algorithms-and-data-structures-22/build-a-cash-register-project/cash-register.md @@ -0,0 +1,252 @@ +--- +id: aa2e6f85cab2ab736c9a9b24 +title: 构建一个收银机 +challengeType: 5 +forumTopicId: 16012 +dashedName: build-a-cash-register +--- + +# --description-- + +设计一个收银机抽屉函数 `checkCashRegister()`，它接受购买价格作为第一个参数（`price`），付款作为第二个参数（`cash`），和抽屉的现金（`cid`）作为第三个参数。 + +`cid` 是包含货币面值的二维数组。 + +函数 `checkCashRegister()` 应返回含有 `status` 属性和 `change` 属性的对象。 + +如果收银机內的金额少于应找回的零钱数，或者你无法返回确切的数目时，返回 `{status: "INSUFFICIENT_FUNDS", change: []}`。 + +如果收银机內的金额恰好等于应找回的零钱数，返回 `{status: "CLOSED", change: [...]}`，其中 `change` 的属性值就是收银机內的金额。 + +否则，返回 `{status: "OPEN", change: [...]}`，其中 `change` 键值是应找回的零钱数，并将找零的面值由高到低排序。 + +
货币单位面值
Penny0.01 美元（PENNY）
Nickel0.05 美元（NICKEL）
Dime0.1 美元（DIME）
Quarter0.25 美元（QUARTER）
Dollar1 美元（ONE）
Five Dollars5 美元（FIVE）
Ten Dollars10 美元（TEN）
Twenty Dollars20 美元（TWENTY）
One-hundred Dollars100 美元（ONE HUNDRED）
+ +下面的抽屉里现金数组示例： + +```js +[ + ["PENNY", 1.01], + ["NICKEL", 2.05], + ["DIME", 3.1], + ["QUARTER", 4.25], + ["ONE", 90], + ["FIVE", 55], + ["TEN", 20], + ["TWENTY", 60], + ["ONE HUNDRED", 100] +] +``` + +# --hints-- + +`checkCashRegister(19.5, 20, [["PENNY", 1.01], ["NICKEL", 2.05], ["DIME", 3.1], ["QUARTER", 4.25], ["ONE", 90], ["FIVE", 55], ["TEN", 20], ["TWENTY", 60], ["ONE HUNDRED", 100]])` 应返回一个对象。 + +```js +assert.deepEqual( + Object.prototype.toString.call( + checkCashRegister(19.5, 20, [ + ['PENNY', 1.01], + ['NICKEL', 2.05], + ['DIME', 3.1], + ['QUARTER', 4.25], + ['ONE', 90], + ['FIVE', 55], + ['TEN', 20], + ['TWENTY', 60], + ['ONE HUNDRED', 100] + ]) + ), + '[object Object]' +); +``` + +`checkCashRegister(19.5, 20, [["PENNY", 1.01], ["NICKEL", 2.05], ["DIME", 3.1], ["QUARTER", 4.25], ["ONE", 90], ["FIVE", 55], ["TEN", 20], ["TWENTY", 60], ["ONE HUNDRED", 100]])` 应返回 `{status: "OPEN", change: [["QUARTER", 0.5]]}`。 + +```js +assert.deepEqual( + checkCashRegister(19.5, 20, [ + ['PENNY', 1.01], + ['NICKEL', 2.05], + ['DIME', 3.1], + ['QUARTER', 4.25], + ['ONE', 90], + ['FIVE', 55], + ['TEN', 20], + ['TWENTY', 60], + ['ONE HUNDRED', 100] + ]), + { status: 'OPEN', change: [['QUARTER', 0.5]] } +); +``` + +`checkCashRegister(3.26, 100, [["PENNY", 1.01], ["NICKEL", 2.05], ["DIME", 3.1], ["QUARTER", 4.25], ["ONE", 90], ["FIVE", 55], ["TEN", 20], ["TWENTY", 60], ["ONE HUNDRED", 100]])` 应返回 `{status: "OPEN", change: [["TWENTY", 60], ["TEN", 20], ["FIVE", 15], ["ONE", 1], ["QUARTER", 0.5], ["DIME", 0.2], ["PENNY", 0.04]]}`。 + +```js +assert.deepEqual( + checkCashRegister(3.26, 100, [ + ['PENNY', 1.01], + ['NICKEL', 2.05], + ['DIME', 3.1], + ['QUARTER', 4.25], + ['ONE', 90], + ['FIVE', 55], + ['TEN', 20], + ['TWENTY', 60], + ['ONE HUNDRED', 100] + ]), + { + status: 'OPEN', + change: [ + ['TWENTY', 60], + ['TEN', 20], + ['FIVE', 15], + ['ONE', 1], + ['QUARTER', 0.5], + ['DIME', 0.2], + ['PENNY', 0.04] + ] + } +); +``` + +`checkCashRegister(19.5, 20, [["PENNY", 0.01], ["NICKEL", 0], ["DIME", 0], ["QUARTER", 0], ["ONE", 0], ["FIVE", 0], ["TEN", 0], ["TWENTY", 0], ["ONE HUNDRED", 0]])` 应返回 `{status: "INSUFFICIENT_FUNDS", change: []}`。 + +```js +assert.deepEqual( + checkCashRegister(19.5, 20, [ + ['PENNY', 0.01], + ['NICKEL', 0], + ['DIME', 0], + ['QUARTER', 0], + ['ONE', 0], + ['FIVE', 0], + ['TEN', 0], + ['TWENTY', 0], + ['ONE HUNDRED', 0] + ]), + { status: 'INSUFFICIENT_FUNDS', change: [] } +); +``` + +`checkCashRegister(19.5, 20, [["PENNY", 0.01], ["NICKEL", 0], ["DIME", 0], ["QUARTER", 0], ["ONE", 1], ["FIVE", 0], ["TEN", 0], ["TWENTY", 0], ["ONE HUNDRED", 0]])` 应返回 `{status: "INSUFFICIENT_FUNDS", change: []}`。 + +```js +assert.deepEqual( + checkCashRegister(19.5, 20, [ + ['PENNY', 0.01], + ['NICKEL', 0], + ['DIME', 0], + ['QUARTER', 0], + ['ONE', 1], + ['FIVE', 0], + ['TEN', 0], + ['TWENTY', 0], + ['ONE HUNDRED', 0] + ]), + { status: 'INSUFFICIENT_FUNDS', change: [] } +); +``` + +`checkCashRegister(19.5, 20, [["PENNY", 0.5], ["NICKEL", 0], ["DIME", 0], ["QUARTER", 0], ["ONE", 0], ["FIVE", 0], ["TEN", 0], ["TWENTY", 0], ["ONE HUNDRED", 0]])` 应返回 `{status: "CLOSED", change: [["PENNY", 0.5], ["NICKEL", 0], ["DIME", 0], ["QUARTER", 0], ["ONE", 0], ["FIVE", 0], ["TEN", 0], ["TWENTY", 0], ["ONE HUNDRED", 0]]}`。 + +```js +assert.deepEqual( + checkCashRegister(19.5, 20, [ + ['PENNY', 0.5], + ['NICKEL', 0], + ['DIME', 0], + ['QUARTER', 0], + ['ONE', 0], + ['FIVE', 0], + ['TEN', 0], + ['TWENTY', 0], + ['ONE HUNDRED', 0] + ]), + { + status: 'CLOSED', + change: [ + ['PENNY', 0.5], + ['NICKEL', 0], + ['DIME', 0], + ['QUARTER', 0], + ['ONE', 0], + ['FIVE', 0], + ['TEN', 0], + ['TWENTY', 0], + ['ONE HUNDRED', 0] + ] + } +); +``` + +# --seed-- + +## --seed-contents-- + +```js +function checkCashRegister(price, cash, cid) { + let change; + return change; +} + +checkCashRegister(19.5, 20, [["PENNY", 1.01], ["NICKEL", 2.05], ["DIME", 3.1], ["QUARTER", 4.25], ["ONE", 90], ["FIVE", 55], ["TEN", 20], ["TWENTY", 60], ["ONE HUNDRED", 100]]); +``` + +# --solutions-- + +```js +const denom = [ + { name: "ONE HUNDRED", val: 100 }, + { name: "TWENTY", val: 20 }, + { name: "TEN", val: 10 }, + { name: "FIVE", val: 5 }, + { name: "ONE", val: 1 }, + { name: "QUARTER", val: 0.25 }, + { name: "DIME", val: 0.1 }, + { name: "NICKEL", val: 0.05 }, + { name: "PENNY", val: 0.01 }, +]; + +function checkCashRegister(price, cash, cid) { + const output = { status: null, change: [] }; + let change = cash - price; + const register = cid.reduce( + function (acc, curr) { + acc.total += curr[1]; + acc[curr[0]] = curr[1]; + return acc; + }, + { total: 0 } + ); + if (register.total === change) { + output.status = "CLOSED"; + output.change = cid; + return output; + } + if (register.total < change) { + output.status = "INSUFFICIENT_FUNDS"; + return output; + } + const change_arr = denom.reduce(function (acc, curr) { + let value = 0; + while (register[curr.name] > 0 && change >= curr.val) { + change -= curr.val; + register[curr.name] -= curr.val; + value += curr.val; + change = Math.round(change * 100) / 100; + } + if (value > 0) { + acc.push([curr.name, value]); + } + return acc; + }, []); + if (change_arr.length < 1 || change > 0) { + output.status = "INSUFFICIENT_FUNDS"; + return output; + } + output.status = "OPEN"; + output.change = change_arr; + return output; +} +``` diff --git a/curriculum/challenges/chinese/15-javascript-algorithms-and-data-structures-22/build-a-palindrome-checker-project/palindrome-checker.md b/curriculum/challenges/chinese/15-javascript-algorithms-and-data-structures-22/build-a-palindrome-checker-project/palindrome-checker.md new file mode 100644 index 00000000000..41672413414 --- /dev/null +++ b/curriculum/challenges/chinese/15-javascript-algorithms-and-data-structures-22/build-a-palindrome-checker-project/palindrome-checker.md @@ -0,0 +1,125 @@ +--- +id: aaa48de84e1ecc7c742e1124 +title: 构建一个回文检测器 +challengeType: 5 +forumTopicId: 16004 +dashedName: build-a-palindrome-checker +--- + +# --description-- + +如果传入的字符串是回文字符串，则返回 `true`。 否则，返回 `false` 。 + +回文（palindrome），指在忽略标点符号、大小写和空格的前提下，正着读和反着读一模一样。 + +**注意：** 检查回文时，你需要先去除 **所有非字母数字的字符**（标点、空格和符号），并将所有字母都转换成大写或都转换成小写。 + +我们会传入具有不同格式的字符串，如 `racecar`、`RaceCar` 和 `race CAR` 等等。 + +我们也会传入一些包含特殊符号的字符串，例如 `2A3*3a2`、`2A3 3a2`、`2_A3*3#A2`。 + +# --hints-- + +`palindrome("eye")` 应返回一个布尔值。 + +```js +assert(typeof palindrome('eye') === 'boolean'); +``` + +`palindrome("eye")` 应返回 `true`。 + +```js +assert(palindrome('eye') === true); +``` + +`palindrome("_eye")` 应返回 `true`。 + +```js +assert(palindrome('_eye') === true); +``` + +`palindrome("race car")` 应返回 `true`。 + +```js +assert(palindrome('race car') === true); +``` + +`palindrome("not a palindrome")` 应返回 `false`。 + +```js +assert(palindrome('not a palindrome') === false); +``` + +`palindrome("A man, a plan, a canal. Panama")` 应返回 `true`。 + +```js +assert(palindrome('A man, a plan, a canal. Panama') === true); +``` + +`palindrome("never odd or even")` 应返回 `true`。 + +```js +assert(palindrome('never odd or even') === true); +``` + +`palindrome("nope")` 应返回 `false`。 + +```js +assert(palindrome('nope') === false); +``` + +`palindrome("almostomla")` 应返回 `false`。 + +```js +assert(palindrome('almostomla') === false); +``` + +`palindrome("My age is 0, 0 si ega ym.")` 应返回 `true`。 + +```js +assert(palindrome('My age is 0, 0 si ega ym.') === true); +``` + +`palindrome("1 eye for of 1 eye.")` 应返回 `false`。 + +```js +assert(palindrome('1 eye for of 1 eye.') === false); +``` + +`palindrome("0_0 (: /-\ :) 0-0")` 应返回 `true`。 + +```js +assert(palindrome('0_0 (: /- :) 0-0') === true); +``` + +`palindrome("five|\_/|four")` 应返回 `false`。 + +```js +assert(palindrome('five|_/|four') === false); +``` + +# --seed-- + +## --seed-contents-- + +```js +function palindrome(str) { + return true; +} + +palindrome("eye"); +``` + +# --solutions-- + +```js +function palindrome(str) { + var string = str.toLowerCase().split(/[^A-Za-z0-9]/gi).join(''); + var aux = string.split(''); + if (aux.join('') === aux.reverse().join('')){ + return true; + } + + return false; +} +``` diff --git a/curriculum/challenges/chinese/15-javascript-algorithms-and-data-structures-22/build-a-roman-numeral-converter-project/roman-numeral-converter.md b/curriculum/challenges/chinese/15-javascript-algorithms-and-data-structures-22/build-a-roman-numeral-converter-project/roman-numeral-converter.md new file mode 100644 index 00000000000..6b516bc106f --- /dev/null +++ b/curriculum/challenges/chinese/15-javascript-algorithms-and-data-structures-22/build-a-roman-numeral-converter-project/roman-numeral-converter.md @@ -0,0 +1,215 @@ +--- +id: a7f4d8f2483413a6ce226cac +title: 构建罗马数字转换器 +challengeType: 5 +forumTopicId: 16044 +dashedName: build-a-roman-numeral-converter +--- + +# --description-- + +把传入的数字转为罗马数字。 + +| 罗马数字 | 阿拉伯数字 | +| ---- | ----- | +| M | 1000 | +| CM | 900 | +| D | 500 | +| CD | 400 | +| C | 100 | +| XC | 90 | +| L | 50 | +| XL | 40 | +| X | 10 | +| IX | 9 | +| V | 5 | +| IV | 4 | +| I | 1 | + +所有罗马数字答案都应该大写。 + +# --hints-- + +`convertToRoman(2)` 应该返回字符串 `II`。 + +```js +assert.deepEqual(convertToRoman(2), 'II'); +``` + +`convertToRoman(3)` 应该返回字符串 `III`。 + +```js +assert.deepEqual(convertToRoman(3), 'III'); +``` + +`convertToRoman(4)` 应该返回字符串 `IV`。 + +```js +assert.deepEqual(convertToRoman(4), 'IV'); +``` + +`convertToRoman(5)` 应该返回字符串 `V`。 + +```js +assert.deepEqual(convertToRoman(5), 'V'); +``` + +`convertToRoman(9)` 应该返回字符串 `IX`。 + +```js +assert.deepEqual(convertToRoman(9), 'IX'); +``` + +`convertToRoman(12)` 应该返回字符串 `XII`。 + +```js +assert.deepEqual(convertToRoman(12), 'XII'); +``` + +`convertToRoman(16)` 应该返回字符串 `XVI`。 + +```js +assert.deepEqual(convertToRoman(16), 'XVI'); +``` + +`convertToRoman(29)` 应该返回字符串 `XXIX`。 + +```js +assert.deepEqual(convertToRoman(29), 'XXIX'); +``` + +`convertToRoman(44)` 应该返回字符串 `XLIV`. + +```js +assert.deepEqual(convertToRoman(44), 'XLIV'); +``` + +`convertToRoman(45)` 应该返回字符串 `XLV`。 + +```js +assert.deepEqual(convertToRoman(45), 'XLV'); +``` + +`convertToRoman(68)` 应该返回字符串 `LXVIII` + +```js +assert.deepEqual(convertToRoman(68), 'LXVIII'); +``` + +`convertToRoman(83)` 应该返回字符串 `LXXXIII` + +```js +assert.deepEqual(convertToRoman(83), 'LXXXIII'); +``` + +`convertToRoman(97)` 应该返回字符串 `XCVII` + +```js +assert.deepEqual(convertToRoman(97), 'XCVII'); +``` + +`convertToRoman(99)` 应该返回字符串 `XCIX` + +```js +assert.deepEqual(convertToRoman(99), 'XCIX'); +``` + +`convertToRoman(400)` 应该返回字符串 `CD` + +```js +assert.deepEqual(convertToRoman(400), 'CD'); +``` + +`convertToRoman(500)` 应该返回字符串 `D` + +```js +assert.deepEqual(convertToRoman(500), 'D'); +``` + +`convertToRoman(501)` 应该返回字符串 `DI` + +```js +assert.deepEqual(convertToRoman(501), 'DI'); +``` + +`convertToRoman(649)` 应该返回字符串 `DCXLIX` + +```js +assert.deepEqual(convertToRoman(649), 'DCXLIX'); +``` + +`convertToRoman(798)` 应该返回字符串 `DCCXCVIII` + +```js +assert.deepEqual(convertToRoman(798), 'DCCXCVIII'); +``` + +`convertToRoman(891)` 应该返回字符串 `DCCCXCI` + +```js +assert.deepEqual(convertToRoman(891), 'DCCCXCI'); +``` + +`convertToRoman(1000)` 应该返回字符串 `M` + +```js +assert.deepEqual(convertToRoman(1000), 'M'); +``` + +`convertToRoman(1004)` 应该返回字符串 `MIV` + +```js +assert.deepEqual(convertToRoman(1004), 'MIV'); +``` + +`convertToRoman(1006)` 应该返回字符串 `MVI` + +```js +assert.deepEqual(convertToRoman(1006), 'MVI'); +``` + +`convertToRoman(1023)` 应该返回字符串 `MXXIII` + +```js +assert.deepEqual(convertToRoman(1023), 'MXXIII'); +``` + +`convertToRoman(2014)` 应该返回字符串 `MMXIV` + +```js +assert.deepEqual(convertToRoman(2014), 'MMXIV'); +``` + +`convertToRoman(3999)` 应该返回字符串 `MMMCMXCIX` + +```js +assert.deepEqual(convertToRoman(3999), 'MMMCMXCIX'); +``` + +# --seed-- + +## --seed-contents-- + +```js +function convertToRoman(num) { + return num; +} + +convertToRoman(36); +``` + +# --solutions-- + +```js +function convertToRoman(num) { + var ref = [['M', 1000], ['CM', 900], ['D', 500], ['CD', 400], ['C', 100], ['XC', 90], ['L', 50], ['XL', 40], ['X', 10], ['IX', 9], ['V', 5], ['IV', 4], ['I', 1]]; + var res = []; + ref.forEach(function(p) { + while (num >= p[1]) { + res.push(p[0]); + num -= p[1]; + } + }); + return res.join(''); +} +``` diff --git a/curriculum/challenges/chinese/15-javascript-algorithms-and-data-structures-22/build-a-telephone-number-validator-project/telephone-number-validator.md b/curriculum/challenges/chinese/15-javascript-algorithms-and-data-structures-22/build-a-telephone-number-validator-project/telephone-number-validator.md new file mode 100644 index 00000000000..50cb8f587b7 --- /dev/null +++ b/curriculum/challenges/chinese/15-javascript-algorithms-and-data-structures-22/build-a-telephone-number-validator-project/telephone-number-validator.md @@ -0,0 +1,217 @@ +--- +id: aff0395860f5d3034dc0bfc9 +title: 构建电话号码验证器 +challengeType: 5 +forumTopicId: 16090 +dashedName: build-a-telephone-number-validator +--- + +# --description-- + +如果传入的字符串是一个有效的美国电话号码，则返回 `true`。 + +用户可以按照他们选择的方式填写表单字段，只要它是有效美国号码的格式即可。 以下是美国电话号码的有效格式示例（其他格式变化，请参考下面的测试）： + +
555-555-5555
(555)555-5555
(555) 555-5555
555 555 5555
5555555555
1 555 555 5555
+ +在这个挑战中，传入的字符串可能是例如 `800-692-7753` 或者 `8oo-six427676;laskdjf` 的号码。 你的任务是根据上面不同的格式组合，判断它是否为有效的电话号码。 地区代码是必需的。 如果提供了国家/地区代码，则必须确认国家/地区代码为`1` 。 如果传入的字符串是有效的美国电话号码，则返回 `true`，否则返回 `false` 。 + +# --hints-- + +`telephoneCheck("555-555-5555")` 应返回一个布尔值。 + +```js +assert(typeof telephoneCheck('555-555-5555') === 'boolean'); +``` + +`telephoneCheck("1 555-555-5555")` 应返回 `true`。 + +```js +assert(telephoneCheck('1 555-555-5555') === true); +``` + +`telephoneCheck("1 (555) 555-5555")` 应返回 `true`。 + +```js +assert(telephoneCheck('1 (555) 555-5555') === true); +``` + +`telephoneCheck("5555555555")` 应返回 `true`。 + +```js +assert(telephoneCheck('5555555555') === true); +``` + +`telephoneCheck("555-555-5555")` 应返回 `true`。 + +```js +assert(telephoneCheck('555-555-5555') === true); +``` + +`telephoneCheck("(555)555-5555")` 应返回 `true`。 + +```js +assert(telephoneCheck('(555)555-5555') === true); +``` + +`telephoneCheck("1(555)555-5555")` 应返回 `true`。 + +```js +assert(telephoneCheck('1(555)555-5555') === true); +``` + +`telephoneCheck("555-5555")` 应返回 `false`。 + +```js +assert(telephoneCheck('555-5555') === false); +``` + +`telephoneCheck("5555555")` 应返回 `false`。 + +```js +assert(telephoneCheck('5555555') === false); +``` + +`telephoneCheck("1 555)555-5555")` 应返回 `false`。 + +```js +assert(telephoneCheck('1 555)555-5555') === false); +``` + +`telephoneCheck("1 555 555 5555")` 应返回 `true`。 + +```js +assert(telephoneCheck('1 555 555 5555') === true); +``` + +`telephoneCheck("1 456 789 4444")` 应返回 `true`。 + +```js +assert(telephoneCheck('1 456 789 4444') === true); +``` + +`telephoneCheck("123**&!!asdf#")` 应返回 `false`。 + +```js +assert(telephoneCheck('123**&!!asdf#') === false); +``` + +`telephoneCheck("55555555")` 应返回 `false`。 + +```js +assert(telephoneCheck('55555555') === false); +``` + +`telephoneCheck("(6054756961)")` 应返回 `false`。 + +```js +assert(telephoneCheck('(6054756961)') === false); +``` + +`telephoneCheck("2 (757) 622-7382")` 应返回 `false`。 + +```js +assert(telephoneCheck('2 (757) 622-7382') === false); +``` + +`telephoneCheck("0 (757) 622-7382")` 应返回 `false`。 + +```js +assert(telephoneCheck('0 (757) 622-7382') === false); +``` + +`telephoneCheck("-1 (757) 622-7382")` 应返回 `false`。 + +```js +assert(telephoneCheck('-1 (757) 622-7382') === false); +``` + +`telephoneCheck("2 757 622-7382")` 应返回 `false`。 + +```js +assert(telephoneCheck('2 757 622-7382') === false); +``` + +`telephoneCheck("10 (757) 622-7382")` 应返回 `false`。 + +```js +assert(telephoneCheck('10 (757) 622-7382') === false); +``` + +`telephoneCheck("27576227382")` 应返回 `false`。 + +```js +assert(telephoneCheck('27576227382') === false); +``` + +`telephoneCheck("(275)76227382")` 应返回 `false`。 + +```js +assert(telephoneCheck('(275)76227382') === false); +``` + +`telephoneCheck("2(757)6227382")` 应返回 `false`。 + +```js +assert(telephoneCheck('2(757)6227382') === false); +``` + +`telephoneCheck("2(757)622-7382")` 应返回 `false`。 + +```js +assert(telephoneCheck('2(757)622-7382') === false); +``` + +`telephoneCheck("555)-555-5555")` 应返回 `false`。 + +```js +assert(telephoneCheck('555)-555-5555') === false); +``` + +`telephoneCheck("(555-555-5555")` 应返回 `false`。 + +```js +assert(telephoneCheck('(555-555-5555') === false); +``` + +`telephoneCheck("(555)5(55?)-5555")` 应返回 `false`。 + +```js +assert(telephoneCheck('(555)5(55?)-5555') === false); +``` + +`telephoneCheck("55 55-55-555-5")` 应返回 `false`。 + +```js +assert(telephoneCheck('55 55-55-555-5') === false); +``` + +`telephoneCheck("11 555-555-5555")` 应返回 `false`。 + +```js +assert(telephoneCheck('11 555-555-5555') === false); +``` + +# --seed-- + +## --seed-contents-- + +```js +function telephoneCheck(str) { + return true; +} + +telephoneCheck("555-555-5555"); +``` + +# --solutions-- + +```js +var re = /^([+]?1[\s]?)?((?:[(](?:[2-9]1[02-9]|[2-9][02-8][0-9])[)][\s]?)|(?:(?:[2-9]1[02-9]|[2-9][02-8][0-9])[\s.-]?)){1}([2-9]1[02-9]|[2-9][02-9]1|[2-9][02-9]{2}[\s.-]?){1}([0-9]{4}){1}$/; + +function telephoneCheck(str) { + return re.test(str); +} + +telephoneCheck("555-555-5555"); +``` diff --git a/curriculum/challenges/chinese/15-javascript-algorithms-and-data-structures-22/learn-basic-javascript-by-building-a-role-playing-game/5d5a813321b9e3db6c106a46.md b/curriculum/challenges/chinese/15-javascript-algorithms-and-data-structures-22/learn-basic-javascript-by-building-a-role-playing-game/5d5a813321b9e3db6c106a46.md new file mode 100644 index 00000000000..bc00b503ff5 --- /dev/null +++ b/curriculum/challenges/chinese/15-javascript-algorithms-and-data-structures-22/learn-basic-javascript-by-building-a-role-playing-game/5d5a813321b9e3db6c106a46.md @@ -0,0 +1,154 @@ +--- +id: 5d5a813321b9e3db6c106a46 +title: 步骤 1 +challengeType: 0 +dashedName: step-1 +--- + +# --description-- + +JavaScript 是一种强大的语言，它允许你构建交互式网站。 首先，使用 `DOCTYPE`、`html`、`head` 和 `body` 创建你的标准 HTML 样板。 包括一个 `title` 元素和一个 `link` 用于样式表，以及 `meta` 标记用于 `charset`。 然后，在 `body` 中创建一个 ID 为 `game` 的 `div` 元素。 给你的 `title` 元素添加文本 `RPG - Dragon Repeller`。 + +# --hints-- + +代码应包含 `DOCTYPE` 声明。 + +```js +assert(code.match(/` 关闭 `DOCTYPE` 声明。 + +```js +assert(code.match(//gi)); +``` + +`html` 元素应该有一个开始标签。 不要忘记 `lang` 属性。 + +```js +assert(code.match(//gi)); +``` + +`html` 元素应该有一个结束标签。 + +```js +assert(code.match(/<\/html\s*>/)); +``` + +`DOCTYPE` 声明应位于 HTML 的开头。 + +```js +assert(__helpers.removeHtmlComments(code).match(/^\s*/i)); +``` + +应该有一个 `head` 开始标签。 + +```js +assert(code.match(//i)); +``` + +应该有一个 `head` 结束标签。 + +```js +assert(code.match(/<\/head\s*>/i)); +``` + +应该有一个 `body` 开始标签。 + +```js +assert(code.match(//i)); +``` + +应该有一个 `body` 结束标签。 + +```js +assert(code.match(/<\/body\s*>/i)); +``` + +`head` 和 `body` 元素应该是兄弟元素。 + +```js +assert(document.querySelector('head')?.nextElementSibling?.localName === 'body'); +``` + +`head` 元素应该在 `html` 元素内。 + +```js +assert([...document.querySelector('html')?.children].some(x => x?.localName === 'head')); +``` + +`body` 元素应该在 `html` 元素内。 + +```js +assert([...document.querySelector('html')?.children].some(x => x?.localName === 'body')); +``` + +代码应该有一个 `meta` 元素。 + +```js +const meta = document.querySelector('meta'); +assert.exists(meta); +``` + +`meta` 元素应该有一个 `charset` 属性，其值为 `UTF-8`。 + +```js +assert.match(code, / link'); +assert.exists(link); +``` + +代码应该有一个 `div` 元素。 + +```js +const div = document.querySelector('div'); +assert.exists(div); +``` + +`div` 元素应该有一个 `id` 属性，其值为 `game`。 + +```js +const div = document.querySelector('div'); +assert.equal(div?.id, 'game'); +``` + +`div` 元素应该在 `body` 元素内。 + +```js +const div = document.querySelector('div'); +assert.equal(div?.parentElement?.localName, 'body'); +``` + +# --seed-- + +## --seed-contents-- + +```html +--fcc-editable-region-- + +--fcc-editable-region-- +``` diff --git a/curriculum/challenges/chinese/15-javascript-algorithms-and-data-structures-22/learn-basic-javascript-by-building-a-role-playing-game/62a115879a6d51422652cbfc.md b/curriculum/challenges/chinese/15-javascript-algorithms-and-data-structures-22/learn-basic-javascript-by-building-a-role-playing-game/62a115879a6d51422652cbfc.md new file mode 100644 index 00000000000..66dd2f0442d --- /dev/null +++ b/curriculum/challenges/chinese/15-javascript-algorithms-and-data-structures-22/learn-basic-javascript-by-building-a-role-playing-game/62a115879a6d51422652cbfc.md @@ -0,0 +1,78 @@ +--- +id: 62a115879a6d51422652cbfc +title: 步骤 2 +challengeType: 0 +dashedName: step-2 +--- + +# --description-- + +在 `#game` 元素中创建四个 `div` 元素。 按顺序为它们提供以下相应的 `id` 值：`stats`、`controls`、`monsterStats` 和 `text`。 + +# --hints-- + +应该创建四个新的 `div` 元素。 + +```js +assert.equal(document.querySelectorAll('div')?.length, 5); +``` + +应该为新的 `div` 元素之一提供 `id` 设为 `stats`。 + +```js +assert.exists(document.querySelector('div#stats')); +``` + +应该为新的 `div` 元素之一提供 `id` 设为 `controls`。 + +```js +assert.exists(document.querySelector('div#controls')); +``` + +应该为新的 `div` 元素之一提供 `id` 设为 `monsterStats`。 + +```js +assert.exists(document.querySelector('div#monsterStats')); +``` + +应该为新的 `div` 元素之一提供 `id` 设为 `text`。 + +```js +assert.exists(document.querySelector('div#text')); +``` + +应该以正确的顺序放置新的 `div` 元素。 + +```js +function __t(a, b) { + return document.querySelector(a)?.nextElementSibling?.getAttribute('id') === b; +} +assert(__t('div#stats','controls') && __t('div#controls','monsterStats') && __t('div#monsterStats','text')); +``` + +应该将新的 `div` 元素放在 `#game` 元素中。 + +```js +assert.equal(document.querySelector('#game')?.children?.length, 4); +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + + + RPG - Dragon Repeller + +--fcc-editable-region-- + +
+
+ +--fcc-editable-region-- + +``` diff --git a/curriculum/challenges/chinese/15-javascript-algorithms-and-data-structures-22/learn-basic-javascript-by-building-a-role-playing-game/62a1166ed9a56d439c0770e7.md b/curriculum/challenges/chinese/15-javascript-algorithms-and-data-structures-22/learn-basic-javascript-by-building-a-role-playing-game/62a1166ed9a56d439c0770e7.md new file mode 100644 index 00000000000..8626fd4cd54 --- /dev/null +++ b/curriculum/challenges/chinese/15-javascript-algorithms-and-data-structures-22/learn-basic-javascript-by-building-a-role-playing-game/62a1166ed9a56d439c0770e7.md @@ -0,0 +1,70 @@ +--- +id: 62a1166ed9a56d439c0770e7 +title: 步骤 3 +challengeType: 0 +dashedName: step-3 +--- + +# --description-- + +在 `#stats` 元素中创建三个 `span` 元素。 给每个元素一个类 `stat`。 然后给第一个元素设置文本 `XP: 0`，给第二个元素设置文本 `Health: 100`，给第三个元素设置文本 `Gold: 50`。 + +# --hints-- + +`#stats` 元素中应该有三个 `span` 元素。 + +```js +const spans = document.querySelectorAll('#stats > span'); +assert.equal(spans?.length, 3); +``` + +应该给新的三个 `span` 元素一个 `stat` 类。 + +```js +assert.exists(document.querySelectorAll('#stats > .stat')?.length, 3); +``` + +第一个 `.stat` 元素应具有提供的文本 `XP: 0`。 + +```js +assert(document.querySelectorAll('#stats > .stat')?.[0]?.innerText === 'XP: 0'); +``` + +第二个 `.stat` 元素应具有提供的文本 `Health: 100`。 + +```js +assert(document.querySelectorAll('#stats > .stat')?.[1]?.innerText === 'Health: 100'); +``` + +第三个 `.stat` 元素应具有提供的文本 `Gold: 50`。 + +```js +assert(document.querySelectorAll('#stats > .stat')?.[2]?.innerText === 'Gold: 50'); +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + + + RPG - Dragon Repeller + +--fcc-editable-region-- + +
+
+ +
+
+
+
+
+ +--fcc-editable-region-- + +``` diff --git a/curriculum/challenges/chinese/15-javascript-algorithms-and-data-structures-22/learn-basic-javascript-by-building-a-role-playing-game/62a23c1d505bfa13747c8a9b.md b/curriculum/challenges/chinese/15-javascript-algorithms-and-data-structures-22/learn-basic-javascript-by-building-a-role-playing-game/62a23c1d505bfa13747c8a9b.md new file mode 100644 index 00000000000..697ec34dfd8 --- /dev/null +++ b/curriculum/challenges/chinese/15-javascript-algorithms-and-data-structures-22/learn-basic-javascript-by-building-a-role-playing-game/62a23c1d505bfa13747c8a9b.md @@ -0,0 +1,167 @@ +--- +id: 62a23c1d505bfa13747c8a9b +title: 步骤 4 +challengeType: 0 +dashedName: step-4 +--- + +# --description-- + +将数字 `0`、`100` 和 `50` 包含在 `span` 元素中，并将这些新的 `span` 元素包含在 `strong` 元素中。 然后分别为新的 `span` 元素设置 `id` 值为 `xpText`、`healthText` 和 `goldText` 。 + +# --hints-- + +应该在第一个 `.stat` 元素中添加一个 `strong` 元素。 + +```js +const stat = document.querySelectorAll('.stat')[0]; +const strong = stat?.querySelector('strong'); +assert.exists(strong); +``` + +第一个新的 `strong` 元素应该有一个 `span` 元素。 + +```js +const stat = document.querySelectorAll('.stat')[0]; +const strong = stat?.querySelector('strong'); +const span = strong?.querySelector('span'); +assert.exists(span); +``` + +第一个嵌套的 `span` 元素应具有 `id` 值为 `xpText`。 + +```js +const stat = document.querySelectorAll('.stat')[0]; +const strong = stat?.querySelector('strong'); +const span = strong?.querySelector('span'); +assert.equal(span?.id, 'xpText'); +``` + +第一个 `span` 元素应该包裹在文本 `0` 周围。 + +```js +const stat = document.querySelectorAll('.stat')[0]; +const strong = stat?.querySelector('strong'); +const span = strong?.querySelector('span'); +assert.equal(span.innerText, '0'); +``` + +第一个 `.stat` 元素的文本仍应为 `XP: 0`。 + +```js +const stat = document.querySelectorAll('.stat')[0]; +assert.equal(stat.innerText, 'XP: 0'); +``` + +应该在第二个 `.stat` 元素中添加一个 `strong` 元素。 + +```js +const stat = document.querySelectorAll('.stat')[1]; +const strong = stat?.querySelector('strong'); +assert.exists(strong); +``` + +第二个新 `strong` 元素应该有一个 `span` 元素。 + +```js +const stat = document.querySelectorAll('.stat')[1]; +const strong = stat?.querySelector('strong'); +const span = strong?.querySelector('span'); +assert.exists(span); +``` + +第二个嵌套的 `span` 元素应具有 `id` 值为 `healthText`。 + +```js +const stat = document.querySelectorAll('.stat')[1]; +const strong = stat?.querySelector('strong'); +const span = strong?.querySelector('span'); +assert.equal(span?.id, 'healthText'); +``` + +第二个 `span` 元素应包裹在文本 `100` 周围。 + +```js +const stat = document.querySelectorAll('.stat')[1]; +const strong = stat?.querySelector('strong'); +const span = strong?.querySelector('span'); +assert.equal(span.innerText, '100'); +``` + +第二个 `.stat` 元素的文本仍应为 `Health: 100`。 + +```js +const stat = document.querySelectorAll('.stat')[1]; +assert.equal(stat.innerText, 'Health: 100'); +``` + +应该在第三个 `.stat` 元素中添加一个 `strong` 元素。 + +```js +const stat = document.querySelectorAll('.stat')[2]; +const strong = stat?.querySelector('strong'); +assert.exists(strong); +``` + +第三个新 `strong` 元素应该有一个 `span` 元素。 + +```js +const stat = document.querySelectorAll('.stat')[2]; +const strong = stat?.querySelector('strong'); +const span = strong?.querySelector('span'); +assert.exists(span); +``` + +第三个嵌套的 `span` 元素应具有 `id` 值为 `goldText`。 + +```js +const stat = document.querySelectorAll('.stat')[2]; +const strong = stat?.querySelector('strong'); +const span = strong?.querySelector('span'); +assert.equal(span?.id, 'goldText'); +``` + +第三个 `span` 元素应包裹在文本 `50` 周围。 + +```js +const stat = document.querySelectorAll('.stat')[2]; +const strong = stat?.querySelector('strong'); +const span = strong?.querySelector('span'); +assert.equal(span.innerText, '50'); +``` + +第三个 `.stat` 元素的文本仍应为 `Gold: 50`。 + +```js +const stat = document.querySelectorAll('.stat')[2]; +assert.equal(stat.innerText, 'Gold: 50'); +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + + + RPG - Dragon Repeller + + +
+
+--fcc-editable-region-- + XP: 0 + Health: 100 + Gold: 50 +--fcc-editable-region-- +
+
+
+
+
+ + +``` diff --git a/curriculum/challenges/chinese/15-javascript-algorithms-and-data-structures-22/learn-basic-javascript-by-building-a-role-playing-game/62a23cb9bc467a147516b500.md b/curriculum/challenges/chinese/15-javascript-algorithms-and-data-structures-22/learn-basic-javascript-by-building-a-role-playing-game/62a23cb9bc467a147516b500.md new file mode 100644 index 00000000000..115dc86dd5a --- /dev/null +++ b/curriculum/challenges/chinese/15-javascript-algorithms-and-data-structures-22/learn-basic-javascript-by-building-a-role-playing-game/62a23cb9bc467a147516b500.md @@ -0,0 +1,99 @@ +--- +id: 62a23cb9bc467a147516b500 +title: 步骤 5 +challengeType: 0 +dashedName: step-5 +--- + +# --description-- + +在 `#controls` 元素中，创建三个 `button` 元素。 第一个应该将 `id` 设置为 `button1`，以及文本设置为 `Go to store`。 第二个应该将 `id` 设置为 `button2`，以及文本设置为 `Go to cave`。 第三个应该将 `id` 设置为 `button3`，以及文本设置为 `Fight dragon`。 + +# --hints-- + +应该将三个 `button` 元素添加到 `#controls` 元素中。 + +```js +const buttons = document.querySelectorAll('#controls > button'); +assert.exists(buttons); +assert.equal(buttons.length, 3); +``` + +第一个按钮应该将 `id` 设置为 `button1`。 + +```js +const buttons = document.querySelectorAll('#controls > button'); +const button1 = buttons[0]; +assert.equal(button1.id, 'button1'); +``` + +第一个按钮应该有文本 `Go to store`。 + +```js +const buttons = document.querySelectorAll('#controls > button'); +const button1 = buttons[0]; +assert.equal(button1.innerText, 'Go to store'); +``` + +第二个按钮应该将 `id` 设置为 `button2`。 + +```js +const buttons = document.querySelectorAll('#controls > button'); +const button2 = buttons[1]; +assert.equal(button2.id, 'button2'); +``` + +第二个按钮应该有文本 `Go to cave`。 + +```js +const buttons = document.querySelectorAll('#controls > button'); +const button2 = buttons[1]; +assert.equal(button2.innerText, 'Go to cave'); +``` + +第三个按钮应该将 `id` 设置为 `button3`。 + +```js +const buttons = document.querySelectorAll('#controls > button'); +const button3 = buttons[2]; +assert.equal(button3.id, 'button3'); +``` + +第三个按钮应该有文本 `Fight dragon`。 + +```js +const buttons = document.querySelectorAll('#controls > button'); +const button3 = buttons[2]; +assert.equal(button3.innerText, 'Fight dragon'); +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + + + RPG - Dragon Repeller + + +
+
+ XP: 0 + Health: 100 + Gold: 50 +
+--fcc-editable-region-- +
+ +
+--fcc-editable-region-- +
+
+
+ + +``` diff --git a/curriculum/challenges/chinese/15-javascript-algorithms-and-data-structures-22/learn-basic-javascript-by-building-a-role-playing-game/62a23d1c5f1c93161f3582ae.md b/curriculum/challenges/chinese/15-javascript-algorithms-and-data-structures-22/learn-basic-javascript-by-building-a-role-playing-game/62a23d1c5f1c93161f3582ae.md new file mode 100644 index 00000000000..1cacb99c7b4 --- /dev/null +++ b/curriculum/challenges/chinese/15-javascript-algorithms-and-data-structures-22/learn-basic-javascript-by-building-a-role-playing-game/62a23d1c5f1c93161f3582ae.md @@ -0,0 +1,104 @@ +--- +id: 62a23d1c5f1c93161f3582ae +title: 步骤 6 +challengeType: 0 +dashedName: step-6 +--- + +# --description-- + +与 `#stats` 元素类似，`#monsterStats` 元素需要两个 `span` 元素。 给它们类 `stat`，并给第一个元素文本 `Monster Name:`，给第二个元素文本 `Health:`。 在每个文本之后，添加一个 `strong` 元素和一个空的嵌套 `span` 元素。 + +# --hints-- + +`monsterStats` 元素应该有两个 `span` 元素。 + +```js +const spans = document.querySelectorAll(`#monsterStats > span`); +assert.equal(spans.length, 2); +``` + +新的 `span` 元素都应该具有 `stat` 的 `class` 值。 + +```js +const spans = document.querySelectorAll(`#monsterStats > span`); +assert.equal(spans[0].className, 'stat'); +assert.equal(spans[1].className, 'stat'); +``` + +第一个 `span` 元素应该包含文本 `Monster Name:`。 请确保间隔正确。 + +```js +const spans = document.querySelectorAll(`#monsterStats > span`); +assert.equal(spans[0].innerText, 'Monster Name: '); +``` + +第二个 `span` 元素应包含文本 `Health:`。 请确保间隔正确。 + +```js +const spans = document.querySelectorAll(`#monsterStats > span`); +assert.equal(spans[1].textContent, 'Health: '); +``` + +第一个 `span` 元素应该有一个 `strong` 元素和一个空的嵌套 `span` 元素。 + +```js +const spans = document.querySelectorAll(`#monsterStats > span`); +const strong = spans[0]?.querySelector('strong'); +const span = strong?.querySelector('span'); +assert.exists(strong); +assert.exists(span); +``` + +第二个 `span` 元素应该有一个 `strong` 元素和一个空的嵌套 `span` 元素。 + +```js +const spans = document.querySelectorAll(`#monsterStats > span`); +const strong = spans[1]?.querySelector('strong'); +const span = strong?.querySelector('span'); +assert.exists(strong); +assert.exists(span); +``` + +`strong` 和 `span` 元素应该在文本之后。 + +```js +const spans = document.querySelectorAll(`#monsterStats > span`); +assert.match(spans[0].innerHTML, /Monster Name: /); +assert.match(spans[1].innerHTML, /Health: /); +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + + + RPG - Dragon Repeller + + +
+
+ XP: 0 + Health: 100 + Gold: 50 +
+
+ + + +
+--fcc-editable-region-- +
+ +
+--fcc-editable-region-- +
+
+ + +``` diff --git a/curriculum/challenges/chinese/15-javascript-algorithms-and-data-structures-22/learn-basic-javascript-by-building-a-role-playing-game/62a2401b9842721796b72850.md b/curriculum/challenges/chinese/15-javascript-algorithms-and-data-structures-22/learn-basic-javascript-by-building-a-role-playing-game/62a2401b9842721796b72850.md new file mode 100644 index 00000000000..87fc3c14d72 --- /dev/null +++ b/curriculum/challenges/chinese/15-javascript-algorithms-and-data-structures-22/learn-basic-javascript-by-building-a-role-playing-game/62a2401b9842721796b72850.md @@ -0,0 +1,62 @@ +--- +id: 62a2401b9842721796b72850 +title: 步骤 7 +challengeType: 0 +dashedName: step-7 +--- + +# --description-- + +为你的 `#text` 元素提供以下文本： + +```markup +Welcome to Dragon Repeller. You must defeat the dragon that is preventing people from leaving the town. +You are in the town square. Where do you want to go? Use the buttons above. +``` + +# --hints-- + +`#text` 元素应该有上面引用的文本。 + +```js +const text = document.querySelector('#text'); +assert.equal(text.innerText, "Welcome to Dragon Repeller. You must defeat the dragon that is preventing people from leaving the town. You are in the town square. Where do you want to go? Use the buttons above."); +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + + + RPG - Dragon Repeller + + +
+
+ XP: 0 + Health: 100 + Gold: 50 +
+
+ + + +
+
+ Monster Name: + Health: +
+--fcc-editable-region-- +
+ +
+--fcc-editable-region-- +
+ + +``` diff --git a/curriculum/challenges/chinese/15-javascript-algorithms-and-data-structures-22/learn-basic-javascript-by-building-a-role-playing-game/62a24068d60b671847d1d4e2.md b/curriculum/challenges/chinese/15-javascript-algorithms-and-data-structures-22/learn-basic-javascript-by-building-a-role-playing-game/62a24068d60b671847d1d4e2.md new file mode 100644 index 00000000000..91e3914faf6 --- /dev/null +++ b/curriculum/challenges/chinese/15-javascript-algorithms-and-data-structures-22/learn-basic-javascript-by-building-a-role-playing-game/62a24068d60b671847d1d4e2.md @@ -0,0 +1,68 @@ +--- +id: 62a24068d60b671847d1d4e2 +title: 步骤 8 +challengeType: 0 +dashedName: step-8 +--- + +# --description-- + +现在我们需要快速设置一些样式。 首先将 `body` 的 `background-color` 设置为 `darkblue`。 + +# --hints-- + +应该有一个 `body` 选择器。 + +```js +const body = new __helpers.CSSHelp(document).getStyle('body'); +assert.exists(body); +``` + +`body` 选择器应该将 `background-color` 属性设置为 `darkblue`。 + +```js +const background = new __helpers.CSSHelp(document).getStyle('body')?.getPropertyValue('background-color'); +assert.equal(background, 'darkblue'); +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + + + RPG - Dragon Repeller + + +
+
+ XP: 0 + Health: 100 + Gold: 50 +
+
+ + + +
+
+ Monster Name: + Health: +
+
+ Welcome to Dragon Repeller. You must defeat the dragon that is preventing people from leaving the town. You are in the town square. Where do you want to go? Use the buttons above. +
+
+ + +``` + +```css +--fcc-editable-region-- + +--fcc-editable-region-- +``` diff --git a/curriculum/challenges/chinese/15-javascript-algorithms-and-data-structures-22/learn-basic-javascript-by-building-a-role-playing-game/62a2409897ec621942234cf6.md b/curriculum/challenges/chinese/15-javascript-algorithms-and-data-structures-22/learn-basic-javascript-by-building-a-role-playing-game/62a2409897ec621942234cf6.md new file mode 100644 index 00000000000..b6fe87485f0 --- /dev/null +++ b/curriculum/challenges/chinese/15-javascript-algorithms-and-data-structures-22/learn-basic-javascript-by-building-a-role-playing-game/62a2409897ec621942234cf6.md @@ -0,0 +1,86 @@ +--- +id: 62a2409897ec621942234cf6 +title: 步骤 9 +challengeType: 0 +dashedName: step-9 +--- + +# --description-- + +给 `#text` 元素一个 `black` 的 `background-color`，一个 `white` 的 `color` 和一个 `10px` 的边距。 + +# --hints-- + +应该有一个 `#text` 选择器。 + +```js +const text = new __helpers.CSSHelp(document).getStyle('#text'); +assert.exists(text); +``` + +`#text` 元素应该有一个 `black` 的 `background-color`。 + +```js +const background = new __helpers.CSSHelp(document).getStyle('#text')?.getPropertyValue('background-color'); +assert.equal(background, 'black'); +``` + +`#text` 元素应该具有 `white` 的 `color`。 + +```js +const color = new __helpers.CSSHelp(document).getStyle('#text')?.getPropertyValue('color'); +assert.equal(color, 'white'); +``` + +`#text` 元素应该有 `10px` 的边距。 + +```js +const padding = new __helpers.CSSHelp(document).getStyle('#text')?.getPropertyValue('padding'); +assert.equal(padding, '10px'); +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + + + RPG - Dragon Repeller + + +
+
+ XP: 0 + Health: 100 + Gold: 50 +
+
+ + + +
+
+ Monster Name: + Health: +
+
+ Welcome to Dragon Repeller. You must defeat the dragon that is preventing people from leaving the town. You are in the town square. Where do you want to go? Use the buttons above. +
+
+ + +``` + +```css +body { + background-color: darkblue; +} + +--fcc-editable-region-- + +--fcc-editable-region-- +``` diff --git a/curriculum/challenges/chinese/15-javascript-algorithms-and-data-structures-22/learn-basic-javascript-by-building-a-role-playing-game/62a240c67f3dbb1a1e6d95ee.md b/curriculum/challenges/chinese/15-javascript-algorithms-and-data-structures-22/learn-basic-javascript-by-building-a-role-playing-game/62a240c67f3dbb1a1e6d95ee.md new file mode 100644 index 00000000000..1bdd85b7491 --- /dev/null +++ b/curriculum/challenges/chinese/15-javascript-algorithms-and-data-structures-22/learn-basic-javascript-by-building-a-role-playing-game/62a240c67f3dbb1a1e6d95ee.md @@ -0,0 +1,113 @@ +--- +id: 62a240c67f3dbb1a1e6d95ee +title: 步骤 10 +challengeType: 0 +dashedName: step-10 +--- + +# --description-- + +为 `#game` 提供 `500px` 的最大宽度和 `400px` 的最大高度。 将 `background-color` 设置为 `lightgray`，并将 `color` 设置为 `white`。 最后，使用边距使其居中，并在所有四个边上给它 `10px` 的填充。 + +# --hints-- + +应该有一个 `#game` 选择器。 + +```js +const game = new __helpers.CSSHelp(document).getStyle('#game'); +assert.exists(game); +``` + +`#game` 选择器的 `max-width` 应该是 `500px`。 + +```js +const maxWidth = new __helpers.CSSHelp(document).getStyle('#game')?.getPropertyValue('max-width'); +assert.equal(maxWidth, '500px'); +``` + +`#game` 选择器的 `max-height` 应该是 `400px`。 + +```js +const maxHeight = new __helpers.CSSHelp(document).getStyle('#game')?.getPropertyValue('max-height'); +assert.equal(maxHeight, '400px'); +``` + +`#game` 选择器应该具有 `lightgray` 的 `background-color`。 + +```js +const background = new __helpers.CSSHelp(document).getStyle('#game')?.getPropertyValue('background-color'); +assert.equal(background, 'lightgray'); +``` + +`#game` 选择器应该有一个 `color` `white`。 + +```js +const color = new __helpers.CSSHelp(document).getStyle('#game')?.getPropertyValue('color'); +assert.equal(color, 'white'); +``` + +`#game` 选择器应该将 `margin` 设置为 `0 auto`。 + +```js +const margin = new __helpers.CSSHelp(document).getStyle('#game')?.getPropertyValue('margin'); +assert.equal(margin, '0px auto'); +``` + +`#game` 选择器应该有 `10px` 的边距。 + +```js +const padding = new __helpers.CSSHelp(document).getStyle('#game')?.getPropertyValue('padding'); +assert.equal(padding, '10px'); +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + + + RPG - Dragon Repeller + + +
+
+ XP: 0 + Health: 100 + Gold: 50 +
+
+ + + +
+
+ Monster Name: + Health: +
+
+ Welcome to Dragon Repeller. You must defeat the dragon that is preventing people from leaving the town. You are in the town square. Where do you want to go? Use the buttons above. +
+
+ + +``` + +```css +body { + background-color: darkblue; +} + +#text { + background-color: black; + color: white; + padding: 10px; +} + +--fcc-editable-region-- + +--fcc-editable-region-- +``` diff --git a/curriculum/challenges/chinese/15-javascript-algorithms-and-data-structures-22/learn-basic-javascript-by-building-a-role-playing-game/62a24128d5e8af1b47ad1aab.md b/curriculum/challenges/chinese/15-javascript-algorithms-and-data-structures-22/learn-basic-javascript-by-building-a-role-playing-game/62a24128d5e8af1b47ad1aab.md new file mode 100644 index 00000000000..9038b360990 --- /dev/null +++ b/curriculum/challenges/chinese/15-javascript-algorithms-and-data-structures-22/learn-basic-javascript-by-building-a-role-playing-game/62a24128d5e8af1b47ad1aab.md @@ -0,0 +1,101 @@ +--- +id: 62a24128d5e8af1b47ad1aab +title: 步骤 11 +challengeType: 0 +dashedName: step-11 +--- + +# --description-- + +给 `#controls` 和 `#stats` 元素一个 `border` 为 `1px solid black`，一个 `black` 的文本颜色和 `5px` 的填充（padding）。 + +# --hints-- + +应该有一个 `#controls, #stats` 选择器。 + +```js +const selector = new __helpers.CSSHelp(document).getStyle('#controls, #stats'); +assert.exists(selector); +``` + +`#controls, #stats` 选择器的 `border` 应该是 `1px solid black`。 + +```js +const border = new __helpers.CSSHelp(document).getStyle('#controls, #stats')?.getPropertyValue('border'); +assert.equal(border, '1px solid black'); +``` + +`#controls, #stats` 选择器的 `color` 应该是 `black`。 + +```js +const color = new __helpers.CSSHelp(document).getStyle('#controls, #stats')?.getPropertyValue('color'); +assert.equal(color, 'black'); +``` + +`#controls, #stats` 选择器应该有 `5px` 的填充。 + +```js +const padding = new __helpers.CSSHelp(document).getStyle('#controls, #stats')?.getPropertyValue('padding'); +assert.equal(padding, '5px'); +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + + + RPG - Dragon Repeller + + +
+
+ XP: 0 + Health: 100 + Gold: 50 +
+
+ + + +
+
+ Monster Name: + Health: +
+
+ Welcome to Dragon Repeller. You must defeat the dragon that is preventing people from leaving the town. You are in the town square. Where do you want to go? Use the buttons above. +
+
+ + +``` + +```css +body { + background-color: darkblue; +} + +#text { + background-color: black; + color: white; + padding: 10px; +} + +#game { + max-width: 500px; + max-height: 400px; + background-color: lightgray; + color: white; + margin: 0 auto; + padding: 10px; +} + +--fcc-editable-region-- + +--fcc-editable-region-- +``` diff --git a/curriculum/challenges/chinese/15-javascript-algorithms-and-data-structures-22/learn-basic-javascript-by-building-a-role-playing-game/62a24190868ca51c0b6e83c7.md b/curriculum/challenges/chinese/15-javascript-algorithms-and-data-structures-22/learn-basic-javascript-by-building-a-role-playing-game/62a24190868ca51c0b6e83c7.md new file mode 100644 index 00000000000..bee06023499 --- /dev/null +++ b/curriculum/challenges/chinese/15-javascript-algorithms-and-data-structures-22/learn-basic-javascript-by-building-a-role-playing-game/62a24190868ca51c0b6e83c7.md @@ -0,0 +1,127 @@ +--- +id: 62a24190868ca51c0b6e83c7 +title: 步骤 13 +challengeType: 0 +dashedName: step-13 +--- + +# --description-- + +暂时隐藏 `#monsterStats` 元素。 不要更改任何其他样式。 + +# --hints-- + +应该有一个 `#monsterStats` 选择器。 + +```js +const monsterStats = new __helpers.CSSHelp(document).getStyle('#monsterStats'); +assert.exists(monsterStats); +``` + +`#monsterStats` 选择器应具有 `none` 的 `display` 属性。 + +```js +const display = new __helpers.CSSHelp(document).getStyle('#monsterStats')?.getPropertyValue('display'); +assert.equal(display, 'none'); +``` + +`#monsterStats` 选择器应该有一个 `1px solid black` 的 `border`。 + +```js +const border = new __helpers.CSSHelp(document).getStyle('#monsterStats')?.getPropertyValue('border'); +assert.equal(border, '1px solid black'); +``` + +`#monsterStats` 选择器应该有 `5px` 的填充（padding）。 + +```js +const padding = new __helpers.CSSHelp(document).getStyle('#monsterStats')?.getPropertyValue('padding'); +assert.equal(padding, '5px'); +``` + +`#monsterStats` 选择器应具有 `white` 的 `color`。 + +```js +const color = new __helpers.CSSHelp(document).getStyle('#monsterStats')?.getPropertyValue('color'); +assert.equal(color, 'white'); +``` + +`#monsterStats` 选择器应具有 `red` 的 `background-color`。 + +```js +const background = new __helpers.CSSHelp(document).getStyle('#monsterStats')?.getPropertyValue('background-color'); +assert.equal(background, 'red'); +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + + + RPG - Dragon Repeller + + +
+
+ XP: 0 + Health: 100 + Gold: 50 +
+
+ + + +
+
+ Monster Name: + Health: +
+
+ Welcome to Dragon Repeller. You must defeat the dragon that is preventing people from leaving the town. You are in the town square. Where do you want to go? Use the buttons above. +
+
+ + +``` + +```css +body { + background-color: darkblue; +} + +#text { + background-color: black; + color: white; + padding: 10px; +} + +#game { + max-width: 500px; + max-height: 400px; + background-color: lightgray; + color: white; + margin: 0 auto; + padding: 10px; +} + +#controls, #stats { + border: 1px solid black; + padding: 5px; + color: black; +} + +--fcc-editable-region-- +#monsterStats { + + border: 1px solid black; + padding: 5px; + color: white; + background-color: red; +} +--fcc-editable-region-- +``` diff --git a/curriculum/challenges/chinese/15-javascript-algorithms-and-data-structures-22/learn-basic-javascript-by-building-a-role-playing-game/62a241df03c1f61ce936f5d9.md b/curriculum/challenges/chinese/15-javascript-algorithms-and-data-structures-22/learn-basic-javascript-by-building-a-role-playing-game/62a241df03c1f61ce936f5d9.md new file mode 100644 index 00000000000..4586e39c18c --- /dev/null +++ b/curriculum/challenges/chinese/15-javascript-algorithms-and-data-structures-22/learn-basic-javascript-by-building-a-role-playing-game/62a241df03c1f61ce936f5d9.md @@ -0,0 +1,101 @@ +--- +id: 62a241df03c1f61ce936f5d9 +title: 步骤 14 +challengeType: 0 +dashedName: step-14 +--- + +# --description-- + +最后，给 `.stat` 元素一个 `10px` 的 `padding-right`。 + +# --hints-- + +应该有一个 `.stat` 选择器。 + +```js +const stat = new __helpers.CSSHelp(document).getStyle('.stat'); +assert.exists(stat); +``` + +`.stat` 选择器应该有一个 `10px` 的 `padding-right`。 + +```js +const paddingRight = new __helpers.CSSHelp(document).getStyle('.stat')?.getPropertyValue('padding-right'); +assert.equal(paddingRight, '10px'); +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + + + RPG - Dragon Repeller + + +
+
+ XP: 0 + Health: 100 + Gold: 50 +
+
+ + + +
+
+ Monster Name: + Health: +
+
+ Welcome to Dragon Repeller. You must defeat the dragon that is preventing people from leaving the town. You are in the town square. Where do you want to go? Use the buttons above. +
+
+ + +``` + +```css +body { + background-color: darkblue; +} + +#text { + background-color: black; + color: white; + padding: 10px; +} + +#game { + max-width: 500px; + max-height: 400px; + background-color: lightgray; + color: white; + margin: 0 auto; + padding: 10px; +} + +#controls, #stats { + border: 1px solid black; + padding: 5px; + color: black; +} + +#monsterStats { + display: none; + border: 1px solid black; + padding: 5px; + color: white; + background-color: red; +} + +--fcc-editable-region-- + +--fcc-editable-region-- +``` diff --git a/curriculum/challenges/chinese/15-javascript-algorithms-and-data-structures-22/learn-basic-javascript-by-building-a-role-playing-game/62a2509ba163e020bb9d84ea.md b/curriculum/challenges/chinese/15-javascript-algorithms-and-data-structures-22/learn-basic-javascript-by-building-a-role-playing-game/62a2509ba163e020bb9d84ea.md new file mode 100644 index 00000000000..8a853f47f19 --- /dev/null +++ b/curriculum/challenges/chinese/15-javascript-algorithms-and-data-structures-22/learn-basic-javascript-by-building-a-role-playing-game/62a2509ba163e020bb9d84ea.md @@ -0,0 +1,108 @@ +--- +id: 62a2509ba163e020bb9d84ea +title: 步骤 15 +challengeType: 0 +dashedName: step-15 +--- + +# --description-- + +现在可以开始编写 JavaScript。 首先创建一个 `script` 元素。 此元素用于将 JavaScript 加载到 HTML 文件中。 应该使用开始 `` 标记。 + +# --hints-- + +应该有一个 `script` 元素。 + +```js +assert.isAtLeast(document.querySelectorAll('script').length, 2); +``` + +`script` 元素应该有一个开始标记。 + +```js +assert.match(code, //i); +``` + +`script` 元素应该有一个结束标记。 + +```js +assert.match(code, /<\/script\s*>/i); +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + + + RPG - Dragon Repeller +--fcc-editable-region-- + +--fcc-editable-region-- + + +
+
+ XP: 0 + Health: 100 + Gold: 50 +
+
+ + + +
+
+ Monster Name: + Health: +
+
+ Welcome to Dragon Repeller. You must defeat the dragon that is preventing people from leaving the town. You are in the town square. Where do you want to go? Use the buttons above. +
+
+ + +``` + +```css +body { + background-color: darkblue; +} + +#text { + background-color: black; + color: white; + padding: 10px; +} + +#game { + max-width: 500px; + max-height: 400px; + background-color: lightgray; + color: white; + margin: 0 auto; + padding: 10px; +} + +#controls, #stats { + border: 1px solid black; + padding: 5px; + color: black; +} + +#monsterStats { + display: none; + border: 1px solid black; + padding: 5px; + color: white; + background-color: red; +} + +.stat { + padding-right: 10px; +} +``` diff --git a/curriculum/challenges/chinese/15-javascript-algorithms-and-data-structures-22/learn-basic-javascript-by-building-a-role-playing-game/62a255dae245b52317da824a.md b/curriculum/challenges/chinese/15-javascript-algorithms-and-data-structures-22/learn-basic-javascript-by-building-a-role-playing-game/62a255dae245b52317da824a.md new file mode 100644 index 00000000000..aeb4e1339f4 --- /dev/null +++ b/curriculum/challenges/chinese/15-javascript-algorithms-and-data-structures-22/learn-basic-javascript-by-building-a-role-playing-game/62a255dae245b52317da824a.md @@ -0,0 +1,108 @@ +--- +id: 62a255dae245b52317da824a +title: 步骤 16 +challengeType: 0 +dashedName: step-16 +--- + +# --description-- + +你的开发者控制台是最强大的工具之一。 根据你的浏览器不同，可能需要通过按 `F12` 或 `Ctrl+Shift+I` 来打开它。 也可以点击预览窗口上方的“控制台”按钮来查看我们的内置控制台。 开发者控制台将包含你的代码产生的错误，但你也可以使用它来查看代码中变量的值，这有助于调试。 + +在 `script` 标签之间添加 `console.log("Hello World");` 行，然后单击 “Console” 按钮打开我们的控制台，你应该会看到文本 `Hello World` 在你的控制台中。 + +请注意该行如何以分号结尾。 JavaScript 中的常见做法是用分号结束代码行。 + +# --hints-- + +应该在代码中添加 `console.log("Hello World");` 行。 不要忘记分号。 + +```js +assert.match(code, /console\.log\("Hello World"\);/); +``` + +`console.log("Hello World");` 行应该在 `script` 标记之间。 + +```js +assert.match(code, / +--fcc-editable-region-- + + +
+
+ XP: 0 + Health: 100 + Gold: 50 +
+
+ + + +
+
+ Monster Name: + Health: +
+
+ Welcome to Dragon Repeller. You must defeat the dragon that is preventing people from leaving the town. You are in the town square. Where do you want to go? Use the buttons above. +
+
+ + +``` + +```css +body { + background-color: darkblue; +} + +#text { + background-color: black; + color: white; + padding: 10px; +} + +#game { + max-width: 500px; + max-height: 400px; + background-color: lightgray; + color: white; + margin: 0 auto; + padding: 10px; +} + +#controls, #stats { + border: 1px solid black; + padding: 5px; + color: black; +} + +#monsterStats { + display: none; + border: 1px solid black; + padding: 5px; + color: white; + background-color: red; +} + +.stat { + padding-right: 10px; +} +``` diff --git a/curriculum/challenges/espanol/05-back-end-development-and-apis/back-end-development-and-apis-projects/exercise-tracker.md b/curriculum/challenges/espanol/05-back-end-development-and-apis/back-end-development-and-apis-projects/exercise-tracker.md index 437d64f7a69..c714e6de1f6 100644 --- a/curriculum/challenges/espanol/05-back-end-development-and-apis/back-end-development-and-apis-projects/exercise-tracker.md +++ b/curriculum/challenges/espanol/05-back-end-development-and-apis/back-end-development-and-apis-projects/exercise-tracker.md @@ -164,7 +164,7 @@ async (getUserInput) => { const res = await fetch(url + '/api/users', { method: 'POST', headers: { 'Content-Type': 'application/x-www-form-urlencoded' }, - body: `username=fcc_test_${Date.now()}`.substingr(0, 29) + body: `username=fcc_test_${Date.now()}`.substring(0, 29) }); if (res.ok) { const { _id, username } = await res.json(); diff --git a/curriculum/challenges/italian/02-javascript-algorithms-and-data-structures/es6/use-destructuring-assignment-to-pass-an-object-as-a-functions-parameters.md b/curriculum/challenges/italian/02-javascript-algorithms-and-data-structures/es6/use-destructuring-assignment-to-pass-an-object-as-a-functions-parameters.md index 278e9c3c5ee..17980d1850b 100644 --- a/curriculum/challenges/italian/02-javascript-algorithms-and-data-structures/es6/use-destructuring-assignment-to-pass-an-object-as-a-functions-parameters.md +++ b/curriculum/challenges/italian/02-javascript-algorithms-and-data-structures/es6/use-destructuring-assignment-to-pass-an-object-as-a-functions-parameters.md @@ -8,7 +8,7 @@ dashedName: use-destructuring-assignment-to-pass-an-object-as-a-functions-parame # --description-- -In alcuni casi, è possibile destrutturare l'oggetto in un argomento funzione. +In alcuni casi, è possibile destrutturare l'oggetto in un argomento di una funzione. Considera il codice qui sotto: @@ -19,7 +19,7 @@ const profileUpdate = (profileData) => { } ``` -Questo destruttura efficacemente l'oggetto passato alla funzione. Questo può anche essere fatto sul posto: +Questo codice destruttura efficacemente l'oggetto passato alla funzione. Può anche essere fatto sul posto: ```js const profileUpdate = ({ name, age, nationality, location }) => { diff --git a/curriculum/challenges/italian/05-back-end-development-and-apis/back-end-development-and-apis-projects/exercise-tracker.md b/curriculum/challenges/italian/05-back-end-development-and-apis/back-end-development-and-apis-projects/exercise-tracker.md index aad266f57ca..8cc761006e7 100644 --- a/curriculum/challenges/italian/05-back-end-development-and-apis/back-end-development-and-apis-projects/exercise-tracker.md +++ b/curriculum/challenges/italian/05-back-end-development-and-apis/back-end-development-and-apis-projects/exercise-tracker.md @@ -164,7 +164,7 @@ async (getUserInput) => { const res = await fetch(url + '/api/users', { method: 'POST', headers: { 'Content-Type': 'application/x-www-form-urlencoded' }, - body: `username=fcc_test_${Date.now()}`.substingr(0, 29) + body: `username=fcc_test_${Date.now()}`.substring(0, 29) }); if (res.ok) { const { _id, username } = await res.json(); diff --git a/curriculum/challenges/italian/10-coding-interview-prep/rosetta-code/discordian-date.md b/curriculum/challenges/italian/10-coding-interview-prep/rosetta-code/discordian-date.md index 7692a051fd4..a9e533ccd36 100644 --- a/curriculum/challenges/italian/10-coding-interview-prep/rosetta-code/discordian-date.md +++ b/curriculum/challenges/italian/10-coding-interview-prep/rosetta-code/discordian-date.md @@ -7,12 +7,11 @@ dashedName: discordian-date --- # --description-- +Il calendario Gregoriano è un calendario solare con 12 mesi di 28-31 giorni ognuno. Una settimana consiste in sette giorni e ci sono 52 settimane e 1 giorno ogni anno. L'anno è composto da 365 giorni con un giorno bisestile aggiunto a febbraio in ogni anno bisestile. Un anno bisestile si verifica ogni quattro anni, tranne per i primi tre anni secolari di ogni 400 anni. -Il calendario Gregoriano è un calendario solare con 12 mesi di 28-31 giorni ognuno. L'anno in entrambi i calendari consiste di 365 giorni, con un giorno bisestile aggiunto a febbraio negli anni bisestili eccetto per 3 anni centenari ogni quattrocento anni. +Il calendario Discordiano è allineato con il calendario Gregoriano e inizia il primo di gennaio. Una settimana consiste di cinque giorni e ci sono 73 settimane in un anno. L'anno è composto da 365 giorni, con una giornata in più inserita tra Caos 59 e Caos 60 ogni anno bisestile. -Il calendario Discordiano è allineato con il calendario Gregoriano e inizia il primo di Gennaio. La sua settimana consiste in cinque giorni, ci sono 73 settimane in un anno. Ogni quattro anni nel calendario Discordiano, un giorno extra è inserito tra Chaos 59 e Chaos 60. - -I mesi, i giorni della settimana, e gli eventi nel calendario Discordiano sono dati da: +I mesi, i giorni della settimana, gli eventi apostolici e i giorni sacri nel calendario Discordiano sono: Settimane: `'Chaos', 'Discord', 'Confusion', 'Bureaucracy', 'The Aftermath'`. @@ -26,7 +25,7 @@ Giorni sacri: `'Chaoflux', 'Discoflux', 'Confuflux', 'Bureflux', 'Afflux'`. Converti una certa data dal calendario Discordiano al calendario Gregoriano. -Nota che il giorno Chaos 1, 3188 YOLD nel calendario Discordiano è il giorno primo gennaio 2022 nel calendario Gregoriano. +Nota che il giorno Chaos 1, 3188 YOLD nel calendario Discordiano è il giorno 1 gennaio 2022 del calendario Gregoriano. # --hints-- diff --git a/curriculum/challenges/italian/15-javascript-algorithms-and-data-structures-22/learn-basic-javascript-by-building-a-role-playing-game/62a8aa98a8289d0a698eee1d.md b/curriculum/challenges/italian/15-javascript-algorithms-and-data-structures-22/learn-basic-javascript-by-building-a-role-playing-game/62a8aa98a8289d0a698eee1d.md new file mode 100644 index 00000000000..63cb2df0663 --- /dev/null +++ b/curriculum/challenges/italian/15-javascript-algorithms-and-data-structures-22/learn-basic-javascript-by-building-a-role-playing-game/62a8aa98a8289d0a698eee1d.md @@ -0,0 +1,187 @@ +--- +id: 62a8aa98a8289d0a698eee1d +title: Step 53 +challengeType: 0 +dashedName: step-53 +--- + +# --description-- + +Le proprietà degli oggetti sono scritte come coppie `key: value`, dove `key` è il nome della proprietà (o chiave), e `value` è il valore che la proprietà contiene. Ad esempio, ecco un oggetto con una chiave `name` impostata sul valore `Quincy Larson`. + +```js +{ + name: "Quincy Larson" +} +``` + +Aggiungi una proprietà `name` all'oggetto vuoto e dalle il valore `town square`. + +# --hints-- + +Il primo valore di `locations` dovrebbe essere un oggetto. + +```js +assert.isObject(locations[0]); +``` + +Il primo valore di `locations` dovrebbe avere una proprietà `name`. + +```js +assert.isDefined(locations[0].name); +``` + +Il primo valore di `locations` dovrebbe avere una proprietà `name` con il valore `town square`. + +```js +assert.equal(locations[0].name, "town square"); +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + + + RPG - Dragon Repeller + + +
+
+ XP: 0 + Health: 100 + Gold: 50 +
+
+ + + +
+
+ Monster Name: + Health: +
+
+ Welcome to Dragon Repeller. You must defeat the dragon that is preventing people from leaving the town. You are in the town square. Where do you want to go? Use the buttons above. +
+
+ + + +``` + +```css +body { + background-color: darkblue; +} + +#text { + background-color: black; + color: white; + padding: 10px; +} + +#game { + max-width: 500px; + max-height: 400px; + background-color: lightgray; + color: white; + margin: 0 auto; + padding: 10px; +} + +#controls, #stats { + border: 1px solid black; + padding: 5px; + color: black; +} + +#monsterStats { + display: none; + border: 1px solid black; + padding: 5px; + color: white; + background-color: red; +} + +.stat { + padding-right: 10px; +} +``` + +```js +let xp = 0; +let health = 100; +let gold = 50; +let currentWeapon = 0; +let fighting; +let monsterHealth; +let inventory = ["stick"]; + +const button1 = document.querySelector('#button1'); +const button2 = document.querySelector("#button2"); +const button3 = document.querySelector("#button3"); +const text = document.querySelector("#text"); +const xpText = document.querySelector("#xpText"); +const healthText = document.querySelector("#healthText"); +const goldText = document.querySelector("#goldText"); +const monsterStats = document.querySelector("#monsterStats"); +const monsterName = document.querySelector("#monsterName"); +const monsterHealthText =document.querySelector("#monsterHealth"); +--fcc-editable-region-- +const locations = [ + { + + } +]; +--fcc-editable-region-- + +// initialize buttons +button1.onclick = goStore; +button2.onclick = goCave; +button3.onclick = fightDragon; + +function update(location) { + +} + +function goTown() { + button1.innerText = "Go to store"; + button2.innerText = "Go to cave"; + button3.innerText = "Fight dragon"; + button1.onclick = goStore; + button2.onclick = goCave; + button3.onclick = fightDragon; + text.innerText = "You are in the town square. You see a sign that says \"Store\"."; +} + +function goStore() { + button1.innerText = "Buy 10 health (10 gold)"; + button2.innerText = "Buy weapon (30 gold)"; + button3.innerText = "Go to town square"; + button1.onclick = buyHealth; + button2.onclick = buyWeapon; + button3.onclick = goTown; + text.innerText = "You enter the store."; +} + +function goCave() { + console.log("Going to cave."); +} + +function fightDragon() { + console.log("Fighting dragon."); +} + +function buyHealth() { + +} + +function buyWeapon() { + +} +``` diff --git a/curriculum/challenges/italian/15-javascript-algorithms-and-data-structures-22/learn-basic-javascript-by-building-a-role-playing-game/62a8ab0e27cbaf0b54ba8a42.md b/curriculum/challenges/italian/15-javascript-algorithms-and-data-structures-22/learn-basic-javascript-by-building-a-role-playing-game/62a8ab0e27cbaf0b54ba8a42.md new file mode 100644 index 00000000000..6d03f8e0d85 --- /dev/null +++ b/curriculum/challenges/italian/15-javascript-algorithms-and-data-structures-22/learn-basic-javascript-by-building-a-role-playing-game/62a8ab0e27cbaf0b54ba8a42.md @@ -0,0 +1,200 @@ +--- +id: 62a8ab0e27cbaf0b54ba8a42 +title: Step 54 +challengeType: 0 +dashedName: step-54 +--- + +# --description-- + +Proprio come i valori degli array, le proprietà degli oggetti sono separate da una virgola. Aggiungi una virgola dopo la proprietà `name` e aggiungi una proprietà `button text` con il valore di un array vuoto. Nota che visto che il nome della proprietà ha più di una parola, dovrai racchiuderlo tra virgolette. + +Ad esempio: + +```js +{ + name: "Naomi", + "favorite color": "purple" +} +``` + +# --hints-- + +Il primo valore di `locations` dovrebbe essere un oggetto. + +```js +assert.isObject(locations[0]); +``` + +Il primo valore di `locations` dovrebbe avere una proprietà `button text`. + +```js +assert.isDefined(locations[0]["button text"]); +``` + +Il primo valore di `locations` dovrebbe avere una proprietà `button text` con un array come valore. + +```js +assert.isArray(locations[0]["button text"]); +``` + +Il primo valore di `locations` dovrebbe avere una proprietà `button text` con un array vuoto come valore. + +```js +assert.equal(locations[0]["button text"].length, 0); +``` + +Non dovresti rimuovere o cambiare la proprietà `name`. + +```js +assert.equal(locations[0].name, "town square"); +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + + + RPG - Dragon Repeller + + +
+
+ XP: 0 + Health: 100 + Gold: 50 +
+
+ + + +
+
+ Monster Name: + Health: +
+
+ Welcome to Dragon Repeller. You must defeat the dragon that is preventing people from leaving the town. You are in the town square. Where do you want to go? Use the buttons above. +
+
+ + + +``` + +```css +body { + background-color: darkblue; +} + +#text { + background-color: black; + color: white; + padding: 10px; +} + +#game { + max-width: 500px; + max-height: 400px; + background-color: lightgray; + color: white; + margin: 0 auto; + padding: 10px; +} + +#controls, #stats { + border: 1px solid black; + padding: 5px; + color: black; +} + +#monsterStats { + display: none; + border: 1px solid black; + padding: 5px; + color: white; + background-color: red; +} + +.stat { + padding-right: 10px; +} +``` + +```js +let xp = 0; +let health = 100; +let gold = 50; +let currentWeapon = 0; +let fighting; +let monsterHealth; +let inventory = ["stick"]; + +const button1 = document.querySelector('#button1'); +const button2 = document.querySelector("#button2"); +const button3 = document.querySelector("#button3"); +const text = document.querySelector("#text"); +const xpText = document.querySelector("#xpText"); +const healthText = document.querySelector("#healthText"); +const goldText = document.querySelector("#goldText"); +const monsterStats = document.querySelector("#monsterStats"); +const monsterName = document.querySelector("#monsterName"); +const monsterHealthText =document.querySelector("#monsterHealth"); +--fcc-editable-region-- +const locations = [ + { + name: "town square" + } +]; +--fcc-editable-region-- + +// initialize buttons +button1.onclick = goStore; +button2.onclick = goCave; +button3.onclick = fightDragon; + +function update(location) { + +} + +function goTown() { + button1.innerText = "Go to store"; + button2.innerText = "Go to cave"; + button3.innerText = "Fight dragon"; + button1.onclick = goStore; + button2.onclick = goCave; + button3.onclick = fightDragon; + text.innerText = "You are in the town square. You see a sign that says \"Store\"."; +} + +function goStore() { + button1.innerText = "Buy 10 health (10 gold)"; + button2.innerText = "Buy weapon (30 gold)"; + button3.innerText = "Go to town square"; + button1.onclick = buyHealth; + button2.onclick = buyWeapon; + button3.onclick = goTown; + text.innerText = "You enter the store."; +} + +function goCave() { + console.log("Going to cave."); +} + +function fightDragon() { + console.log("Fighting dragon."); +} + +function buyHealth() { + +} + +function buyWeapon() { + +} +``` diff --git a/curriculum/challenges/italian/15-javascript-algorithms-and-data-structures-22/learn-basic-javascript-by-building-a-role-playing-game/62a8ac194679e60cb561b0a8.md b/curriculum/challenges/italian/15-javascript-algorithms-and-data-structures-22/learn-basic-javascript-by-building-a-role-playing-game/62a8ac194679e60cb561b0a8.md new file mode 100644 index 00000000000..ceda4b2f09c --- /dev/null +++ b/curriculum/challenges/italian/15-javascript-algorithms-and-data-structures-22/learn-basic-javascript-by-building-a-role-playing-game/62a8ac194679e60cb561b0a8.md @@ -0,0 +1,194 @@ +--- +id: 62a8ac194679e60cb561b0a8 +title: Step 55 +challengeType: 0 +dashedName: step-55 +--- + +# --description-- + +Dai all'array vuoto di `button text` tre elementi stringa. Usa le tre stringhe passate alle proprietà `innerText` dei pulsanti nella funzione `goTown`. Ricorda che i valori negli array sono separati da una virgola. + +# --hints-- + +L'array di `button text` dovrebbe avere tre elementi. + +```js +assert.lengthOf(locations[0]["button text"], 3); +``` + +L'array di `button text` dovrebbe avere tre stringhe. + +```js +assert.isString(locations[0]["button text"][0]); +assert.isString(locations[0]["button text"][1]); +assert.isString(locations[0]["button text"][2]); +``` + +Il primo valore nell'array di `button text` dovrebbe essere "Go to store". + +```js +assert.equal(locations[0]["button text"][0], "Go to store"); +``` + +Il secondo valore nell'array di `button text` dovrebbe essere "Go to cave". + +```js +assert.equal(locations[0]["button text"][1], "Go to cave"); +``` + +Il terzo valore nell'array di `button text` dovrebbe essere "Fight dragon". + +```js +assert.equal(locations[0]["button text"][2], "Fight dragon"); +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + + + RPG - Dragon Repeller + + +
+
+ XP: 0 + Health: 100 + Gold: 50 +
+
+ + + +
+
+ Monster Name: + Health: +
+
+ Welcome to Dragon Repeller. You must defeat the dragon that is preventing people from leaving the town. You are in the town square. Where do you want to go? Use the buttons above. +
+
+ + + +``` + +```css +body { + background-color: darkblue; +} + +#text { + background-color: black; + color: white; + padding: 10px; +} + +#game { + max-width: 500px; + max-height: 400px; + background-color: lightgray; + color: white; + margin: 0 auto; + padding: 10px; +} + +#controls, #stats { + border: 1px solid black; + padding: 5px; + color: black; +} + +#monsterStats { + display: none; + border: 1px solid black; + padding: 5px; + color: white; + background-color: red; +} + +.stat { + padding-right: 10px; +} +``` + +```js +let xp = 0; +let health = 100; +let gold = 50; +let currentWeapon = 0; +let fighting; +let monsterHealth; +let inventory = ["stick"]; + +const button1 = document.querySelector('#button1'); +const button2 = document.querySelector("#button2"); +const button3 = document.querySelector("#button3"); +const text = document.querySelector("#text"); +const xpText = document.querySelector("#xpText"); +const healthText = document.querySelector("#healthText"); +const goldText = document.querySelector("#goldText"); +const monsterStats = document.querySelector("#monsterStats"); +const monsterName = document.querySelector("#monsterName"); +const monsterHealthText =document.querySelector("#monsterHealth"); +--fcc-editable-region-- +const locations = [ + { + name: "town square", + "button text": [] + } +]; +--fcc-editable-region-- + +// initialize buttons +button1.onclick = goStore; +button2.onclick = goCave; +button3.onclick = fightDragon; + +function update(location) { + +} + +function goTown() { + button1.innerText = "Go to store"; + button2.innerText = "Go to cave"; + button3.innerText = "Fight dragon"; + button1.onclick = goStore; + button2.onclick = goCave; + button3.onclick = fightDragon; + text.innerText = "You are in the town square. You see a sign that says \"Store\"."; +} + +function goStore() { + button1.innerText = "Buy 10 health (10 gold)"; + button2.innerText = "Buy weapon (30 gold)"; + button3.innerText = "Go to town square"; + button1.onclick = buyHealth; + button2.onclick = buyWeapon; + button3.onclick = goTown; + text.innerText = "You enter the store."; +} + +function goCave() { + console.log("Going to cave."); +} + +function fightDragon() { + console.log("Fighting dragon."); +} + +function buyHealth() { + +} + +function buyWeapon() { + +} +``` diff --git a/curriculum/challenges/italian/15-javascript-algorithms-and-data-structures-22/learn-basic-javascript-by-building-a-role-playing-game/62a8ad8e01d7cb0deae5ec66.md b/curriculum/challenges/italian/15-javascript-algorithms-and-data-structures-22/learn-basic-javascript-by-building-a-role-playing-game/62a8ad8e01d7cb0deae5ec66.md new file mode 100644 index 00000000000..8664685f2e8 --- /dev/null +++ b/curriculum/challenges/italian/15-javascript-algorithms-and-data-structures-22/learn-basic-javascript-by-building-a-role-playing-game/62a8ad8e01d7cb0deae5ec66.md @@ -0,0 +1,198 @@ +--- +id: 62a8ad8e01d7cb0deae5ec66 +title: Step 56 +challengeType: 0 +dashedName: step-56 +--- + +# --description-- + +Nell'oggetto crea un'altra proprietà chiamata `button functions`. Dai a questa proprietà un array contenente le tre funzioni assegnate alle proprietà `onclick` nella funzione `goTown`. Ricorda che queste funzioni sono variabili, non stringhe e non dovrebbero essere racchiuse tra virgolette. + +# --hints-- + +Il primo oggetto di `locations` dovrebbe avere una proprietà `button functions`. + +```js +assert.isDefined(locations[0]["button functions"]); +``` + +La proprietà `button functions` dovrebbe essere un array. + +```js +assert.isArray(locations[0]["button functions"]); +``` + +La proprietà `button functions` dovrebbe avere tre valori al suo interno. + +```js +assert.lengthOf(locations[0]["button functions"], 3); +``` + +Il primo valore dell'array `button functions` dovrebbe essere la funzione `goStore`. + +```js +assert.equal(locations[0]["button functions"][0], goStore); +``` + +Il secondo valore dell'array `button functions` dovrebbe essere la funzione `goCave`. + +```js +assert.equal(locations[0]["button functions"][1], goCave); +``` + +Il terzo valore dell'array `button functions` dovrebbe essere la funzione `fightDragon`. + +```js +assert.equal(locations[0]["button functions"][2], fightDragon); +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + + + RPG - Dragon Repeller + + +
+
+ XP: 0 + Health: 100 + Gold: 50 +
+
+ + + +
+
+ Monster Name: + Health: +
+
+ Welcome to Dragon Repeller. You must defeat the dragon that is preventing people from leaving the town. You are in the town square. Where do you want to go? Use the buttons above. +
+
+ + + +``` + +```css +body { + background-color: darkblue; +} + +#text { + background-color: black; + color: white; + padding: 10px; +} + +#game { + max-width: 500px; + max-height: 400px; + background-color: lightgray; + color: white; + margin: 0 auto; + padding: 10px; +} + +#controls, #stats { + border: 1px solid black; + padding: 5px; + color: black; +} + +#monsterStats { + display: none; + border: 1px solid black; + padding: 5px; + color: white; + background-color: red; +} + +.stat { + padding-right: 10px; +} +``` + +```js +let xp = 0; +let health = 100; +let gold = 50; +let currentWeapon = 0; +let fighting; +let monsterHealth; +let inventory = ["stick"]; + +const button1 = document.querySelector('#button1'); +const button2 = document.querySelector("#button2"); +const button3 = document.querySelector("#button3"); +const text = document.querySelector("#text"); +const xpText = document.querySelector("#xpText"); +const healthText = document.querySelector("#healthText"); +const goldText = document.querySelector("#goldText"); +const monsterStats = document.querySelector("#monsterStats"); +const monsterName = document.querySelector("#monsterName"); +const monsterHealthText =document.querySelector("#monsterHealth"); +--fcc-editable-region-- +const locations = [ + { + name: "town square", + "button text": ["Go to store", "Go to cave", "Fight dragon"] + } +]; +--fcc-editable-region-- + +// initialize buttons +button1.onclick = goStore; +button2.onclick = goCave; +button3.onclick = fightDragon; + +function update(location) { + +} + +function goTown() { + button1.innerText = "Go to store"; + button2.innerText = "Go to cave"; + button3.innerText = "Fight dragon"; + button1.onclick = goStore; + button2.onclick = goCave; + button3.onclick = fightDragon; + text.innerText = "You are in the town square. You see a sign that says \"Store\"."; +} + +function goStore() { + button1.innerText = "Buy 10 health (10 gold)"; + button2.innerText = "Buy weapon (30 gold)"; + button3.innerText = "Go to town square"; + button1.onclick = buyHealth; + button2.onclick = buyWeapon; + button3.onclick = goTown; + text.innerText = "You enter the store."; +} + +function goCave() { + console.log("Going to cave."); +} + +function fightDragon() { + console.log("Fighting dragon."); +} + +function buyHealth() { + +} + +function buyWeapon() { + +} +``` diff --git a/curriculum/challenges/italian/15-javascript-algorithms-and-data-structures-22/learn-basic-javascript-by-building-a-role-playing-game/62a8ae85fcaedc0fddc7ca4f.md b/curriculum/challenges/italian/15-javascript-algorithms-and-data-structures-22/learn-basic-javascript-by-building-a-role-playing-game/62a8ae85fcaedc0fddc7ca4f.md new file mode 100644 index 00000000000..a454f9b5094 --- /dev/null +++ b/curriculum/challenges/italian/15-javascript-algorithms-and-data-structures-22/learn-basic-javascript-by-building-a-role-playing-game/62a8ae85fcaedc0fddc7ca4f.md @@ -0,0 +1,235 @@ +--- +id: 62a8ae85fcaedc0fddc7ca4f +title: Step 58 +challengeType: 0 +dashedName: step-58 +--- + +# --description-- + +Aggiungi un secondo oggetto all'array `locations` (ricorda di separarli con una virgola). Seguendo il modello che hai usato nel primo oggetto, crea le stesse proprietà ma usa i valori dalla funzione `goStore`. Imposta la proprietà `name` su `store`. + +# --hints-- + +L'array `locations` dovrebbe contenere due valori. + +```js +assert.lengthOf(locations, 2); +``` + +Entrambi i valori di `locations` dovrebbero essere oggetti. + + +```js +assert.isObject(locations[0]); +assert.isObject(locations[1]); +``` + +Il secondo oggetto di `locations` dovrebbe avere una proprietà `name` con il valore `store`. + +```js +assert.equal(locations[1].name, "store"); +``` + +Il secondo oggetto di `locations` dovrebbe avere una proprietà `button text` con un array come valore. + +```js +assert.isArray(locations[1]["button text"]); +``` + +I valori della proprietà `button text` dovrebbero essere le stringhe `Buy 10 health (10 gold)`, `Buy weapon (30 gold)` e `Go to town square`. + +```js +assert.equal(locations[1]["button text"][0], "Buy 10 health (10 gold)"); +assert.equal(locations[1]["button text"][1], "Buy weapon (30 gold)"); +assert.equal(locations[1]["button text"][2], "Go to town square"); +``` + +Il secondo oggetto di `locations` dovrebbe avere una proprietà `button functions` con un array come valore. + +```js +assert.isArray(locations[1]["button functions"]); +``` + +La proprietà `button functions` dovrebbe avere i valori di funzione `buyHealth`, `buyWeapon` e `goTown`. + +```js +assert.equal(locations[1]["button functions"][0], buyHealth); +assert.equal(locations[1]["button functions"][1], buyWeapon); +assert.equal(locations[1]["button functions"][2], goTown); +``` + +Il secondo oggetto di `locations` dovrebbe avere una proprietà `text` con una stringa come valore. + +```js +assert.isString(locations[1].text); +``` + +Il secondo oggetto di `locations` dovrebbe avere una proprietà `text` con il valore `You enter the store.`. + +```js +assert.equal(locations[1].text, "You enter the store."); +``` + +Non dovresti modificare il primo oggetto di `locations`. + +```js +assert.deepEqual(locations[0], { + name: "town square", + "button text": ["Go to store", "Go to cave", "Fight dragon"], + "button functions": [goStore, goCave, fightDragon], + text: "You are in the town square. You see a sign that says \"Store\"." +}); +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + + + RPG - Dragon Repeller + + +
+
+ XP: 0 + Health: 100 + Gold: 50 +
+
+ + + +
+
+ Monster Name: + Health: +
+
+ Welcome to Dragon Repeller. You must defeat the dragon that is preventing people from leaving the town. You are in the town square. Where do you want to go? Use the buttons above. +
+
+ + + +``` + +```css +body { + background-color: darkblue; +} + +#text { + background-color: black; + color: white; + padding: 10px; +} + +#game { + max-width: 500px; + max-height: 400px; + background-color: lightgray; + color: white; + margin: 0 auto; + padding: 10px; +} + +#controls, #stats { + border: 1px solid black; + padding: 5px; + color: black; +} + +#monsterStats { + display: none; + border: 1px solid black; + padding: 5px; + color: white; + background-color: red; +} + +.stat { + padding-right: 10px; +} +``` + +```js +let xp = 0; +let health = 100; +let gold = 50; +let currentWeapon = 0; +let fighting; +let monsterHealth; +let inventory = ["stick"]; + +const button1 = document.querySelector('#button1'); +const button2 = document.querySelector("#button2"); +const button3 = document.querySelector("#button3"); +const text = document.querySelector("#text"); +const xpText = document.querySelector("#xpText"); +const healthText = document.querySelector("#healthText"); +const goldText = document.querySelector("#goldText"); +const monsterStats = document.querySelector("#monsterStats"); +const monsterName = document.querySelector("#monsterName"); +const monsterHealthText =document.querySelector("#monsterHealth"); +--fcc-editable-region-- +const locations = [ + { + name: "town square", + "button text": ["Go to store", "Go to cave", "Fight dragon"], + "button functions": [goStore, goCave, fightDragon], + text: "You are in the town square. You see a sign that says \"Store\"." + } +]; +--fcc-editable-region-- + +// initialize buttons +button1.onclick = goStore; +button2.onclick = goCave; +button3.onclick = fightDragon; + +function update(location) { + +} + +function goTown() { + button1.innerText = "Go to store"; + button2.innerText = "Go to cave"; + button3.innerText = "Fight dragon"; + button1.onclick = goStore; + button2.onclick = goCave; + button3.onclick = fightDragon; + text.innerText = "You are in the town square. You see a sign that says \"Store\"."; +} + +function goStore() { + button1.innerText = "Buy 10 health (10 gold)"; + button2.innerText = "Buy weapon (30 gold)"; + button3.innerText = "Go to town square"; + button1.onclick = buyHealth; + button2.onclick = buyWeapon; + button3.onclick = goTown; + text.innerText = "You enter the store."; +} + +function goCave() { + console.log("Going to cave."); +} + +function fightDragon() { + console.log("Fighting dragon."); +} + +function buyHealth() { + +} + +function buyWeapon() { + +} +``` diff --git a/curriculum/challenges/italian/15-javascript-algorithms-and-data-structures-22/learn-basic-javascript-by-building-a-role-playing-game/62a8b1762b7775124622e1a3.md b/curriculum/challenges/italian/15-javascript-algorithms-and-data-structures-22/learn-basic-javascript-by-building-a-role-playing-game/62a8b1762b7775124622e1a3.md new file mode 100644 index 00000000000..e65cfa2cb73 --- /dev/null +++ b/curriculum/challenges/italian/15-javascript-algorithms-and-data-structures-22/learn-basic-javascript-by-building-a-role-playing-game/62a8b1762b7775124622e1a3.md @@ -0,0 +1,176 @@ +--- +id: 62a8b1762b7775124622e1a3 +title: Step 60 +challengeType: 0 +dashedName: step-60 +--- + +# --description-- + +Invece di assegnare le proprietà `innerText` e `onclick` a specifiche stringhe e funzioni, la funzione `update` userà i dati dalla `location` che le viene passata. Prima di tutto, occorre passare i dati. Nella funzione `goTown`, chiama la funzione `update`. Ecco un esempio della chiamata della funzione `myFunction`: `myFunction();`. + +# --hints-- + +Dovresti chiamare la funzione `update` nella funzione `goTown`. + +```js +assert.match(goTown.toString(), /update\(\)/); +``` + +Non dimenticare il punto e virgola alla fine. + +```js +assert.match(goTown.toString(), /update\(\);/); +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + + + RPG - Dragon Repeller + + +
+
+ XP: 0 + Health: 100 + Gold: 50 +
+
+ + + +
+
+ Monster Name: + Health: +
+
+ Welcome to Dragon Repeller. You must defeat the dragon that is preventing people from leaving the town. You are in the town square. Where do you want to go? Use the buttons above. +
+
+ + + +``` + +```css +body { + background-color: darkblue; +} + +#text { + background-color: black; + color: white; + padding: 10px; +} + +#game { + max-width: 500px; + max-height: 400px; + background-color: lightgray; + color: white; + margin: 0 auto; + padding: 10px; +} + +#controls, #stats { + border: 1px solid black; + padding: 5px; + color: black; +} + +#monsterStats { + display: none; + border: 1px solid black; + padding: 5px; + color: white; + background-color: red; +} + +.stat { + padding-right: 10px; +} +``` + +```js +let xp = 0; +let health = 100; +let gold = 50; +let currentWeapon = 0; +let fighting; +let monsterHealth; +let inventory = ["stick"]; + +const button1 = document.querySelector('#button1'); +const button2 = document.querySelector("#button2"); +const button3 = document.querySelector("#button3"); +const text = document.querySelector("#text"); +const xpText = document.querySelector("#xpText"); +const healthText = document.querySelector("#healthText"); +const goldText = document.querySelector("#goldText"); +const monsterStats = document.querySelector("#monsterStats"); +const monsterName = document.querySelector("#monsterName"); +const monsterHealthText =document.querySelector("#monsterHealth"); +const locations = [ + { + name: "town square", + "button text": ["Go to store", "Go to cave", "Fight dragon"], + "button functions": [goStore, goCave, fightDragon], + text: "You are in the town square. You see a sign that says \"Store\"." + }, + { + name: "store", + "button text": ["Buy 10 health (10 gold)", "Buy weapon (30 gold)", "Go to town square"], + "button functions": [buyHealth, buyWeapon, goTown], + text: "You enter the store." + } +]; + +// initialize buttons +button1.onclick = goStore; +button2.onclick = goCave; +button3.onclick = fightDragon; + +function update(location) { + button1.innerText = "Go to store"; + button2.innerText = "Go to cave"; + button3.innerText = "Fight dragon"; + button1.onclick = goStore; + button2.onclick = goCave; + button3.onclick = fightDragon; + text.innerText = "You are in the town square. You see a sign that says \"Store\"."; +} + +--fcc-editable-region-- +function goTown() { + +} +--fcc-editable-region-- + +function goStore() { + +} + +function goCave() { + console.log("Going to cave."); +} + +function fightDragon() { + console.log("Fighting dragon."); +} + +function buyHealth() { + +} + +function buyWeapon() { + +} +``` diff --git a/curriculum/challenges/italian/15-javascript-algorithms-and-data-structures-22/learn-basic-javascript-by-building-a-role-playing-game/62a8b3cc436db8139cc5fc09.md b/curriculum/challenges/italian/15-javascript-algorithms-and-data-structures-22/learn-basic-javascript-by-building-a-role-playing-game/62a8b3cc436db8139cc5fc09.md new file mode 100644 index 00000000000..a15d57a5968 --- /dev/null +++ b/curriculum/challenges/italian/15-javascript-algorithms-and-data-structures-22/learn-basic-javascript-by-building-a-role-playing-game/62a8b3cc436db8139cc5fc09.md @@ -0,0 +1,170 @@ +--- +id: 62a8b3cc436db8139cc5fc09 +title: Step 61 +challengeType: 0 +dashedName: step-61 +--- + +# --description-- + +Ora devi passare l'argomento `location` nella chiamata `update`. Puoi passare degli argomenti includendoli tra le parentesi della chiamata della funzione. Ad esempio, puoi chiamare `myFunction` con l'argomento `arg` in questo modo: `myFunction(arg)`. Passa l'array `locations` nella chiamata `update`. + +# --hints-- + +Dovresti passare l'array `locations` nella chiamata `update`. + +```js +assert.match(goTown.toString(), /update\(locations\);/); +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + + + RPG - Dragon Repeller + + +
+
+ XP: 0 + Health: 100 + Gold: 50 +
+
+ + + +
+
+ Monster Name: + Health: +
+
+ Welcome to Dragon Repeller. You must defeat the dragon that is preventing people from leaving the town. You are in the town square. Where do you want to go? Use the buttons above. +
+
+ + + +``` + +```css +body { + background-color: darkblue; +} + +#text { + background-color: black; + color: white; + padding: 10px; +} + +#game { + max-width: 500px; + max-height: 400px; + background-color: lightgray; + color: white; + margin: 0 auto; + padding: 10px; +} + +#controls, #stats { + border: 1px solid black; + padding: 5px; + color: black; +} + +#monsterStats { + display: none; + border: 1px solid black; + padding: 5px; + color: white; + background-color: red; +} + +.stat { + padding-right: 10px; +} +``` + +```js +let xp = 0; +let health = 100; +let gold = 50; +let currentWeapon = 0; +let fighting; +let monsterHealth; +let inventory = ["stick"]; + +const button1 = document.querySelector('#button1'); +const button2 = document.querySelector("#button2"); +const button3 = document.querySelector("#button3"); +const text = document.querySelector("#text"); +const xpText = document.querySelector("#xpText"); +const healthText = document.querySelector("#healthText"); +const goldText = document.querySelector("#goldText"); +const monsterStats = document.querySelector("#monsterStats"); +const monsterName = document.querySelector("#monsterName"); +const monsterHealthText =document.querySelector("#monsterHealth"); +const locations = [ + { + name: "town square", + "button text": ["Go to store", "Go to cave", "Fight dragon"], + "button functions": [goStore, goCave, fightDragon], + text: "You are in the town square. You see a sign that says \"Store\"." + }, + { + name: "store", + "button text": ["Buy 10 health (10 gold)", "Buy weapon (30 gold)", "Go to town square"], + "button functions": [buyHealth, buyWeapon, goTown], + text: "You enter the store." + } +]; + +// initialize buttons +button1.onclick = goStore; +button2.onclick = goCave; +button3.onclick = fightDragon; + +function update(location) { + button1.innerText = "Go to store"; + button2.innerText = "Go to cave"; + button3.innerText = "Fight dragon"; + button1.onclick = goStore; + button2.onclick = goCave; + button3.onclick = fightDragon; + text.innerText = "You are in the town square. You see a sign that says \"Store\"."; +} + +--fcc-editable-region-- +function goTown() { + update(); +} +--fcc-editable-region-- + +function goStore() { + +} + +function goCave() { + console.log("Going to cave."); +} + +function fightDragon() { + console.log("Fighting dragon."); +} + +function buyHealth() { + +} + +function buyWeapon() { + +} +``` diff --git a/curriculum/challenges/italian/15-javascript-algorithms-and-data-structures-22/learn-basic-javascript-by-building-a-role-playing-game/62a8b6536156c51500739b41.md b/curriculum/challenges/italian/15-javascript-algorithms-and-data-structures-22/learn-basic-javascript-by-building-a-role-playing-game/62a8b6536156c51500739b41.md new file mode 100644 index 00000000000..9b6d3a489f9 --- /dev/null +++ b/curriculum/challenges/italian/15-javascript-algorithms-and-data-structures-22/learn-basic-javascript-by-building-a-role-playing-game/62a8b6536156c51500739b41.md @@ -0,0 +1,190 @@ +--- +id: 62a8b6536156c51500739b41 +title: Step 62 +challengeType: 0 +dashedName: step-62 +--- + +# --description-- + +L'array `locations` contiene due location: town square e store. Attualmente stai passando l'intero array nella funzione update. Passa soltanto il primo elemento dell'array `locations` aggiungendo `[0]` alla fine della variabile. Ad esempio: `myFunction(arg[0]);`. + +Questa notazione si chiama notazione a parentesi. I valori in un array sono accessibili tramite il loro indice. Gli indici sono valori numerici e partono da 0 - questo sistema è detto a base zero. `arg[0]` è il primo elemento nell'array `arg`. + +# --hints-- + +Dovresti usare la notazione a parentesi su `locations`. + +```js +assert.match(code, /locations\[/); +``` + +Dovresti accedere al primo oggetto nell'array `locations`. Ricorda che gli array sono a base zero. + +```js +assert.match(code, /locations\[0\]/); +``` + +Dovresti passare il primo oggetto nell'array `locations` alla funzione `update`. + +```js +assert.match(code, /update\(locations\[0\]\);/); +``` + +Questa chiamata dovrebbe essere ancora nella funzione `goTown()`. + +```js +assert.match(goTown.toString(), /update\(locations\[0\]\);/); +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + + + RPG - Dragon Repeller + + +
+
+ XP: 0 + Health: 100 + Gold: 50 +
+
+ + + +
+
+ Monster Name: + Health: +
+
+ Welcome to Dragon Repeller. You must defeat the dragon that is preventing people from leaving the town. You are in the town square. Where do you want to go? Use the buttons above. +
+
+ + + +``` + +```css +body { + background-color: darkblue; +} + +#text { + background-color: black; + color: white; + padding: 10px; +} + +#game { + max-width: 500px; + max-height: 400px; + background-color: lightgray; + color: white; + margin: 0 auto; + padding: 10px; +} + +#controls, #stats { + border: 1px solid black; + padding: 5px; + color: black; +} + +#monsterStats { + display: none; + border: 1px solid black; + padding: 5px; + color: white; + background-color: red; +} + +.stat { + padding-right: 10px; +} +``` + +```js +let xp = 0; +let health = 100; +let gold = 50; +let currentWeapon = 0; +let fighting; +let monsterHealth; +let inventory = ["stick"]; + +const button1 = document.querySelector('#button1'); +const button2 = document.querySelector("#button2"); +const button3 = document.querySelector("#button3"); +const text = document.querySelector("#text"); +const xpText = document.querySelector("#xpText"); +const healthText = document.querySelector("#healthText"); +const goldText = document.querySelector("#goldText"); +const monsterStats = document.querySelector("#monsterStats"); +const monsterName = document.querySelector("#monsterName"); +const monsterHealthText =document.querySelector("#monsterHealth"); +const locations = [ + { + name: "town square", + "button text": ["Go to store", "Go to cave", "Fight dragon"], + "button functions": [goStore, goCave, fightDragon], + text: "You are in the town square. You see a sign that says \"Store\"." + }, + { + name: "store", + "button text": ["Buy 10 health (10 gold)", "Buy weapon (30 gold)", "Go to town square"], + "button functions": [buyHealth, buyWeapon, goTown], + text: "You enter the store." + } +]; + +// initialize buttons +button1.onclick = goStore; +button2.onclick = goCave; +button3.onclick = fightDragon; + +function update(location) { + button1.innerText = "Go to store"; + button2.innerText = "Go to cave"; + button3.innerText = "Fight dragon"; + button1.onclick = goStore; + button2.onclick = goCave; + button3.onclick = fightDragon; + text.innerText = "You are in the town square. You see a sign that says \"Store\"."; +} + +--fcc-editable-region-- +function goTown() { + update(locations); +} +--fcc-editable-region-- + +function goStore() { + +} + +function goCave() { + console.log("Going to cave."); +} + +function fightDragon() { + console.log("Fighting dragon."); +} + +function buyHealth() { + +} + +function buyWeapon() { + +} +``` diff --git a/curriculum/challenges/italian/15-javascript-algorithms-and-data-structures-22/learn-basic-javascript-by-building-a-role-playing-game/62a8b711ab7a12161c7d9b67.md b/curriculum/challenges/italian/15-javascript-algorithms-and-data-structures-22/learn-basic-javascript-by-building-a-role-playing-game/62a8b711ab7a12161c7d9b67.md new file mode 100644 index 00000000000..9a7381f3fa0 --- /dev/null +++ b/curriculum/challenges/italian/15-javascript-algorithms-and-data-structures-22/learn-basic-javascript-by-building-a-role-playing-game/62a8b711ab7a12161c7d9b67.md @@ -0,0 +1,176 @@ +--- +id: 62a8b711ab7a12161c7d9b67 +title: Step 63 +challengeType: 0 +dashedName: step-63 +--- + +# --description-- + +Adesso la funzione `update` deve utilizzare gli argomenti che le vengono passati. All'interno della funzione `update`, cambia l'assegnazione di `button1.innerText` in `location["button text"]`. Questo codice fa uso della notazione a parentesi per ottenere la proprietà `button text` dell'oggetto `location` passato alla funzione. + +# --hints-- + +La funzione `update` dovrebbe usare la notazione a parentesi per ottenere la proprietà `button text` dell'oggetto `location` passato alla funzione. + +```js +assert.match(update.toString(), /location[('|")button text\1]/); +``` + +Dovresti assegnare il valore della proprietà `button text` dell'oggetto `location` alla proprietà `innerText` di `button1`. + +```js +assert.match(update.toString(), /button1\.innerText\s*=\s*location\[('|")button text\1\]/); +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + + + RPG - Dragon Repeller + + +
+
+ XP: 0 + Health: 100 + Gold: 50 +
+
+ + + +
+
+ Monster Name: + Health: +
+
+ Welcome to Dragon Repeller. You must defeat the dragon that is preventing people from leaving the town. You are in the town square. Where do you want to go? Use the buttons above. +
+
+ + + +``` + +```css +body { + background-color: darkblue; +} + +#text { + background-color: black; + color: white; + padding: 10px; +} + +#game { + max-width: 500px; + max-height: 400px; + background-color: lightgray; + color: white; + margin: 0 auto; + padding: 10px; +} + +#controls, #stats { + border: 1px solid black; + padding: 5px; + color: black; +} + +#monsterStats { + display: none; + border: 1px solid black; + padding: 5px; + color: white; + background-color: red; +} + +.stat { + padding-right: 10px; +} +``` + +```js +let xp = 0; +let health = 100; +let gold = 50; +let currentWeapon = 0; +let fighting; +let monsterHealth; +let inventory = ["stick"]; + +const button1 = document.querySelector('#button1'); +const button2 = document.querySelector("#button2"); +const button3 = document.querySelector("#button3"); +const text = document.querySelector("#text"); +const xpText = document.querySelector("#xpText"); +const healthText = document.querySelector("#healthText"); +const goldText = document.querySelector("#goldText"); +const monsterStats = document.querySelector("#monsterStats"); +const monsterName = document.querySelector("#monsterName"); +const monsterHealthText =document.querySelector("#monsterHealth"); +const locations = [ + { + name: "town square", + "button text": ["Go to store", "Go to cave", "Fight dragon"], + "button functions": [goStore, goCave, fightDragon], + text: "You are in the town square. You see a sign that says \"Store\"." + }, + { + name: "store", + "button text": ["Buy 10 health (10 gold)", "Buy weapon (30 gold)", "Go to town square"], + "button functions": [buyHealth, buyWeapon, goTown], + text: "You enter the store." + } +]; + +// initialize buttons +button1.onclick = goStore; +button2.onclick = goCave; +button3.onclick = fightDragon; + +--fcc-editable-region-- +function update(location) { + button1.innerText = "Go to store"; + button2.innerText = "Go to cave"; + button3.innerText = "Fight dragon"; + button1.onclick = goStore; + button2.onclick = goCave; + button3.onclick = fightDragon; + text.innerText = "You are in the town square. You see a sign that says \"Store\"."; +} +--fcc-editable-region-- + +function goTown() { + update(locations[0]); +} + +function goStore() { + +} + +function goCave() { + console.log("Going to cave."); +} + +function fightDragon() { + console.log("Fighting dragon."); +} + +function buyHealth() { + +} + +function buyWeapon() { + +} +``` diff --git a/curriculum/challenges/italian/15-javascript-algorithms-and-data-structures-22/learn-basic-javascript-by-building-a-role-playing-game/62a8b9770050d217d2247801.md b/curriculum/challenges/italian/15-javascript-algorithms-and-data-structures-22/learn-basic-javascript-by-building-a-role-playing-game/62a8b9770050d217d2247801.md new file mode 100644 index 00000000000..e7cb9c014aa --- /dev/null +++ b/curriculum/challenges/italian/15-javascript-algorithms-and-data-structures-22/learn-basic-javascript-by-building-a-role-playing-game/62a8b9770050d217d2247801.md @@ -0,0 +1,176 @@ +--- +id: 62a8b9770050d217d2247801 +title: Step 64 +challengeType: 0 +dashedName: step-64 +--- + +# --description-- + +`location["button text"]` è un array con tre elementi. Cambia l'assegnazione di `button1.innerText` in modo che corrisponda al primo elemento di questo array. + +# --hints-- + +Dovresti accedere al primo elemento della proprietà `button text` dell'argomento `location`. + +```js +assert.match(update.toString(), /location\[('|")button text\1\]\[0\]/); +``` + +Dovresti impostare la proprietà `button1.innerText` in modo che sia il primo elemento della proprietà `button text` dell'argomento `location`. + +```js +assert.match(update.toString(), /button1\.innerText\s*=\s*location\[('|")button text\1\]\[0\]/); +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + + + RPG - Dragon Repeller + + +
+
+ XP: 0 + Health: 100 + Gold: 50 +
+
+ + + +
+
+ Monster Name: + Health: +
+
+ Welcome to Dragon Repeller. You must defeat the dragon that is preventing people from leaving the town. You are in the town square. Where do you want to go? Use the buttons above. +
+
+ + + +``` + +```css +body { + background-color: darkblue; +} + +#text { + background-color: black; + color: white; + padding: 10px; +} + +#game { + max-width: 500px; + max-height: 400px; + background-color: lightgray; + color: white; + margin: 0 auto; + padding: 10px; +} + +#controls, #stats { + border: 1px solid black; + padding: 5px; + color: black; +} + +#monsterStats { + display: none; + border: 1px solid black; + padding: 5px; + color: white; + background-color: red; +} + +.stat { + padding-right: 10px; +} +``` + +```js +let xp = 0; +let health = 100; +let gold = 50; +let currentWeapon = 0; +let fighting; +let monsterHealth; +let inventory = ["stick"]; + +const button1 = document.querySelector('#button1'); +const button2 = document.querySelector("#button2"); +const button3 = document.querySelector("#button3"); +const text = document.querySelector("#text"); +const xpText = document.querySelector("#xpText"); +const healthText = document.querySelector("#healthText"); +const goldText = document.querySelector("#goldText"); +const monsterStats = document.querySelector("#monsterStats"); +const monsterName = document.querySelector("#monsterName"); +const monsterHealthText =document.querySelector("#monsterHealth"); +const locations = [ + { + name: "town square", + "button text": ["Go to store", "Go to cave", "Fight dragon"], + "button functions": [goStore, goCave, fightDragon], + text: "You are in the town square. You see a sign that says \"Store\"." + }, + { + name: "store", + "button text": ["Buy 10 health (10 gold)", "Buy weapon (30 gold)", "Go to town square"], + "button functions": [buyHealth, buyWeapon, goTown], + text: "You enter the store." + } +]; + +// initialize buttons +button1.onclick = goStore; +button2.onclick = goCave; +button3.onclick = fightDragon; + +--fcc-editable-region-- +function update(location) { + button1.innerText = location["button text"]; + button2.innerText = "Go to cave"; + button3.innerText = "Fight dragon"; + button1.onclick = goStore; + button2.onclick = goCave; + button3.onclick = fightDragon; + text.innerText = "You are in the town square. You see a sign that says \"Store\"."; +} +--fcc-editable-region-- + +function goTown() { + update(locations[0]); +} + +function goStore() { + +} + +function goCave() { + console.log("Going to cave."); +} + +function fightDragon() { + console.log("Fighting dragon."); +} + +function buyHealth() { + +} + +function buyWeapon() { + +} +``` diff --git a/curriculum/challenges/italian/15-javascript-algorithms-and-data-structures-22/learn-basic-javascript-by-building-a-role-playing-game/62a8c0c8313e891a15ec23e7.md b/curriculum/challenges/italian/15-javascript-algorithms-and-data-structures-22/learn-basic-javascript-by-building-a-role-playing-game/62a8c0c8313e891a15ec23e7.md new file mode 100644 index 00000000000..3346775ef69 --- /dev/null +++ b/curriculum/challenges/italian/15-javascript-algorithms-and-data-structures-22/learn-basic-javascript-by-building-a-role-playing-game/62a8c0c8313e891a15ec23e7.md @@ -0,0 +1,188 @@ +--- +id: 62a8c0c8313e891a15ec23e7 +title: Step 65 +challengeType: 0 +dashedName: step-65 +--- + +# --description-- + +Adesso aggiorna `button2.innerText` e `button3.innerText` in modo che vengano loro assegnate rispettivamente il secondo e il terzo valore dell'array `button text`. + +# --hints-- + +Dovresti accedere al secondo elemento della proprietà `button text` dell'argomento `location`. + +```js +assert.match(update.toString(), /location\[('|")button text\1\]\[1\]/); +``` + +Dovresti impostare la proprietà `button2.innerText` in modo che sia il secondo elemento della proprietà `button text` dell'argomento `location`. + +```js +assert.match(update.toString(), /button2\.innerText\s*=\s*location\[('|")button text\1\]\[1\]/); +``` + +Dovresti accedere al terzo elemento della proprietà `button text` dell'argomento `location`. + +```js +assert.match(update.toString(), /location\[('|")button text\1\]\[2\]/); +``` + +Dovresti impostare la proprietà `button3.innerText` in modo che sia il terzo elemento della proprietà `button text` dell'argomento `location`. + +```js +assert.match(update.toString(), /button3\.innerText\s*=\s*location\[('|")button text\1\]\[2\]/); +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + + + RPG - Dragon Repeller + + +
+
+ XP: 0 + Health: 100 + Gold: 50 +
+
+ + + +
+
+ Monster Name: + Health: +
+
+ Welcome to Dragon Repeller. You must defeat the dragon that is preventing people from leaving the town. You are in the town square. Where do you want to go? Use the buttons above. +
+
+ + + +``` + +```css +body { + background-color: darkblue; +} + +#text { + background-color: black; + color: white; + padding: 10px; +} + +#game { + max-width: 500px; + max-height: 400px; + background-color: lightgray; + color: white; + margin: 0 auto; + padding: 10px; +} + +#controls, #stats { + border: 1px solid black; + padding: 5px; + color: black; +} + +#monsterStats { + display: none; + border: 1px solid black; + padding: 5px; + color: white; + background-color: red; +} + +.stat { + padding-right: 10px; +} +``` + +```js +let xp = 0; +let health = 100; +let gold = 50; +let currentWeapon = 0; +let fighting; +let monsterHealth; +let inventory = ["stick"]; + +const button1 = document.querySelector('#button1'); +const button2 = document.querySelector("#button2"); +const button3 = document.querySelector("#button3"); +const text = document.querySelector("#text"); +const xpText = document.querySelector("#xpText"); +const healthText = document.querySelector("#healthText"); +const goldText = document.querySelector("#goldText"); +const monsterStats = document.querySelector("#monsterStats"); +const monsterName = document.querySelector("#monsterName"); +const monsterHealthText =document.querySelector("#monsterHealth"); +const locations = [ + { + name: "town square", + "button text": ["Go to store", "Go to cave", "Fight dragon"], + "button functions": [goStore, goCave, fightDragon], + text: "You are in the town square. You see a sign that says \"Store\"." + }, + { + name: "store", + "button text": ["Buy 10 health (10 gold)", "Buy weapon (30 gold)", "Go to town square"], + "button functions": [buyHealth, buyWeapon, goTown], + text: "You enter the store." + } +]; + +// initialize buttons +button1.onclick = goStore; +button2.onclick = goCave; +button3.onclick = fightDragon; + +--fcc-editable-region-- +function update(location) { + button1.innerText = location["button text"][0]; + button2.innerText = "Go to cave"; + button3.innerText = "Fight dragon"; + button1.onclick = goStore; + button2.onclick = goCave; + button3.onclick = fightDragon; + text.innerText = "You are in the town square. You see a sign that says \"Store\"."; +} +--fcc-editable-region-- + +function goTown() { + update(locations[0]); +} + +function goStore() { + +} + +function goCave() { + console.log("Going to cave."); +} + +function fightDragon() { + console.log("Fighting dragon."); +} + +function buyHealth() { + +} + +function buyWeapon() { + +} +``` diff --git a/curriculum/challenges/japanese/05-back-end-development-and-apis/back-end-development-and-apis-projects/exercise-tracker.md b/curriculum/challenges/japanese/05-back-end-development-and-apis/back-end-development-and-apis-projects/exercise-tracker.md index c83aa6b8f51..193b583c104 100644 --- a/curriculum/challenges/japanese/05-back-end-development-and-apis/back-end-development-and-apis-projects/exercise-tracker.md +++ b/curriculum/challenges/japanese/05-back-end-development-and-apis/back-end-development-and-apis-projects/exercise-tracker.md @@ -164,7 +164,7 @@ async (getUserInput) => { const res = await fetch(url + '/api/users', { method: 'POST', headers: { 'Content-Type': 'application/x-www-form-urlencoded' }, - body: `username=fcc_test_${Date.now()}`.substingr(0, 29) + body: `username=fcc_test_${Date.now()}`.substring(0, 29) }); if (res.ok) { const { _id, username } = await res.json(); diff --git a/curriculum/challenges/japanese/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/61329d52e5010e08d9b9d66b.md b/curriculum/challenges/japanese/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/61329d52e5010e08d9b9d66b.md index 6467f5b5109..05319f16693 100644 --- a/curriculum/challenges/japanese/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/61329d52e5010e08d9b9d66b.md +++ b/curriculum/challenges/japanese/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/61329d52e5010e08d9b9d66b.md @@ -9,7 +9,7 @@ dashedName: step-4 アクセシビリティと SEO に重要な `meta` 要素としてもう一つ、`description` 定義があります。 `content` 属性の値は、検索エンジンがページの説明を表示するために使用します。 -`meta` 要素を追加して、`name` 属性を `description` に設定し、`content` 属性には有益な説明を追加しましょう。 +`meta` 要素を追加して、`name` 属性を `description` に設定し、`content` 属性には意味のある説明を追加しましょう。 # --hints-- diff --git a/curriculum/challenges/japanese/14-responsive-web-design-22/learn-css-variables-by-building-a-city-skyline/5d822fd413a79914d39e98f9.md b/curriculum/challenges/japanese/14-responsive-web-design-22/learn-css-variables-by-building-a-city-skyline/5d822fd413a79914d39e98f9.md new file mode 100644 index 00000000000..83f9adac665 --- /dev/null +++ b/curriculum/challenges/japanese/14-responsive-web-design-22/learn-css-variables-by-building-a-city-skyline/5d822fd413a79914d39e98f9.md @@ -0,0 +1,207 @@ +--- +id: 5d822fd413a79914d39e98f9 +title: ステップ 49 +challengeType: 0 +dashedName: step-49 +--- + +# --description-- + +`.bb2b` の `width` と `height` を `100%` に設定して、ビルのコンテナー全体に広がるようにしてください。 てっぺんの部分は後ほど追加します。 + +# --hints-- + +`.bb2b` の `width` を `100%` に設定する必要があります。 + +```js +assert.equal(new __helpers.CSSHelp(document).getStyle('.bb2b')?.width, '100%'); +``` + +`.bb2b` の `height` を `100%` に設定する必要があります。 + +```js +assert.equal(new __helpers.CSSHelp(document).getStyle('.bb2b')?.height, '100%'); +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + + City Skyline + + + + +
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ +
+
+
+
+
+
+
+
+
+
+
+
+
+ + +``` + +```css +:root { + --building-color1: #aa80ff; + --building-color2: #66cc99; + --building-color3: #cc6699; + --building-color4: #538cc6; + --window-color1: black; +} + +* { + border: 1px solid black; + box-sizing: border-box; +} + +body { + height: 100vh; + margin: 0; + overflow: hidden; +} + +.background-buildings, .foreground-buildings { + width: 100%; + height: 100%; + display: flex; + align-items: flex-end; + justify-content: space-evenly; + position: absolute; + top: 0; +} + +/* BACKGROUND BUILDINGS - "bb" stands for "background building" */ +.bb1 { + width: 10%; + height: 70%; + display: flex; + flex-direction: column; + align-items: center; +} + +.bb1a { + width: 70%; +} + +.bb1b { + width: 80%; +} + +.bb1c { + width: 90%; +} + +.bb1d { + width: 100%; + height: 70%; + background: linear-gradient( + var(--building-color1) 50%, + var(--window-color1) + ); +} + +.bb1-window { + height: 10%; + background: linear-gradient( + var(--building-color1), + var(--window-color1) + ); +} + +.bb2 { + width: 10%; + height: 50%; + background-color: var(--building-color2); +} +--fcc-editable-region-- + +--fcc-editable-region-- +.bb3 { + width: 10%; + height: 55%; + background-color: var(--building-color3); +} + +.bb4 { + width: 11%; + height: 58%; + background-color: var(--building-color4); +} + +/* FOREGROUND BUILDINGS - "fb" stands for "foreground building" */ +.fb1 { + width: 10%; + height: 60%; + background-color: var(--building-color4); +} + +.fb2 { + width: 10%; + height: 40%; + background-color: var(--building-color3); +} + +.fb3 { + width: 10%; + height: 35%; + background-color: var(--building-color1); +} + +.fb4 { + width: 8%; + height: 45%; + background-color: var(--building-color1); + position: relative; + left: 10%; +} + +.fb5 { + width: 10%; + height: 33%; + background-color: var(--building-color2); + position: relative; + right: 10%; +} + +.fb6 { + width: 9%; + height: 38%; + background-color: var(--building-color3); +} + +``` + diff --git a/curriculum/challenges/japanese/14-responsive-web-design-22/learn-css-variables-by-building-a-city-skyline/5d822fd413a79914d39e98fd.md b/curriculum/challenges/japanese/14-responsive-web-design-22/learn-css-variables-by-building-a-city-skyline/5d822fd413a79914d39e98fd.md new file mode 100644 index 00000000000..5cfb1ae37c8 --- /dev/null +++ b/curriculum/challenges/japanese/14-responsive-web-design-22/learn-css-variables-by-building-a-city-skyline/5d822fd413a79914d39e98fd.md @@ -0,0 +1,209 @@ +--- +id: 5d822fd413a79914d39e98fd +title: ステップ 53 +challengeType: 0 +dashedName: step-53 +--- + +# --description-- + +ここからの数ステップでは、CSS の境界線のテクニックを使ってビルのてっぺんの `.bb2a` セクションを三角形にします。 まず、`background-color` が必要なくなったので `.bb2` から削除してください。 + +# --hints-- + +`.bb2` から `background-color` を削除する必要があります。 + +```js +assert.isEmpty(new __helpers.CSSHelp(document).getStyle(".bb2")?.backgroundColor); +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + + City Skyline + + + + +
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ +
+
+
+
+
+
+
+
+
+
+
+
+
+ + +``` + +```css +:root { + --building-color1: #aa80ff; + --building-color2: #66cc99; + --building-color3: #cc6699; + --building-color4: #538cc6; + --window-color1: black; + --window-color2: #8cd9b3; +} + +* { + border: 1px solid black; + box-sizing: border-box; +} + +body { + height: 100vh; + margin: 0; + overflow: hidden; +} + +.background-buildings, .foreground-buildings { + width: 100%; + height: 100%; + display: flex; + align-items: flex-end; + justify-content: space-evenly; + position: absolute; + top: 0; +} + +/* BACKGROUND BUILDINGS - "bb" stands for "background building" */ +.bb1 { + width: 10%; + height: 70%; + display: flex; + flex-direction: column; + align-items: center; +} + +.bb1a { + width: 70%; +} + +.bb1b { + width: 80%; +} + +.bb1c { + width: 90%; +} + +.bb1d { + width: 100%; + height: 70%; + background: linear-gradient( +var(--building-color1) 50%, +var(--window-color1) + ); +} + +.bb1-window { + height: 10%; + background: linear-gradient( +var(--building-color1), +var(--window-color1) + ); +} +--fcc-editable-region-- +.bb2 { + width: 10%; + height: 50%; + background-color: var(--building-color2); +} +--fcc-editable-region-- +.bb2b { + width: 100%; + height: 100%; + background: repeating-linear-gradient( +var(--building-color2), +var(--building-color2) 6%, +var(--window-color2) 6%, +var(--window-color2) 9% + ); +} + +.bb3 { + width: 10%; + height: 55%; + background-color: var(--building-color3); +} + +.bb4 { + width: 11%; + height: 58%; + background-color: var(--building-color4); +} + +/* FOREGROUND BUILDINGS - "fb" stands for "foreground building" */ +.fb1 { + width: 10%; + height: 60%; + background-color: var(--building-color4); +} + +.fb2 { + width: 10%; + height: 40%; + background-color: var(--building-color3); +} + +.fb3 { + width: 10%; + height: 35%; + background-color: var(--building-color1); +} + +.fb4 { + width: 8%; + height: 45%; + background-color: var(--building-color1); + position: relative; + left: 10%; +} + +.fb5 { + width: 10%; + height: 33%; + background-color: var(--building-color2); + position: relative; + right: 10%; +} + +.fb6 { + width: 9%; + height: 38%; + background-color: var(--building-color3); +} +``` diff --git a/curriculum/challenges/japanese/14-responsive-web-design-22/learn-css-variables-by-building-a-city-skyline/5d822fd413a79914d39e98fe.md b/curriculum/challenges/japanese/14-responsive-web-design-22/learn-css-variables-by-building-a-city-skyline/5d822fd413a79914d39e98fe.md new file mode 100644 index 00000000000..7f3542d6583 --- /dev/null +++ b/curriculum/challenges/japanese/14-responsive-web-design-22/learn-css-variables-by-building-a-city-skyline/5d822fd413a79914d39e98fe.md @@ -0,0 +1,260 @@ +--- +id: 5d822fd413a79914d39e98fe +title: ステップ 54 +challengeType: 0 +dashedName: step-54 +--- + +# --description-- + +以下のプロパティを `.bb2a` に追加してください: + +```css +margin: auto; +width: 5vw; +height: 5vw; +border-top: 1vw solid #000; +border-bottom: 1vw solid #000; +border-left: 1vw solid #999; +border-right: 1vw solid #999; +``` + +すると、要素に太い境界線を設定した場合に、二辺が交わる箇所に斜めの角ができることがわかります。 この下側の境界線をビルのてっぺんとして使用します。 + +# --hints-- + +`.bb2a` の `margin` を `auto` に設定する必要があります。 + +```js +assert.equal(new __helpers.CSSHelp(document).getStyle('.bb2a')?.margin, "auto"); +``` + +`.bb2a` の `width` を `auto` に設定する必要があります。 + +```js +assert.equal(new __helpers.CSSHelp(document).getStyle('.bb2a')?.width, "5vw"); +``` + +`.bb2a` の `height` を `5vw` に設定する必要があります。 + +```js +assert.equal(new __helpers.CSSHelp(document).getStyle('.bb2a')?.height, "5vw"); +``` + +`.bb2a` の `border-top` を `1vw solid #000` に設定する必要があります。 + +```js +assert.equal(new __helpers.CSSHelp(document).getStyle('.bb2a')?.borderTop, "1vw solid rgb(0, 0, 0)"); +``` + +`.bb2a` の `border-bottom` を `1vw solid #000` に設定する必要があります。 + +```js +assert.equal(new __helpers.CSSHelp(document).getStyle('.bb2a')?.borderBottom, "1vw solid rgb(0, 0, 0)"); +``` + +`.bb2a` の `border-left` を `1vw solid #999` に設定する必要があります。 + +```js +assert.equal(new __helpers.CSSHelp(document).getStyle('.bb2a')?.borderLeft, "1vw solid rgb(153, 153, 153)"); +``` + +`.bb2a` の `border-right` を `1vw solid #999` に設定する必要があります。 + +```js +assert.equal(new __helpers.CSSHelp(document).getStyle('.bb2a')?.borderRight, "1vw solid rgb(153, 153, 153)"); +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + + City Skyline + + + + +
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ +
+
+
+
+
+
+
+
+
+
+
+
+
+ + +``` + +```css +:root { + --building-color1: #aa80ff; + --building-color2: #66cc99; + --building-color3: #cc6699; + --building-color4: #538cc6; + --window-color1: black; + --window-color2: #8cd9b3; +} + +* { + border: 1px solid black; + box-sizing: border-box; +} + +body { + height: 100vh; + margin: 0; + overflow: hidden; +} + +.background-buildings, .foreground-buildings { + width: 100%; + height: 100%; + display: flex; + align-items: flex-end; + justify-content: space-evenly; + position: absolute; + top: 0; +} + +/* BACKGROUND BUILDINGS - "bb" stands for "background building" */ +.bb1 { + width: 10%; + height: 70%; + display: flex; + flex-direction: column; + align-items: center; +} + +.bb1a { + width: 70%; +} + +.bb1b { + width: 80%; +} + +.bb1c { + width: 90%; +} + +.bb1d { + width: 100%; + height: 70%; + background: linear-gradient( + var(--building-color1) 50%, + var(--window-color1) + ); +} + +.bb1-window { + height: 10%; + background: linear-gradient( + var(--building-color1), + var(--window-color1) + ); +} + +.bb2 { + width: 10%; + height: 50%; +} +--fcc-editable-region-- + +--fcc-editable-region-- +.bb2b { + width: 100%; + height: 100%; + background: repeating-linear-gradient( + var(--building-color2), + var(--building-color2) 6%, + var(--window-color2) 6%, + var(--window-color2) 9% + ); +} + +.bb3 { + width: 10%; + height: 55%; + background-color: var(--building-color3); +} + +.bb4 { + width: 11%; + height: 58%; + background-color: var(--building-color4); +} + +/* FOREGROUND BUILDINGS - "fb" stands for "foreground building" */ +.fb1 { + width: 10%; + height: 60%; + background-color: var(--building-color4); +} + +.fb2 { + width: 10%; + height: 40%; + background-color: var(--building-color3); +} + +.fb3 { + width: 10%; + height: 35%; + background-color: var(--building-color1); +} + +.fb4 { + width: 8%; + height: 45%; + background-color: var(--building-color1); + position: relative; + left: 10%; +} + +.fb5 { + width: 10%; + height: 33%; + background-color: var(--building-color2); + position: relative; + right: 10%; +} + +.fb6 { + width: 9%; + height: 38%; + background-color: var(--building-color3); +} + +``` + diff --git a/curriculum/challenges/japanese/14-responsive-web-design-22/learn-css-variables-by-building-a-city-skyline/5d822fd413a79914d39e98ff.md b/curriculum/challenges/japanese/14-responsive-web-design-22/learn-css-variables-by-building-a-city-skyline/5d822fd413a79914d39e98ff.md new file mode 100644 index 00000000000..fda3e189e77 --- /dev/null +++ b/curriculum/challenges/japanese/14-responsive-web-design-22/learn-css-variables-by-building-a-city-skyline/5d822fd413a79914d39e98ff.md @@ -0,0 +1,238 @@ +--- +id: 5d822fd413a79914d39e98ff +title: ステップ 55 +challengeType: 0 +dashedName: step-55 +--- + +# --description-- + +次に、`.bb2a` から `width` と `height` を削除し、`border-left` と `border-right` を変更して、`1vw` の代わりに `5vw` を使用するようにしてください。 これで要素のサイズがゼロになり、境界線が中央で接します。 + +# --hints-- + +`.bb2a` から `width` を削除する必要があります。 + +```js +assert.isEmpty(new __helpers.CSSHelp(document).getStyle(".bb2a")?.width); +``` + +`.bb2a` から `height` を削除する必要があります。 + +```js +assert.isEmpty(new __helpers.CSSHelp(document).getStyle(".bb2a")?.height); +``` + +`5vw` を使用するように `border-left` を変更する必要があります 。 + +```js +assert.equal(new __helpers.CSSHelp(document).getStyle(".bb2a")?.borderLeft, "5vw solid rgb(153, 153, 153)"); +``` + +`5vw` を使用するように `border-right` を変更する必要があります 。 + +```js +assert.equal(new __helpers.CSSHelp(document).getStyle(".bb2a")?.borderRight, "5vw solid rgb(153, 153, 153)"); +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + + City Skyline + + + + +
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ +
+
+
+
+
+
+
+
+
+
+
+
+
+ + +``` + +```css +:root { + --building-color1: #aa80ff; + --building-color2: #66cc99; + --building-color3: #cc6699; + --building-color4: #538cc6; + --window-color1: black; + --window-color2: #8cd9b3; +} + +* { + border: 1px solid black; + box-sizing: border-box; +} + +body { + height: 100vh; + margin: 0; + overflow: hidden; +} + +.background-buildings, .foreground-buildings { + width: 100%; + height: 100%; + display: flex; + align-items: flex-end; + justify-content: space-evenly; + position: absolute; + top: 0; +} + +/* BACKGROUND BUILDINGS - "bb" stands for "background building" */ +.bb1 { + width: 10%; + height: 70%; + display: flex; + flex-direction: column; + align-items: center; +} + +.bb1a { + width: 70%; +} + +.bb1b { + width: 80%; +} + +.bb1c { + width: 90%; +} + +.bb1d { + width: 100%; + height: 70%; + background: linear-gradient( + var(--building-color1) 50%, + var(--window-color1) + ); +} + +.bb1-window { + height: 10%; + background: linear-gradient( + var(--building-color1), + var(--window-color1) + ); +} + +.bb2 { + width: 10%; + height: 50%; +} +--fcc-editable-region-- +.bb2a { + margin: auto; + width: 5vw; + height: 5vw; + border-top: 1vw solid #000; + border-bottom: 1vw solid #000; + border-left: 1vw solid #999; + border-right: 1vw solid #999; +} +--fcc-editable-region-- +.bb2b { + width: 100%; + height: 100%; + background: repeating-linear-gradient( + var(--building-color2), + var(--building-color2) 6%, + var(--window-color2) 6%, + var(--window-color2) 9% + ); +} + +.bb3 { + width: 10%; + height: 55%; + background-color: var(--building-color3); +} + +.bb4 { + width: 11%; + height: 58%; + background-color: var(--building-color4); +} + +/* FOREGROUND BUILDINGS - "fb" stands for "foreground building" */ +.fb1 { + width: 10%; + height: 60%; + background-color: var(--building-color4); +} + +.fb2 { + width: 10%; + height: 40%; + background-color: var(--building-color3); +} + +.fb3 { + width: 10%; + height: 35%; + background-color: var(--building-color1); +} + +.fb4 { + width: 8%; + height: 45%; + background-color: var(--building-color1); + position: relative; + left: 10%; +} + +.fb5 { + width: 10%; + height: 33%; + background-color: var(--building-color2); + position: relative; + right: 10%; +} + +.fb6 { + width: 9%; + height: 38%; + background-color: var(--building-color3); +} + +``` + diff --git a/curriculum/challenges/japanese/14-responsive-web-design-22/learn-css-variables-by-building-a-city-skyline/5d822fd413a79914d39e9900.md b/curriculum/challenges/japanese/14-responsive-web-design-22/learn-css-variables-by-building-a-city-skyline/5d822fd413a79914d39e9900.md new file mode 100644 index 00000000000..a2a8db717ad --- /dev/null +++ b/curriculum/challenges/japanese/14-responsive-web-design-22/learn-css-variables-by-building-a-city-skyline/5d822fd413a79914d39e9900.md @@ -0,0 +1,224 @@ +--- +id: 5d822fd413a79914d39e9900 +title: ステップ 56 +challengeType: 0 +dashedName: step-56 +--- + +# --description-- + +次に、 `.bb2a` の 2 つの `#999` を `transparent` に変更してください。 これで、左右の境界線が見えなくなります。 + +# --hints-- + +`transparent` を使用するように `border-left` を変更する必要があります 。 + +```js +assert.equal(new __helpers.CSSHelp(document).getStyle(".bb2a")?.borderLeft, "5vw solid transparent"); +``` + +`transparent` を使用するように `border-right` を変更する必要があります 。 + +```js +assert.equal(new __helpers.CSSHelp(document).getStyle(".bb2a")?.borderRight, "5vw solid transparent"); +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + + City Skyline + + + + +
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ +
+
+
+
+
+
+
+
+
+
+
+
+
+ + +``` + +```css +:root { + --building-color1: #aa80ff; + --building-color2: #66cc99; + --building-color3: #cc6699; + --building-color4: #538cc6; + --window-color1: black; + --window-color2: #8cd9b3; +} + +* { + border: 1px solid black; + box-sizing: border-box; +} + +body { + height: 100vh; + margin: 0; + overflow: hidden; +} + +.background-buildings, .foreground-buildings { + width: 100%; + height: 100%; + display: flex; + align-items: flex-end; + justify-content: space-evenly; + position: absolute; + top: 0; +} + +/* BACKGROUND BUILDINGS - "bb" stands for "background building" */ +.bb1 { + width: 10%; + height: 70%; + display: flex; + flex-direction: column; + align-items: center; +} + +.bb1a { + width: 70%; +} + +.bb1b { + width: 80%; +} + +.bb1c { + width: 90%; +} + +.bb1d { + width: 100%; + height: 70%; + background: linear-gradient( + var(--building-color1) 50%, + var(--window-color1) + ); +} + +.bb1-window { + height: 10%; + background: linear-gradient( + var(--building-color1), + var(--window-color1) + ); +} + +.bb2 { + width: 10%; + height: 50%; +} +--fcc-editable-region-- +.bb2a { + margin: auto; + border-top: 1vw solid #000; + border-bottom: 1vw solid #000; + border-left: 5vw solid #999; + border-right: 5vw solid #999; +} +--fcc-editable-region-- +.bb2b { + width: 100%; + height: 100%; + background: repeating-linear-gradient( + var(--building-color2), + var(--building-color2) 6%, + var(--window-color2) 6%, + var(--window-color2) 9% + ); +} + +.bb3 { + width: 10%; + height: 55%; + background-color: var(--building-color3); +} + +.bb4 { + width: 11%; + height: 58%; + background-color: var(--building-color4); +} + +/* FOREGROUND BUILDINGS - "fb" stands for "foreground building" */ +.fb1 { + width: 10%; + height: 60%; + background-color: var(--building-color4); +} + +.fb2 { + width: 10%; + height: 40%; + background-color: var(--building-color3); +} + +.fb3 { + width: 10%; + height: 35%; + background-color: var(--building-color1); +} + +.fb4 { + width: 8%; + height: 45%; + background-color: var(--building-color1); + position: relative; + left: 10%; +} + +.fb5 { + width: 10%; + height: 33%; + background-color: var(--building-color2); + position: relative; + right: 10%; +} + +.fb6 { + width: 9%; + height: 38%; + background-color: var(--building-color3); +} + +``` + diff --git a/curriculum/challenges/japanese/14-responsive-web-design-22/learn-css-variables-by-building-a-city-skyline/5d822fd413a79914d39e9901.md b/curriculum/challenges/japanese/14-responsive-web-design-22/learn-css-variables-by-building-a-city-skyline/5d822fd413a79914d39e9901.md new file mode 100644 index 00000000000..1a5f63df91b --- /dev/null +++ b/curriculum/challenges/japanese/14-responsive-web-design-22/learn-css-variables-by-building-a-city-skyline/5d822fd413a79914d39e9901.md @@ -0,0 +1,224 @@ +--- +id: 5d822fd413a79914d39e9901 +title: ステップ 57 +challengeType: 0 +dashedName: step-57 +--- + +# --description-- + +ビルの上部を三角形にするため、`.bb2a` から `margin` および `border-top` のプロパティと値を削除してください。 + +# --hints-- + +`.bb2a` から `margin` を削除する必要があります。 + +```js +assert.isEmpty(new __helpers.CSSHelp(document).getStyle(".bb2a")?.margin); +``` + +`.bb2a` から `border-top` を削除する必要があります。 + +```js +assert.isEmpty(new __helpers.CSSHelp(document).getStyle(".bb2a")?.borderTop); +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + + City Skyline + + + + +
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ +
+
+
+
+
+
+
+
+
+
+
+
+
+ + +``` + +```css +:root { + --building-color1: #aa80ff; + --building-color2: #66cc99; + --building-color3: #cc6699; + --building-color4: #538cc6; + --window-color1: black; + --window-color2: #8cd9b3; +} + +* { + border: 1px solid black; + box-sizing: border-box; +} + +body { + height: 100vh; + margin: 0; + overflow: hidden; +} + +.background-buildings, .foreground-buildings { + width: 100%; + height: 100%; + display: flex; + align-items: flex-end; + justify-content: space-evenly; + position: absolute; + top: 0; +} + +/* BACKGROUND BUILDINGS - "bb" stands for "background building" */ +.bb1 { + width: 10%; + height: 70%; + display: flex; + flex-direction: column; + align-items: center; +} + +.bb1a { + width: 70%; +} + +.bb1b { + width: 80%; +} + +.bb1c { + width: 90%; +} + +.bb1d { + width: 100%; + height: 70%; + background: linear-gradient( + var(--building-color1) 50%, + var(--window-color1) + ); +} + +.bb1-window { + height: 10%; + background: linear-gradient( + var(--building-color1), + var(--window-color1) + ); +} + +.bb2 { + width: 10%; + height: 50%; +} +--fcc-editable-region-- +.bb2a { + margin: auto; + border-top: 1vw solid #000; + border-bottom: 1vw solid #000; + border-left: 5vw solid transparent; + border-right: 5vw solid transparent; +} +--fcc-editable-region-- +.bb2b { + width: 100%; + height: 100%; + background: repeating-linear-gradient( + var(--building-color2), + var(--building-color2) 6%, + var(--window-color2) 6%, + var(--window-color2) 9% + ); +} + +.bb3 { + width: 10%; + height: 55%; + background-color: var(--building-color3); +} + +.bb4 { + width: 11%; + height: 58%; + background-color: var(--building-color4); +} + +/* FOREGROUND BUILDINGS - "fb" stands for "foreground building" */ +.fb1 { + width: 10%; + height: 60%; + background-color: var(--building-color4); +} + +.fb2 { + width: 10%; + height: 40%; + background-color: var(--building-color3); +} + +.fb3 { + width: 10%; + height: 35%; + background-color: var(--building-color1); +} + +.fb4 { + width: 8%; + height: 45%; + background-color: var(--building-color1); + position: relative; + left: 10%; +} + +.fb5 { + width: 10%; + height: 33%; + background-color: var(--building-color2); + position: relative; + right: 10%; +} + +.fb6 { + width: 9%; + height: 38%; + background-color: var(--building-color3); +} + +``` + diff --git a/curriculum/challenges/japanese/14-responsive-web-design-22/learn-css-variables-by-building-a-city-skyline/5d822fd413a79914d39e9902.md b/curriculum/challenges/japanese/14-responsive-web-design-22/learn-css-variables-by-building-a-city-skyline/5d822fd413a79914d39e9902.md new file mode 100644 index 00000000000..8a247678029 --- /dev/null +++ b/curriculum/challenges/japanese/14-responsive-web-design-22/learn-css-variables-by-building-a-city-skyline/5d822fd413a79914d39e9902.md @@ -0,0 +1,227 @@ +--- +id: 5d822fd413a79914d39e9902 +title: ステップ 58 +challengeType: 0 +dashedName: step-58 +--- + +# --description-- + +最後に、`.bb2a` の `border-bottom` プロパティについて `1vw` を `5vh` に変更し、色の `#000` を `--building-color2` 変数に変更してください。 だいぶ良くなってきました！ このプロジェクトのどの時点でも、最初にすべての要素に追加した `border` プロパティをコメントアウトまたは削除することにより、最終的に境界線を削除したときビルがどのように見えるか確認できます。 + +# --hints-- + +`5vh` を使用するように `border-bottom` を変更する必要があります 。 + +```js +assert.include(new __helpers.CSSHelp(document).getStyle(".bb2a")?.borderBottom, "5vh"); +``` + +`--building-color2` を使用するように `border-bottom` を変更する必要があります 。 + +```js +assert.include(new __helpers.CSSHelp(document).getStyle(".bb2a")?.borderBottom.trim(), "var(--building-color2)"); +``` + +`border-bottom` が `5vh solid var(--building-color2)` となる必要があります。 + +```js +assert.equal(new __helpers.CSSHelp(document).getStyle(".bb2a")?.borderBottom.trim(), "5vh solid var(--building-color2)"); +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + + City Skyline + + + + +
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ +
+
+
+
+
+
+
+
+
+
+
+
+
+ + +``` + +```css +:root { + --building-color1: #aa80ff; + --building-color2: #66cc99; + --building-color3: #cc6699; + --building-color4: #538cc6; + --window-color1: black; + --window-color2: #8cd9b3; +} + +* { + border: 1px solid black; + box-sizing: border-box; +} + +body { + height: 100vh; + margin: 0; + overflow: hidden; +} + +.background-buildings, .foreground-buildings { + width: 100%; + height: 100%; + display: flex; + align-items: flex-end; + justify-content: space-evenly; + position: absolute; + top: 0; +} + +/* BACKGROUND BUILDINGS - "bb" stands for "background building" */ +.bb1 { + width: 10%; + height: 70%; + display: flex; + flex-direction: column; + align-items: center; +} + +.bb1a { + width: 70%; +} + +.bb1b { + width: 80%; +} + +.bb1c { + width: 90%; +} + +.bb1d { + width: 100%; + height: 70%; + background: linear-gradient( + var(--building-color1) 50%, + var(--window-color1) + ); +} + +.bb1-window { + height: 10%; + background: linear-gradient( + var(--building-color1), + var(--window-color1) + ); +} + +.bb2 { + width: 10%; + height: 50%; +} +--fcc-editable-region-- +.bb2a { + border-bottom: 1vw solid #000; + border-left: 5vw solid transparent; + border-right: 5vw solid transparent; +} +--fcc-editable-region-- +.bb2b { + width: 100%; + height: 100%; + background: repeating-linear-gradient( + var(--building-color2), + var(--building-color2) 6%, + var(--window-color2) 6%, + var(--window-color2) 9% + ); +} + +.bb3 { + width: 10%; + height: 55%; + background-color: var(--building-color3); +} + +.bb4 { + width: 11%; + height: 58%; + background-color: var(--building-color4); +} + +/* FOREGROUND BUILDINGS - "fb" stands for "foreground building" */ +.fb1 { + width: 10%; + height: 60%; + background-color: var(--building-color4); +} + +.fb2 { + width: 10%; + height: 40%; + background-color: var(--building-color3); +} + +.fb3 { + width: 10%; + height: 35%; + background-color: var(--building-color1); +} + +.fb4 { + width: 8%; + height: 45%; + background-color: var(--building-color1); + position: relative; + left: 10%; +} + +.fb5 { + width: 10%; + height: 33%; + background-color: var(--building-color2); + position: relative; + right: 10%; +} + +.fb6 { + width: 9%; + height: 38%; + background-color: var(--building-color3); +} + +``` diff --git a/curriculum/challenges/japanese/14-responsive-web-design-22/learn-css-variables-by-building-a-city-skyline/5d822fd413a79914d39e9903.md b/curriculum/challenges/japanese/14-responsive-web-design-22/learn-css-variables-by-building-a-city-skyline/5d822fd413a79914d39e9903.md new file mode 100644 index 00000000000..88116920130 --- /dev/null +++ b/curriculum/challenges/japanese/14-responsive-web-design-22/learn-css-variables-by-building-a-city-skyline/5d822fd413a79914d39e9903.md @@ -0,0 +1,223 @@ +--- +id: 5d822fd413a79914d39e9903 +title: ステップ 59 +challengeType: 0 +dashedName: step-59 +--- + +# --description-- + +次のビルに取り掛かりましょう！ `--window-color3` という新しい変数を `:root` に作成し、値 `#d98cb3` を設定してください。 これはピンク色のビルに使う二つめの色になります。 + +# --hints-- + +新しい変数 `--window-color3` を定義する必要があります。 + +```js +assert(new __helpers.CSSHelp(document).isPropertyUsed("--window-color3")); +``` + +`--window-color3` に値 `#d98cb3` を設定する必要があります。 + +```js +assert.equal(new __helpers.CSSHelp(document).getStyle(":root")?.getPropertyValue("--window-color3")?.trim(), "#d98cb3"); +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + + City Skyline + + + + +
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ +
+
+
+
+
+
+
+
+
+
+
+
+
+ + +``` + +```css +--fcc-editable-region-- +:root { + --building-color1: #aa80ff; + --building-color2: #66cc99; + --building-color3: #cc6699; + --building-color4: #538cc6; + --window-color1: black; + --window-color2: #8cd9b3; +} +--fcc-editable-region-- +* { + border: 1px solid black; + box-sizing: border-box; +} + +body { + height: 100vh; + margin: 0; + overflow: hidden; +} + +.background-buildings, .foreground-buildings { + width: 100%; + height: 100%; + display: flex; + align-items: flex-end; + justify-content: space-evenly; + position: absolute; + top: 0; +} + +/* BACKGROUND BUILDINGS - "bb" stands for "background building" */ +.bb1 { + width: 10%; + height: 70%; + display: flex; + flex-direction: column; + align-items: center; +} + +.bb1a { + width: 70%; +} + +.bb1b { + width: 80%; +} + +.bb1c { + width: 90%; +} + +.bb1d { + width: 100%; + height: 70%; + background: linear-gradient( + var(--building-color1) 50%, + var(--window-color1) + ); +} + +.bb1-window { + height: 10%; + background: linear-gradient( + var(--building-color1), + var(--window-color1) + ); +} + +.bb2 { + width: 10%; + height: 50%; +} + +.bb2a { + border-bottom: 5vh solid var(--building-color2); + border-left: 5vw solid transparent; + border-right: 5vw solid transparent; +} + +.bb2b { + width: 100%; + height: 100%; + background: repeating-linear-gradient( + var(--building-color2), + var(--building-color2) 6%, + var(--window-color2) 6%, + var(--window-color2) 9% + ); +} + +.bb3 { + width: 10%; + height: 55%; + background-color: var(--building-color3); +} + +.bb4 { + width: 11%; + height: 58%; + background-color: var(--building-color4); +} + +/* FOREGROUND BUILDINGS - "fb" stands for "foreground building" */ +.fb1 { + width: 10%; + height: 60%; + background-color: var(--building-color4); +} + +.fb2 { + width: 10%; + height: 40%; + background-color: var(--building-color3); +} + +.fb3 { + width: 10%; + height: 35%; + background-color: var(--building-color1); +} + +.fb4 { + width: 8%; + height: 45%; + background-color: var(--building-color1); + position: relative; + left: 10%; +} + +.fb5 { + width: 10%; + height: 33%; + background-color: var(--building-color2); + position: relative; + right: 10%; +} + +.fb6 { + width: 9%; + height: 38%; + background-color: var(--building-color3); +} + +``` + diff --git a/curriculum/challenges/japanese/14-responsive-web-design-22/learn-css-variables-by-building-a-city-skyline/5d822fd413a79914d39e9904.md b/curriculum/challenges/japanese/14-responsive-web-design-22/learn-css-variables-by-building-a-city-skyline/5d822fd413a79914d39e9904.md new file mode 100644 index 00000000000..cfe15945a7f --- /dev/null +++ b/curriculum/challenges/japanese/14-responsive-web-design-22/learn-css-variables-by-building-a-city-skyline/5d822fd413a79914d39e9904.md @@ -0,0 +1,245 @@ +--- +id: 5d822fd413a79914d39e9904 +title: ステップ 60 +challengeType: 0 +dashedName: step-60 +--- + +# --description-- + +ここまでの作業で作成したグラデーションは、すべて上から下に向かっていました。これがデフォルトの方向です。 次のように色の前に方向を追加すると、別の方向を指定できます: + +```css +gradient-type( + direction, + color1, + color2 +); +``` + +`.bb3` に `repeating-linear-gradient` を設定してください。 方向には `90deg` を、最初の 2 つの色には `building-color3` を指定し、3 つ目の色は `15%` 地点で `window-color3` に指定してください。 色の距離を指定しない場合は、適当な値が使用されます。 この例では最初の 2 色はデフォルトで `0%` と `7.5%` になります。これは、始まりが `0%` で、`7.5%` が `15%` の半分だからです。 + +# --hints-- + +`.bb3` の `background` の設定には `repeating-linear-gradient` を使用する必要があります。 + +```js +assert.include(new __helpers.CSSHelp(document).getStyle(".bb3")?.background, "repeating-linear-gradient"); +``` + +`repeating-linear-gradient` の最初の引数には、方向として `90deg` を使用する必要があります。 + +```js +assert.include(new __helpers.CSSHelp(document).getStyle(".bb3")?.getPropVal('background', true), "repeating-linear-gradient(90deg"); +``` + +最初の 2 つの色には `--building-color3` を使用する必要があります。 + +```js +assert.include(new __helpers.CSSHelp(document).getStyle(".bb3")?.getPropVal('background', true), "repeating-linear-gradient(90deg,var(--building-color3),var(--building-color3)"); +``` + +3 つ目の色には `--window-color3` を `15%` 地点に指定する必要があります。 + +```js +assert.equal(new __helpers.CSSHelp(document).getStyle(".bb3")?.getPropVal('background', true), "repeating-linear-gradient(90deg,var(--building-color3),var(--building-color3),var(--window-color3)15%)"); +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + + City Skyline + + + + +
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ +
+
+
+
+
+
+
+
+
+
+
+
+
+ + +``` + +```css +:root { + --building-color1: #aa80ff; + --building-color2: #66cc99; + --building-color3: #cc6699; + --building-color4: #538cc6; + --window-color1: black; + --window-color2: #8cd9b3; + --window-color3: #d98cb3; +} + +* { + border: 1px solid black; + box-sizing: border-box; +} + +body { + height: 100vh; + margin: 0; + overflow: hidden; +} + +.background-buildings, .foreground-buildings { + width: 100%; + height: 100%; + display: flex; + align-items: flex-end; + justify-content: space-evenly; + position: absolute; + top: 0; +} + +/* BACKGROUND BUILDINGS - "bb" stands for "background building" */ +.bb1 { + width: 10%; + height: 70%; + display: flex; + flex-direction: column; + align-items: center; +} + +.bb1a { + width: 70%; +} + +.bb1b { + width: 80%; +} + +.bb1c { + width: 90%; +} + +.bb1d { + width: 100%; + height: 70%; + background: linear-gradient( + var(--building-color1) 50%, + var(--window-color1) + ); +} + +.bb1-window { + height: 10%; + background: linear-gradient( + var(--building-color1), + var(--window-color1) + ); +} + +.bb2 { + width: 10%; + height: 50%; +} + +.bb2a { + border-bottom: 5vh solid var(--building-color2); + border-left: 5vw solid transparent; + border-right: 5vw solid transparent; +} + +.bb2b { + width: 100%; + height: 100%; + background: repeating-linear-gradient( + var(--building-color2), + var(--building-color2) 6%, + var(--window-color2) 6%, + var(--window-color2) 9% + ); +} +--fcc-editable-region-- +.bb3 { + width: 10%; + height: 55%; + background-color: var(--building-color3); +} +--fcc-editable-region-- +.bb4 { + width: 11%; + height: 58%; + background-color: var(--building-color4); +} + +/* FOREGROUND BUILDINGS - "fb" stands for "foreground building" */ +.fb1 { + width: 10%; + height: 60%; + background-color: var(--building-color4); +} + +.fb2 { + width: 10%; + height: 40%; + background-color: var(--building-color3); +} + +.fb3 { + width: 10%; + height: 35%; + background-color: var(--building-color1); +} + +.fb4 { + width: 8%; + height: 45%; + background-color: var(--building-color1); + position: relative; + left: 10%; +} + +.fb5 { + width: 10%; + height: 33%; + background-color: var(--building-color2); + position: relative; + right: 10%; +} + +.fb6 { + width: 9%; + height: 38%; + background-color: var(--building-color3); +} + +``` + diff --git a/curriculum/challenges/japanese/14-responsive-web-design-22/learn-css-variables-by-building-a-city-skyline/5d822fd413a79914d39e9905.md b/curriculum/challenges/japanese/14-responsive-web-design-22/learn-css-variables-by-building-a-city-skyline/5d822fd413a79914d39e9905.md new file mode 100644 index 00000000000..2715d7c8323 --- /dev/null +++ b/curriculum/challenges/japanese/14-responsive-web-design-22/learn-css-variables-by-building-a-city-skyline/5d822fd413a79914d39e9905.md @@ -0,0 +1,223 @@ +--- +id: 5d822fd413a79914d39e9905 +title: ステップ 61 +challengeType: 0 +dashedName: step-61 +--- + +# --description-- + +背景にグラデーションを使うようにしたので、`.bb3` から `background-color` のプロパティと値を削除しましょう。 + +# --hints-- + +`.bb3` から `background-color` を削除する必要があります。 + +```js +assert.notMatch(code, /\.bb3\s*\{\s*[^}]*?background-color[^}]*?\}/); +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + + City Skyline + + + + +
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ +
+
+
+
+
+
+
+
+
+
+
+
+
+ + +``` + +```css +:root { + --building-color1: #aa80ff; + --building-color2: #66cc99; + --building-color3: #cc6699; + --building-color4: #538cc6; + --window-color1: black; + --window-color2: #8cd9b3; + --window-color3: #d98cb3; +} + +* { + border: 1px solid black; + box-sizing: border-box; +} + +body { + height: 100vh; + margin: 0; + overflow: hidden; +} + +.background-buildings, .foreground-buildings { + width: 100%; + height: 100%; + display: flex; + align-items: flex-end; + justify-content: space-evenly; + position: absolute; + top: 0; +} + +/* BACKGROUND BUILDINGS - "bb" stands for "background building" */ +.bb1 { + width: 10%; + height: 70%; + display: flex; + flex-direction: column; + align-items: center; +} + +.bb1a { + width: 70%; +} + +.bb1b { + width: 80%; +} + +.bb1c { + width: 90%; +} + +.bb1d { + width: 100%; + height: 70%; + background: linear-gradient( + var(--building-color1) 50%, + var(--window-color1) + ); +} + +.bb1-window { + height: 10%; + background: linear-gradient( + var(--building-color1), + var(--window-color1) + ); +} + +.bb2 { + width: 10%; + height: 50%; +} + +.bb2a { + border-bottom: 5vh solid var(--building-color2); + border-left: 5vw solid transparent; + border-right: 5vw solid transparent; +} + +.bb2b { + width: 100%; + height: 100%; + background: repeating-linear-gradient( + var(--building-color2), + var(--building-color2) 6%, + var(--window-color2) 6%, + var(--window-color2) 9% + ); +} +--fcc-editable-region-- +.bb3 { + width: 10%; + height: 55%; + background-color: var(--building-color3); + background: repeating-linear-gradient( + 90deg, + var(--building-color3), + var(--building-color3), + var(--window-color3) 15% + ); +} +--fcc-editable-region-- +.bb4 { + width: 11%; + height: 58%; + background-color: var(--building-color4); +} + +/* FOREGROUND BUILDINGS - "fb" stands for "foreground building" */ +.fb1 { + width: 10%; + height: 60%; + background-color: var(--building-color4); +} + +.fb2 { + width: 10%; + height: 40%; + background-color: var(--building-color3); +} + +.fb3 { + width: 10%; + height: 35%; + background-color: var(--building-color1); +} + +.fb4 { + width: 8%; + height: 45%; + background-color: var(--building-color1); + position: relative; + left: 10%; +} + +.fb5 { + width: 10%; + height: 33%; + background-color: var(--building-color2); + position: relative; + right: 10%; +} + +.fb6 { + width: 9%; + height: 38%; + background-color: var(--building-color3); +} + +``` + diff --git a/curriculum/challenges/japanese/14-responsive-web-design-22/learn-css-variables-by-building-a-city-skyline/5d822fd413a79914d39e9906.md b/curriculum/challenges/japanese/14-responsive-web-design-22/learn-css-variables-by-building-a-city-skyline/5d822fd413a79914d39e9906.md new file mode 100644 index 00000000000..3035f61d7fb --- /dev/null +++ b/curriculum/challenges/japanese/14-responsive-web-design-22/learn-css-variables-by-building-a-city-skyline/5d822fd413a79914d39e9906.md @@ -0,0 +1,249 @@ +--- +id: 5d822fd413a79914d39e9906 +title: ステップ 62 +challengeType: 0 +dashedName: step-62 +--- + +# --description-- + +次のビルには 3 つのセクションを作ります。 `.bb4` 内に `div` 要素を 3 つネストしてください。 それぞれのクラスを順に `bb4a`、`bb4b`、`bb4c` としてください。 + +# --hints-- + +`.bb4` 内に `div` 要素を 3 つ追加する必要があります。 + +```js +assert.equal(document.querySelector("div.bb4")?.children?.length, 3); +``` + +1 つ目の新しい `div` にクラス `bb4a` を設定する必要があります。 + +```js +assert.exists(document.querySelector("div.bb4 > div.bb4a")); +``` + +2 つ目の新しい `div` にクラス `bb4b` を設定する必要があります。 + +```js +assert.exists(document.querySelector("div.bb4 > div.bb4a")); +``` + +3 つ目の新しい `div` にクラス `bb4c` を設定する必要があります。 + +```js +assert.exists(document.querySelector("div.bb4 > div.bb4a")); +``` + +新しい `div` 要素は `.bb4a + .bb4b + .bb4c` の順に配置する必要があります。 + +```js +assert.exists(document.querySelector("div.bb4a + div.bb4b")); +assert.exists(document.querySelector("div.bb4b + div.bb4c")); +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + + City Skyline + + + + +
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+--fcc-editable-region-- +
+--fcc-editable-region-- +
+
+
+ +
+
+
+
+
+
+
+
+
+
+
+
+
+ + +``` + +```css +:root { + --building-color1: #aa80ff; + --building-color2: #66cc99; + --building-color3: #cc6699; + --building-color4: #538cc6; + --window-color1: black; + --window-color2: #8cd9b3; + --window-color3: #d98cb3; +} + +* { + border: 1px solid black; + box-sizing: border-box; +} + +body { + height: 100vh; + margin: 0; + overflow: hidden; +} + +.background-buildings, .foreground-buildings { + width: 100%; + height: 100%; + display: flex; + align-items: flex-end; + justify-content: space-evenly; + position: absolute; + top: 0; +} + +/* BACKGROUND BUILDINGS - "bb" stands for "background building" */ +.bb1 { + width: 10%; + height: 70%; + display: flex; + flex-direction: column; + align-items: center; +} + +.bb1a { + width: 70%; +} + +.bb1b { + width: 80%; +} + +.bb1c { + width: 90%; +} + +.bb1d { + width: 100%; + height: 70%; + background: linear-gradient( + var(--building-color1) 50%, + var(--window-color1) + ); +} + +.bb1-window { + height: 10%; + background: linear-gradient( + var(--building-color1), + var(--window-color1) + ); +} + +.bb2 { + width: 10%; + height: 50%; +} + +.bb2a { + border-bottom: 5vh solid var(--building-color2); + border-left: 5vw solid transparent; + border-right: 5vw solid transparent; +} + +.bb2b { + width: 100%; + height: 100%; + background: repeating-linear-gradient( + var(--building-color2), + var(--building-color2) 6%, + var(--window-color2) 6%, + var(--window-color2) 9% + ); +} + +.bb3 { + width: 10%; + height: 55%; + background: repeating-linear-gradient( + 90deg, + var(--building-color3), + var(--building-color3), + var(--window-color3) 15% + ); +} + +.bb4 { + width: 11%; + height: 58%; + background-color: var(--building-color4); +} + +/* FOREGROUND BUILDINGS - "fb" stands for "foreground building" */ +.fb1 { + width: 10%; + height: 60%; + background-color: var(--building-color4); +} + +.fb2 { + width: 10%; + height: 40%; + background-color: var(--building-color3); +} + +.fb3 { + width: 10%; + height: 35%; + background-color: var(--building-color1); +} + +.fb4 { + width: 8%; + height: 45%; + background-color: var(--building-color1); + position: relative; + left: 10%; +} + +.fb5 { + width: 10%; + height: 33%; + background-color: var(--building-color2); + position: relative; + right: 10%; +} + +.fb6 { + width: 9%; + height: 38%; + background-color: var(--building-color3); +} + +``` + diff --git a/curriculum/challenges/japanese/14-responsive-web-design-22/learn-css-variables-by-building-a-city-skyline/5d822fd413a79914d39e9907.md b/curriculum/challenges/japanese/14-responsive-web-design-22/learn-css-variables-by-building-a-city-skyline/5d822fd413a79914d39e9907.md new file mode 100644 index 00000000000..4d0adcad43c --- /dev/null +++ b/curriculum/challenges/japanese/14-responsive-web-design-22/learn-css-variables-by-building-a-city-skyline/5d822fd413a79914d39e9907.md @@ -0,0 +1,258 @@ +--- +id: 5d822fd413a79914d39e9907 +title: ステップ 63 +challengeType: 0 +dashedName: step-63 +--- + +# --description-- + +新しい `div` 要素について、`width` と `height` の値を以下の通り設定してください。`.bb4a` は `3%` と `10%`、`.bb4b` は `80%` と `5%`、`.bb4c` は `100%` と `85%` に設定してください。 + +# --hints-- + +`.bb4a` の `width` を `3%` に設定する必要があります。 + +```js +assert.equal(new __helpers.CSSHelp(document).getStyle(".bb4a")?.width, "3%"); +``` + +`.bb4a` の `height` を `10%` に設定する必要があります。 + +```js +assert.equal(new __helpers.CSSHelp(document).getStyle(".bb4a")?.height, "10%"); +``` + +`.bb4b` の `width` を `80%` に設定する必要があります。 + +```js +assert.equal(new __helpers.CSSHelp(document).getStyle(".bb4b")?.width, "80%"); +``` + +`.bb4b` の `height` を `5%` に設定する必要があります。 + +```js +assert.equal(new __helpers.CSSHelp(document).getStyle(".bb4b")?.height, "5%"); +``` + +`.bb4c` の `width` を `100%` に設定する必要があります。 + +```js +assert.equal(new __helpers.CSSHelp(document).getStyle(".bb4c")?.width, "100%"); +``` + +`.bb4c` の `height` を `85%` に設定する必要があります。 + +```js +assert.equal(new __helpers.CSSHelp(document).getStyle(".bb4c")?.height, "85%"); +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + + City Skyline + + + + +
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ +
+
+
+
+
+
+
+
+
+
+
+
+
+ + +``` + +```css +:root { + --building-color1: #aa80ff; + --building-color2: #66cc99; + --building-color3: #cc6699; + --building-color4: #538cc6; + --window-color1: black; + --window-color2: #8cd9b3; + --window-color3: #d98cb3; +} + +* { + border: 1px solid black; + box-sizing: border-box; +} + +body { + height: 100vh; + margin: 0; + overflow: hidden; +} + +.background-buildings, .foreground-buildings { + width: 100%; + height: 100%; + display: flex; + align-items: flex-end; + justify-content: space-evenly; + position: absolute; + top: 0; +} + +/* BACKGROUND BUILDINGS - "bb" stands for "background building" */ +.bb1 { + width: 10%; + height: 70%; + display: flex; + flex-direction: column; + align-items: center; +} + +.bb1a { + width: 70%; +} + +.bb1b { + width: 80%; +} + +.bb1c { + width: 90%; +} + +.bb1d { + width: 100%; + height: 70%; + background: linear-gradient( + var(--building-color1) 50%, + var(--window-color1) + ); +} + +.bb1-window { + height: 10%; + background: linear-gradient( + var(--building-color1), + var(--window-color1) + ); +} + +.bb2 { + width: 10%; + height: 50%; +} + +.bb2a { + border-bottom: 5vh solid var(--building-color2); + border-left: 5vw solid transparent; + border-right: 5vw solid transparent; +} + +.bb2b { + width: 100%; + height: 100%; + background: repeating-linear-gradient( + var(--building-color2), + var(--building-color2) 6%, + var(--window-color2) 6%, + var(--window-color2) 9% + ); +} + +.bb3 { + width: 10%; + height: 55%; + background: repeating-linear-gradient( + 90deg, + var(--building-color3), + var(--building-color3), + var(--window-color3) 15% + ); +} + +.bb4 { + width: 11%; + height: 58%; + background-color: var(--building-color4); +} +--fcc-editable-region-- + +--fcc-editable-region-- +/* FOREGROUND BUILDINGS - "fb" stands for "foreground building" */ +.fb1 { + width: 10%; + height: 60%; + background-color: var(--building-color4); +} + +.fb2 { + width: 10%; + height: 40%; + background-color: var(--building-color3); +} + +.fb3 { + width: 10%; + height: 35%; + background-color: var(--building-color1); +} + +.fb4 { + width: 8%; + height: 45%; + background-color: var(--building-color1); + position: relative; + left: 10%; +} + +.fb5 { + width: 10%; + height: 33%; + background-color: var(--building-color2); + position: relative; + right: 10%; +} + +.fb6 { + width: 9%; + height: 38%; + background-color: var(--building-color3); +} + +``` + diff --git a/curriculum/challenges/japanese/14-responsive-web-design-22/learn-html-forms-by-building-a-registration-form/60f803d5241e6a0433a523a1.md b/curriculum/challenges/japanese/14-responsive-web-design-22/learn-html-forms-by-building-a-registration-form/60f803d5241e6a0433a523a1.md new file mode 100644 index 00000000000..3510c1d98c9 --- /dev/null +++ b/curriculum/challenges/japanese/14-responsive-web-design-22/learn-html-forms-by-building-a-registration-form/60f803d5241e6a0433a523a1.md @@ -0,0 +1,73 @@ +--- +id: 60f803d5241e6a0433a523a1 +title: ステップ 15 +challengeType: 0 +dashedName: step-15 +--- + +# --description-- + +`label` 要素はデフォルトではインラインなので、すべて同じ行に並んで表示されてテキストが読みにくくなります。 別の行に表示させるには、`label` 要素に `display: block` を追加してください。また、それぞれ離れて表示させるために、`margin` を `0.5rem 0` に設定してください。 + +# --hints-- + +`label` セレクターを使用する必要があります。 + +```js +assert.exists(new __helpers.CSSHelp(document).getStyle('label')); +``` + +`display` プロパティの値を `block` に設定してください。 + +```js +assert.equal(new __helpers.CSSHelp(document).getStyle('label')?.display, 'block'); +``` + +`margin` プロパティの値を `0.5rem 0` に設定してください。 + +```js +assert.equal(new __helpers.CSSHelp(document).getStyle('label')?.margin, '0.5rem 0px'); +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + + Registration Form + + + +

Registration Form

+

Please fill out this form with the required information

+
+
+ + + + +
+
+
+
+ + +``` + +```css +body { + width: 100%; + height: 100vh; + margin: 0; + background-color: #1b1b32; + color: #f5f6f7; +} + +--fcc-editable-region-- + +--fcc-editable-region-- +``` diff --git a/curriculum/challenges/japanese/14-responsive-web-design-22/learn-html-forms-by-building-a-registration-form/60f81616cff80508badf9ad5.md b/curriculum/challenges/japanese/14-responsive-web-design-22/learn-html-forms-by-building-a-registration-form/60f81616cff80508badf9ad5.md new file mode 100644 index 00000000000..a69c35dae71 --- /dev/null +++ b/curriculum/challenges/japanese/14-responsive-web-design-22/learn-html-forms-by-building-a-registration-form/60f81616cff80508badf9ad5.md @@ -0,0 +1,94 @@ +--- +id: 60f81616cff80508badf9ad5 +title: ステップ 20 +challengeType: 0 +dashedName: step-20 +--- + +# --description-- + +この時点で、フォームを送信することができます。 ですが、送信しても特に何も起こらないことに気づいたかもしれません。 + +フォームをよりインタラクティブにするため、1 つ目の `fieldset` 内の `input` 要素に `required` 属性を追加してください。 + +これで、必須のフィールドを記入せずにフォームを送信しようとするとエラーメッセージが表示されるようになりました。 + +# --hints-- + +1 つ目の `input` 要素に `required` 属性を追加してください。 + +```js +assert.equal(document.querySelector('input')?.required, true); +``` + +2 つ目の `input` 要素に `required` 属性を追加してください。 + +```js +assert.equal(document.querySelectorAll('input')?.[1]?.required, true); +``` + +3 つ目の `input` 要素に `required` 属性を追加してください。 + +```js +assert.equal(document.querySelectorAll('input')?.[2]?.required, true); +``` + +4 つ目の `input` 要素に `required` 属性を追加してください。 + +```js +assert.equal(document.querySelectorAll('input')?.[3]?.required, true); +``` + +`submit` の `input` には `required` 属性を追加してはいけません。 + +```js +assert.equal(document.querySelector('input[type="submit"]')?.required, false); +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + + Registration Form + + + +

Registration Form

+

Please fill out this form with the required information

+
+--fcc-editable-region-- +
+ + + + +
+
+
+ +--fcc-editable-region-- +
+ + +``` + +```css +body { + width: 100%; + height: 100vh; + margin: 0; + background-color: #1b1b32; + color: #f5f6f7; +} + +label { + display: block; + margin: 0.5rem 0; +} + +``` diff --git a/curriculum/challenges/japanese/14-responsive-web-design-22/learn-html-forms-by-building-a-registration-form/60fac56271087806def55b33.md b/curriculum/challenges/japanese/14-responsive-web-design-22/learn-html-forms-by-building-a-registration-form/60fac56271087806def55b33.md new file mode 100644 index 00000000000..d475a7e9866 --- /dev/null +++ b/curriculum/challenges/japanese/14-responsive-web-design-22/learn-html-forms-by-building-a-registration-form/60fac56271087806def55b33.md @@ -0,0 +1,100 @@ +--- +id: 60fac56271087806def55b33 +title: ステップ 33 +challengeType: 0 +dashedName: step-33 +--- + +# --description-- + +`select` element 要素 (およびその中の `option` 要素) を、`How did you hear about us?` というテキストを持つ `label` 要素内にネストしてください。 テキストは `select` 要素の前に来るようにしてください。 + +# --hints-- + +`label` 要素内に `select` 要素のみをネストしてください。 + +```js +assert.exists(document.querySelector('fieldset:nth-child(3) > label:nth-child(3) > select')); +``` + +`label` 要素に `How did you hear about us?` というテキストを入れる必要があります。 + +```js +assert.equal(document.querySelector('fieldset:nth-child(3) > label:nth-child(3)')?.innerText?.trim(), 'How did you hear about us?'); +``` + +テキストを `select` 要素の前に置く必要があります。 + +```js +assert.match(document.querySelector('fieldset:nth-child(3) > label:nth-child(3)')?.innerHTML?.trim().replace(/[\t\n]+/g, ''), /^How did you hear about us\?/); +``` + +`select` 要素内には 5 つの `option` 要素が必要です。 + +```js +assert.equal(document.querySelectorAll('fieldset > label > select > option')?.length, 5); +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + + Registration Form + + + +

Registration Form

+

Please fill out this form with the required information

+
+
+ + + + +
+
+ + + +
+--fcc-editable-region-- +
+ + + +
+--fcc-editable-region-- + +
+ + +``` + +```css +body { + width: 100%; + height: 100vh; + margin: 0; + background-color: #1b1b32; + color: #f5f6f7; +} + +label { + display: block; + margin: 0.5rem 0; +} + +``` diff --git a/curriculum/challenges/japanese/14-responsive-web-design-22/learn-html-forms-by-building-a-registration-form/60ffe8a5ceb0e90618db06d9.md b/curriculum/challenges/japanese/14-responsive-web-design-22/learn-html-forms-by-building-a-registration-form/60ffe8a5ceb0e90618db06d9.md new file mode 100644 index 00000000000..1fb7c2abd16 --- /dev/null +++ b/curriculum/challenges/japanese/14-responsive-web-design-22/learn-html-forms-by-building-a-registration-form/60ffe8a5ceb0e90618db06d9.md @@ -0,0 +1,144 @@ +--- +id: 60ffe8a5ceb0e90618db06d9 +title: ステップ 57 +challengeType: 0 +dashedName: step-57 +--- + +# --description-- + +送信ボタンがよりフォームの他の部分と揃って見えるように、他のフィールドと同じ `height` (`2em`) を設定してください。 また、`font-size` を `1.1rem` に変更してください。 + +# --hints-- + +送信ボタンの `height` を `2em` に設定する必要があります。 + +```js +assert.equal(new __helpers.CSSHelp(document).getStyle('input[type="submit"]')?.height, '2em'); +``` + +送信ボタンの `font-size` を `1.1rem` に設定する必要があります。 + +```js +assert.equal(new __helpers.CSSHelp(document).getStyle('input[type="submit"]')?.fontSize, '1.1rem'); +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + + Registration Form + + + +

Registration Form

+

Please fill out this form with the required information

+
+
+ + + + +
+
+ + + +
+
+ + + + +
+ +
+ + +``` + +```css +body { + width: 100%; + height: 100vh; + margin: 0; + background-color: #1b1b32; + color: #f5f6f7; + font-family: Tahoma; + font-size: 16px; +} + +h1, p { + margin: 1em auto; + text-align: center; +} + +form { + width: 60vw; + max-width: 500px; + min-width: 300px; + margin: 0 auto; +} + +fieldset { + border: none; + padding: 2rem 0; + border-bottom: 3px solid #3b3b4f; +} + +fieldset:last-of-type { + border-bottom: none; +} + +label { + display: block; + margin: 0.5rem 0; +} + +input, +textarea, +select { + margin: 10px 0 0 0; + width: 100%; + min-height: 2em; +} + +input, textarea { + background-color: #0a0a23; + border: 1px solid #0a0a23; + color: #ffffff; +} + +.inline { + width: unset; + margin: 0 0.5em 0 0; + vertical-align: middle; +} + +--fcc-editable-region-- +input[type="submit"] { + display: block; + width: 60%; + margin: 0 auto; + +} +--fcc-editable-region-- + +``` diff --git a/curriculum/challenges/japanese/14-responsive-web-design-22/learn-html-forms-by-building-a-registration-form/60ffefd6479a3d084fb77cbc.md b/curriculum/challenges/japanese/14-responsive-web-design-22/learn-html-forms-by-building-a-registration-form/60ffefd6479a3d084fb77cbc.md new file mode 100644 index 00000000000..8dc0725dfe8 --- /dev/null +++ b/curriculum/challenges/japanese/14-responsive-web-design-22/learn-html-forms-by-building-a-registration-form/60ffefd6479a3d084fb77cbc.md @@ -0,0 +1,286 @@ +--- +id: 60ffefd6479a3d084fb77cbc +title: ステップ 62 +challengeType: 0 +dashedName: step-62 +--- + +# --description-- + +最後になりましたが、`terms and conditions` のリンクの文字色を `#dfdfe2` に変更しましょう。 + +よくできました！ _登録フォーム_の練習プロジェクトの最後のパートが完成しました。 + +# --hints-- + +`a` 要素セレクターを使用する必要があります。 + +```js +assert.exists(new __helpers.CSSHelp(document).getStyle('a')); +``` + +`a` 要素の `color` を `#dfdfe2` に設定する必要があります。 + +```js +assert.equal(new __helpers.CSSHelp(document).getStyle('a')?.color, 'rgb(223, 223, 226)'); +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + + Registration Form + + + +

Registration Form

+

Please fill out this form with the required information

+
+
+ + + + +
+
+ + + +
+
+ + + + +
+ +
+ + +``` + +```css +body { + width: 100%; + height: 100vh; + margin: 0; + background-color: #1b1b32; + color: #f5f6f7; + font-family: Tahoma; + font-size: 16px; +} + +h1, p { + margin: 1em auto; + text-align: center; +} + +form { + width: 60vw; + max-width: 500px; + min-width: 300px; + margin: 0 auto; + padding-bottom: 2em; +} + +fieldset { + border: none; + padding: 2rem 0; + border-bottom: 3px solid #3b3b4f; +} + +fieldset:last-of-type { + border-bottom: none; +} + +label { + display: block; + margin: 0.5rem 0; +} + +input, +textarea, +select { + margin: 10px 0 0 0; + width: 100%; + min-height: 2em; +} + +input, textarea { + background-color: #0a0a23; + border: 1px solid #0a0a23; + color: #ffffff; +} + +.inline { + width: unset; + margin: 0 0.5em 0 0; + vertical-align: middle; +} + +input[type="submit"] { + display: block; + width: 60%; + margin: 1em auto; + height: 2em; + font-size: 1.1rem; + background-color: #3b3b4f; + border-color: white; + min-width: 300px; +} + +input[type="file"] { + padding: 1px 2px; +} + +--fcc-editable-region-- + +--fcc-editable-region-- + +``` + +# --solutions-- + +```html + + + + + Registration Form + + + +

Registration Form

+

Please fill out this form with the required information

+
+
+ + + + +
+
+ + + +
+
+ + + + +
+ +
+ + +``` + +```css +body { + width: 100%; + height: 100vh; + margin: 0; + background-color: #1b1b32; + color: #f5f6f7; + font-family: Tahoma; + font-size: 16px; +} + +h1, p { + margin: 1em auto; + text-align: center; +} + +form { + width: 60vw; + max-width: 500px; + min-width: 300px; + margin: 0 auto; + padding-bottom: 2em; +} + +fieldset { + border: none; + padding: 2rem 0; + border-bottom: 3px solid #3b3b4f; +} + +fieldset:last-of-type { + border-bottom: none; +} + +label { + display: block; + margin: 0.5rem 0; +} + +input, +textarea, +select { + margin: 10px 0 0 0; + width: 100%; + min-height: 2em; +} + +input, textarea { + background-color: #0a0a23; + border: 1px solid #0a0a23; + color: #ffffff; +} + +.inline { + width: unset; + margin: 0 0.5em 0 0; + vertical-align: middle; +} + +input[type="submit"] { + display: block; + width: 60%; + margin: 1em auto; + height: 2em; + font-size: 1.1rem; + background-color: #3b3b4f; + border-color: white; + min-width: 300px; +} + +input[type="file"] { + padding: 1px 2px; +} + +a { + color: #dfdfe2; +} + +``` diff --git a/curriculum/challenges/portuguese/05-back-end-development-and-apis/back-end-development-and-apis-projects/exercise-tracker.md b/curriculum/challenges/portuguese/05-back-end-development-and-apis/back-end-development-and-apis-projects/exercise-tracker.md index c0ce02db9dd..61ce940b4b6 100644 --- a/curriculum/challenges/portuguese/05-back-end-development-and-apis/back-end-development-and-apis-projects/exercise-tracker.md +++ b/curriculum/challenges/portuguese/05-back-end-development-and-apis/back-end-development-and-apis-projects/exercise-tracker.md @@ -164,7 +164,7 @@ async (getUserInput) => { const res = await fetch(url + '/api/users', { method: 'POST', headers: { 'Content-Type': 'application/x-www-form-urlencoded' }, - body: `username=fcc_test_${Date.now()}`.substingr(0, 29) + body: `username=fcc_test_${Date.now()}`.substring(0, 29) }); if (res.ok) { const { _id, username } = await res.json(); diff --git a/curriculum/challenges/portuguese/10-coding-interview-prep/rosetta-code/discordian-date.md b/curriculum/challenges/portuguese/10-coding-interview-prep/rosetta-code/discordian-date.md index 89076643a6b..8ba11ce5e44 100644 --- a/curriculum/challenges/portuguese/10-coding-interview-prep/rosetta-code/discordian-date.md +++ b/curriculum/challenges/portuguese/10-coding-interview-prep/rosetta-code/discordian-date.md @@ -7,12 +7,11 @@ dashedName: discordian-date --- # --description-- +O calendário gregoriano é um calendário solar com 12 meses de 28-31 dias cada. Uma semana consiste em sete dias e com 52 semanas e 1 dia por ano. O ano consiste em 365 dias, com um dia a mais adicionado a fevereiro nos anos bissextos. Um ano bissexto ocorre a cada quatro anos, exceto para os primeiros três anos de virada de século de cada 400 anos. -O calendário gregoriano é um calendário solar com 12 meses de 28 a 31 dias cada. O ano nos calendários consiste em 365 dias. com um dia a mais adicionado em fevereiro nos anos bissextos, à exceção de três anos que fecham um século a cada 400 anos. +O calendário discordiano está alinhado ao calendário gregoriano e começa em 1º de janeiro. A semana consiste em cinco dias e com 73 semanas por ano. O ano também consiste em 365 dias, com um dia extra inserido entre o caos 59 e o caos 60 todo ano bissexto. -O calendário discordiano está alinhado ao calendário gregoriano e começa em 1º de janeiro. A sua semana consiste em cinco dias, com 73 semanas por ano. A cada quatro anos no calendário discordiano, um dia extra é inserido entre caos 59 e caos 60. - -Os meses, dias de semana e eventos no calendário discordiano são fornecidos assim: +Os meses, dias de semana, eventos de apóstolos e feriados no calendário discordiano são fornecidos assim: Estações: `'Chaos', 'Discord', 'Confusion', 'Bureaucracy', 'The Aftermath'`. diff --git a/curriculum/challenges/portuguese/14-responsive-web-design-22/learn-css-flexbox-by-building-a-photo-gallery/6153a3952facd25a83fe8083.md b/curriculum/challenges/portuguese/14-responsive-web-design-22/learn-css-flexbox-by-building-a-photo-gallery/6153a3952facd25a83fe8083.md index 3fd5b30e45b..aed0adf8b4a 100644 --- a/curriculum/challenges/portuguese/14-responsive-web-design-22/learn-css-flexbox-by-building-a-photo-gallery/6153a3952facd25a83fe8083.md +++ b/curriculum/challenges/portuguese/14-responsive-web-design-22/learn-css-flexbox-by-building-a-photo-gallery/6153a3952facd25a83fe8083.md @@ -7,7 +7,7 @@ dashedName: step-20 # --description-- -O pseudoelemento `::after` cria um elemento que é o último filho do elemento selecionado. Podemos usá-lo para adicionar um elemento vazio após a última imagem. Se dermos a esse elemento a mesma `width` das imagens, ele empurrará a última imagem para a esquerda quando a galeria estiver em um layout de duas colunas. Nesse momento, ele está no centro porque definimos `justify-content: center` no contêiner flex. +O pseudoelemento `::after` cria um elemento que é o último filho do elemento selecionado. Você pode usá-lo para adicionar um elemento vazio após a última imagem. Se você der a esse elemento a mesma `width` das imagens, ele empurrará a última imagem para a esquerda quando a galeria estiver em um layout de duas colunas. Neste momento, ele está no centro porque você definiu `justify-content: center` no contêiner flex. Exemplo: