From 91c9fc6cd51e57a5a13127a82f25480a954e3cf6 Mon Sep 17 00:00:00 2001 From: ZhichengChen Date: Mon, 7 Sep 2020 16:15:49 +0800 Subject: [PATCH] fix(i18n): update Chinese translation of front end libraries projects (#38826) --- .../build-a-drum-machine.chinese.md | 24 +++++++--- .../build-a-javascript-calculator.chinese.md | 34 +++++++++++--- .../build-a-markdown-previewer.chinese.md | 24 +++++++--- .../build-a-pomodoro-clock.chinese.md | 45 ++++++++++++++++--- .../build-a-random-quote-machine.chinese.md | 27 ++++++++--- 5 files changed, 129 insertions(+), 25 deletions(-) diff --git a/curriculum/challenges/chinese/03-front-end-libraries/front-end-libraries-projects/build-a-drum-machine.chinese.md b/curriculum/challenges/chinese/03-front-end-libraries/front-end-libraries-projects/build-a-drum-machine.chinese.md index 634695f5fb..61ffdf73f3 100644 --- a/curriculum/challenges/chinese/03-front-end-libraries/front-end-libraries-projects/build-a-drum-machine.chinese.md +++ b/curriculum/challenges/chinese/03-front-end-libraries/front-end-libraries-projects/build-a-drum-machine.chinese.md @@ -3,15 +3,29 @@ id: 587d7dbc367417b2b2512bae title: Build a Drum Machine isRequired: true challengeType: 3 -videoUrl: '' -localeTitle: 建立鼓机 +forumTopicId: 301370 +localeTitle: 构建一台鼓式机器 --- ## Description -
目标：构建一个功能类似于此的CodePen.io应用程序： https ： //codepen.io/freeCodeCamp/full/MJyNMd 。完成以下用户故事并通过所有测试。给它你自己的个人风格。您可以使用HTML，JavaScript，CSS，Bootstrap，SASS，React，Redux和jQuery的任意组合来完成此项目。您应该使用前端框架（例如React），因为本节是关于学习前端框架的。不建议使用上面未列出的其他技术，使用它们的风险由您自行承担。我们正在寻求支持其他前端框架，如Angular和Vue，但目前不支持它们。我们将接受并尝试修复所有使用建议的技术堆栈的问题报告。快乐的编码！ 用户故事＃1：我应该能够看到一个带有相应id="drum-machine"的外部容器，其中包含所有其他元素。 用户故事＃2：在#drum-machine我可以看到一个具有相应id="display"的元素。 用户故事＃3：在#drum-machine我可以看到9个可点击的鼓垫元素，每个鼓垫元素都有一个drum-pad的类名，一个唯一的id描述了鼓垫将被设置为触发的音频片段，以及一个内部与键盘上的以下键之一对应的文本：Q，W，E，A，S，D，Z，X，C。鼓垫必须按此顺序排列。 用户故事＃4：在每个.drum-pad ，应该有一个HTML5 audio其具有元件src指向音频剪辑，一个类名称属性clip ，以及对应于其父的内文本的ID .drum-pad （例如id="Q" ， id="W" ， id="E"等）。 用户故事＃5：当我点击.drum-pad元素时，应该触发其子audio元素中包含的音频剪辑。 用户故事＃6：当我按下与每个.drum-pad相关联的触发键时，应触发其子audio元素中包含的音频剪辑（例如，按下Q键应触发包含字符串“Q”的鼓垫，按下W键应触发包含字符串“W”等的鼓垫。 用户故事＃7：当触发.drum-pad ，描述相关音频剪辑的字符串将显示为#display元素的内部文本（每个字符串必须是唯一的）。您可以通过分叉此CodePen笔来构建项目。或者您可以使用此CDN链接在您喜欢的任何环境中运行测试： https://cdn.freecodecamp.org/testable-projects-fcc/v1/bundle.js ： https://cdn.freecodecamp.org/testable-projects-fcc/v1/bundle.js完成后，将URL提交给您的工作通过所有测试的项目。如果卡住，请记住使用Read-Search-Ask方法。
+
+目标：在 CodePen.io 上实现一个功能类似 https://codepen.io/freeCodeCamp/full/MJyNMd 的 App。 +在满足以下需求并能通过所有测试的前提下，你可以根据自己的喜好来美化你的 app。 +你可以使用 HTML、JavaScript、CSS、Bootstrap、SASS、React、Redux、jQuery 来完成这个挑战。但鉴于这个章节的学习内容与前端框架相关，推荐使用一款前端框架（比如 React）来完成这个挑战；不推荐你使用前面没有提到的技术，否则风险自负。我们有计划新增其他前端框架课程，例如 Angular 和 Vue，不过目前还没有这些内容。我们会接受并尽力处理你在使用建议的技术栈过程中遇到的问题。编码愉快！ +需求 1：我应该可以看到一个具有id="drum-machine"属性的外层容器，该容器包含了其他所有元素。 +需求 2：在具有#drum-machine属性的元素内，我应该能看到一个具有 id="display" 属性的元素。 +需求 3：在具有#drum-machine属性的元素内，我应该能看到 9 个可以点击的鼓垫元素，且每个鼓垫元素都应该有一个值为drum-pad的 class 属性。一个用于描述触发鼓垫音频片段的特殊 id，以及以下键值之一的文本内容：Q、W、E、A、S、D、Z、X、C。这些鼓垫必须按照以上顺序排列。 +需求 4：在每一个具有.drum-pad属性的元素内，应该有一个具有指向音频片段地址的src属性的 HTML5audio元素，一个值为clip的 class 属性，以及一个 id 属性，它的值应该是其父元素.drum-pad的文本内容（例如id="Q"、id="W"、id="E" 等等）。 +需求 5：当我点击一个具有.drum-pad属性的元素时，应该触发它的子元素audio包含的音频片段。 +需求 6：当我按下每一个.drum-pad元素的关联键时，应该触发其子元素audio包含的音频片段（例如：按下 Q 键应该触发包含字符串 "Q" 的鼓垫，按下 W 键应该触发包含字符串 "W" 的鼓垫等等）。 +需求 7：当触发一个具有.drum-pad属性的元素时，#display元素内应该展示这个触发元素关联音频片段的描述字符串（每一个字符串都应该是独一无二的）。 +你可以 fork 这个 CodePen pen 项目 来构建你的项目。或者你可以在任何你喜欢的环境中使用以下 CDN 链接来运行测试：https://gitcdn.link/repo/freeCodeCamp/testable-projects-fcc/master/build/bundle.js。 +一旦你完成了本项目并且该项目所有测试运行通过，请提交项目的 URL。 +
## Instructions -
+
+
## Tests @@ -36,4 +50,4 @@ tests: [] // solution required ``` -/section> +
diff --git a/curriculum/challenges/chinese/03-front-end-libraries/front-end-libraries-projects/build-a-javascript-calculator.chinese.md b/curriculum/challenges/chinese/03-front-end-libraries/front-end-libraries-projects/build-a-javascript-calculator.chinese.md index 8b27450101..52ac603e8c 100644 --- a/curriculum/challenges/chinese/03-front-end-libraries/front-end-libraries-projects/build-a-javascript-calculator.chinese.md +++ b/curriculum/challenges/chinese/03-front-end-libraries/front-end-libraries-projects/build-a-javascript-calculator.chinese.md @@ -3,15 +3,39 @@ id: bd7158d8c442eddfaeb5bd17 title: Build a JavaScript Calculator challengeType: 3 isRequired: true -videoUrl: '' -localeTitle: 构建JavaScript计算器 +forumTopicId: 301371 +localeTitle: 构建一个 JavaScript 计算器 --- ## Description -
目标：构建一个功能类似于此的CodePen.io应用程序： https ： //codepen.io/freeCodeCamp/full/wgGVVX 。完成以下用户故事并通过所有测试。给它你自己的个人风格。您可以使用HTML，JavaScript，CSS，Bootstrap，SASS，React，Redux和jQuery的任意组合来完成此项目。您应该使用前端框架（例如React），因为本节是关于学习前端框架的。不建议使用上面未列出的其他技术，使用它们的风险由您自行承担。我们正在寻求支持其他前端框架，如Angular和Vue，但目前不支持它们。我们将接受并尝试修复所有使用建议的技术堆栈的问题报告。快乐的编码！ 用户故事＃1：我的计算器应包含一个可点击的元素，其中包含= （等号），对应的id="equals" 。 用户故事＃2：我的计算器应该包含10个可点击的元素，每个元素包含一个0-9的数字，并带有以下相应的ID： id="zero" ， id="one" ， id="two" ， id="three" ， id="four" ， id="five" ， id="six" ， id="seven" ， id="eight" ， id="nine" 。 用户故事＃3：我的计算器应该包含4个可点击的元素，每个元素包含4个主要数学运算符之一，并带有以下相应的ID： id="add" ， id="subtract" ， id="multiply" ， id="divide" 。 用户故事＃4：我的计算器应该包含一个包含a的可点击元素. （小数点）符号，对应id="decimal" 。 用户故事＃5：我的计算器应包含一个id="clear"的可点击元素。 用户故事＃6：我的计算器应包含一个元素，用于显示具有相应id="display" 。 用户故事＃7：任何时候，按清除按钮清除输入和输出值，并将计算器返回到初始化状态; 0应该显示在id为display的元素中。 用户故事＃8：当我输入数字时，我应该能够在display id的元素中看到我的输入。 用户故事＃9：无论如何，我应该能够对任意长度的数字链进行加，减，乘和除，当我点击= ，正确的结果应显示在带有display id的元素中。 用户故事＃10：输入数字时，我的计算器不应允许数字以多个零开头。 用户故事＃11：单击小数元素时，a .应附加到当前显示的值;二.一个号码不应被接受。 用户故事＃12：我应该能够对包含小数点的数字执行任何操作（+， - ，*，/）。 用户故事＃13：如果连续输入2个或更多操作员，则执行的操作应该是最后输入的操作员。 用户故事＃14：紧跟在=按操作员应该开始一个新计算，该计算对先前评估的结果进行操作。 用户故事＃15：我的计算器应有的精度几位小数，当谈到四舍五入（注意，目前还没有确切的标准，但你应该能够处理这样的计算2 / 7合理精确到至少4位小数） 。 关于计算器逻辑的注意事项：应该注意的是，计算器输入逻辑有两种主要的思想流派： 立即执行逻辑和公式逻辑 。我们的示例使用公式逻辑并遵守操作优先顺序，而立即执行则不然。两者都是可以接受的，但请注意，根据您的选择，您的计算器可能会产生与我们的计算结果不同的某些公式（参见下面的示例）。只要您的数学可以通过其他生产计算器进行验证，请不要将此视为错误。 示例： 3 + 5 x 6 - 2 / 4 =
您可以通过分叉此CodePen笔来构建项目。或者您可以使用此CDN链接在您喜欢的任何环境中运行测试： https://cdn.freecodecamp.org/testable-projects-fcc/v1/bundle.js ： https://cdn.freecodecamp.org/testable-projects-fcc/v1/bundle.js完成后，将URL提交给您的工作通过所有测试的项目。如果卡住，请记住使用Read-Search-Ask方法。
+
+目标：在 CodePen.io 上实现一个功能类似 https://codepen.io/freeCodeCamp/full/wgGVVX 的 App。 +在满足以下需求并能通过所有测试的前提下，你可以根据自己的喜好来美化你的 app。 +你可以使用 HTML、JavaScript、CSS、Bootstrap、SASS、React、Redux、jQuery 来完成这个挑战。但鉴于这个章节的学习内容与前端框架相关，推荐使用一款前端框架（比如 React）来完成这个挑战；不推荐你使用前面没有提到的技术，否则风险自负。我们有计划新增其他前端框架课程，例如 Angular 和 Vue，不过目前还没有这些内容。我们会接受并尽力处理你在使用建议的技术栈过程中遇到的问题。编码愉快！ +需求 1：我的计算器应该包含一个具有id="equals"属性的可以点击的元素，元素的文本内容为=（等于符号）。 +需求 2：我的计算器应该包含 10 个具有如下 id 属性的可以点击的元素，每个元素的文本内容对应 0-9 的数字：id="zero"、id="one"、id="two"、id="three"、id="four"、id="five"、id="six"、id="seven"、id="eight"、id="nine"。 +需求 3：我的计算器应该包含四个可以点击的元素，文本内容对应4个主要数学运算符，且应具有如下 id 属性： id="add", id="subtract", id="multiply", id="divide"。 +需求 4：计算器应该包含一个可点击的`.`（小数点）符号，对应的id="decimal"。 +需求 5：我的计算器应该包含一个具有id="clear"属性的可以点击的元素。 +需求 6：我的计算器应该包含一个用于展示数值的元素，这个元素具有id="display"属性。 +需求 7：在任何时候按下清除键，都会清空输入和输出的数值并且使计算器回到初始状态；此时在 id 为display的元素中应该显示数字 0。 +需求 8：在我输入数字的同时，我应该能看到我输入的数字展示在 id 为display的元素中。 +需求 9：我应该可以在任意顺序下对一串任意长度的数字执行加、减、乘、除操作，并且当我按下=时，正确答案应该显示在 id 为display的元素中。 +需求 10：在我输入数字的同时，我的计算器应该允许一个数字以多个零开头。 +需求 11：当点击小数点元素时，当前展示的数值后面应该添加一个.符号；数字中不允许出现两个.符号。 +需求 12：我可以对包含小数点的数字执行任何四则运算（+、-、*、/）。 +需求 13：如果连续键入了两个及以上的运算符，应该执行最后一次键入的运算符。 +需求 14：如果在按下=符号后继续按一个运算符，则应该在上一次计算结果的基础上进行新的计算。 +需求 15：当需要四舍五入时，我的计算器应该可以处理结果的精度（注意：处理到多少位没有一个准确的标准，但是你应该能处理类似2 / 7这样的计算，使之至少有 4 位小数的精度）。 +注意计算器的逻辑：应当注意的是，计算器输入逻辑主要有两种思路：立即执行逻辑和公式逻辑。我们的示例使用公式逻辑并遵守运算优先顺序，而立即执行则不然。两者都是可以接受的，但请注意，根据你的选择，你的计算器对于某些算式可能会得到与我们不同的计算结果（参见下面的示例）。只要你的数学计算可以通过其他现实中计算器的验证，那么你的代码就是合理的。 +示例：3 + 5 x 6 - 2 / 4 =
+你可以 fork 这个 CodePen pen 项目 来构建你的项目。或者你可以在任何你喜欢的环境中使用以下 CDN 链接来运行测试：https://gitcdn.link/repo/freeCodeCamp/testable-projects-fcc/master/build/bundle.js。 +一旦你完成了本项目并且该项目所有测试运行通过，请提交项目的 URL。 +
## Instructions -
+
+
## Tests @@ -36,4 +60,4 @@ tests: [] // solution required ``` -/section> +
diff --git a/curriculum/challenges/chinese/03-front-end-libraries/front-end-libraries-projects/build-a-markdown-previewer.chinese.md b/curriculum/challenges/chinese/03-front-end-libraries/front-end-libraries-projects/build-a-markdown-previewer.chinese.md index 0f6e849eca..6668baaac9 100644 --- a/curriculum/challenges/chinese/03-front-end-libraries/front-end-libraries-projects/build-a-markdown-previewer.chinese.md +++ b/curriculum/challenges/chinese/03-front-end-libraries/front-end-libraries-projects/build-a-markdown-previewer.chinese.md @@ -3,15 +3,29 @@ id: bd7157d8c242eddfaeb5bd13 title: Build a Markdown Previewer isRequired: true challengeType: 3 -videoUrl: '' -localeTitle: 构建Markdown预览器 +forumTopicId: 301372 +localeTitle: 构建一个 Markdown 文件预览器 --- ## Description -
目标：构建一个功能类似于此的CodePen.io应用程序： https ： //codepen.io/freeCodeCamp/full/GrZVVO 。完成以下用户故事并通过所有测试。给它你自己的个人风格。您可以使用HTML，JavaScript，CSS，Bootstrap，SASS，React，Redux和jQuery的任意组合来完成此项目。您应该使用前端框架（例如React），因为本节是关于学习前端框架的。不建议使用上面未列出的其他技术，使用它们的风险由您自行承担。我们正在寻求支持其他前端框架，如Angular和Vue，但目前不支持它们。我们将接受并尝试修复所有使用建议的技术堆栈的问题报告。快乐的编码！ 用户故事＃1：我可以看到一个带有相应id="editor"的textarea元素。 用户故事＃2：我可以看到一个具有相应id="preview"的元素。 用户故事＃3：当我文本输入到#editor元件，所述#preview如I型显示textarea的内容元素被更新。 用户故事＃4：当我在#editor元素中输入GitHub风格的markdown时，文本在我输入的#preview元素中呈现为HTML（提示：您不需要自己解析Markdown - 您可以导入Marked库为此： https ： //cdnjs.com/libraries/marked ）。 用户故事＃5：当我的降价预览器首次加载时， ＃ #editor字段中的默认文本应包含有效的markdown，它至少代表以下每个元素之一：标题（H1大小），子标题（H2大小） ，链接，内联代码，代码块，列表项，块引用，图像和粗体文本。 用户故事＃6：首次加载我的降价预览器时， ＃ #editor字段中的默认降价应该在#preview元素中呈现为HTML。 可选的奖励（您不需要进行此测试通过）：我的降价预览器解释回车并将它们呈现为br （换行符）元素。您可以通过分叉此CodePen笔来构建项目。或者您可以使用此CDN链接在您喜欢的任何环境中运行测试： https://cdn.freecodecamp.org/testable-projects-fcc/v1/bundle.js ： https://cdn.freecodecamp.org/testable-projects-fcc/v1/bundle.js完成后，将URL提交给您的工作通过所有测试的项目。如果卡住，请记住使用Read-Search-Ask方法。
+
+目标：在 CodePen.io 上实现一个功能类似 https://codepen.io/freeCodeCamp/full/GrZVVO 的 App。 +在满足以下需求并能通过所有测试的前提下，你可以根据自己的喜好来美化你的 app。 +你可以使用 HTML、JavaScript、CSS、Bootstrap、SASS、React、Redux、jQuery 来完成这个挑战。但鉴于这个章节的学习内容与前端框架相关，推荐使用一款前端框架（比如 React）来完成这个挑战；不推荐你使用前面没有提到的技术，否则风险自负。我们有计划新增其他前端框架课程，例如 Angular 和 Vue，不过目前还没有这些内容。我们会接受并尽力处理你在使用建议的技术栈过程中遇到的问题。编码愉快！ +需求 1：我应该能看到一个具有id="editor"属性的textarea元素。 +需求 2：我应该能看到一个具有id="preview"属性的元素。 +需求 3：当我在具有#editor属性的元素内输入文本时，具有#preview属性的元素应该同步更新展示我键入的内容。 +需求 4：当我在具有#editor属性的元素内输入 Github 风格的 Markdown 内容时，文本应该以 HTML 的形式，把我所键入的内容渲染在具有#preview属性的元素中（提示：你不需要自己解析 Markdown——你可以引入一个叫做 Marked 的库来完成这项工作：https://cdnjs.com/libraries/marked）。 +需求 5：当我的 Markdown 预览器首次加载时，具有#editor属性的元素内的默认内容应该包含以下每个种类的至少一段有效的 Markdown 代码：标题（H1 标签）、次级标题（H2 标签）、链接、行内代码、代码块、列表、引用块、图片、加粗文本。 +需求 6：当我的 Markdown 预览器首次加载时，具有#editor属性的元素内容应该以 HTML 的形式渲染在具有#preview属性的元素中。 +可选需求（你无需通过这项测试）：我的 Markdown 预览器能够解析回车符并且将他们以br（换行）元素的形式渲染出来。 +你可以 fork 这个 CodePen pen 项目 来构建你的项目。或者你可以在任何你喜欢的环境中使用以下 CDN 链接来运行测试：https://gitcdn.link/repo/freeCodeCamp/testable-projects-fcc/master/build/bundle.js。 +一旦你完成了本项目并且该项目所有测试运行通过，请提交项目的 URL。 +
## Instructions -
+
+
## Tests @@ -36,4 +50,4 @@ tests: [] // solution required ``` -/section> +
diff --git a/curriculum/challenges/chinese/03-front-end-libraries/front-end-libraries-projects/build-a-pomodoro-clock.chinese.md b/curriculum/challenges/chinese/03-front-end-libraries/front-end-libraries-projects/build-a-pomodoro-clock.chinese.md index 0321371fa4..3894fc0d4f 100644 --- a/curriculum/challenges/chinese/03-front-end-libraries/front-end-libraries-projects/build-a-pomodoro-clock.chinese.md +++ b/curriculum/challenges/chinese/03-front-end-libraries/front-end-libraries-projects/build-a-pomodoro-clock.chinese.md @@ -3,15 +3,50 @@ id: bd7158d8c442eddfaeb5bd0f title: Build a Pomodoro Clock isRequired: true challengeType: 3 -videoUrl: '' -localeTitle: 建立一个番茄钟 +forumTopicId: 301373 +localeTitle: 构建一个番茄时钟 --- ## Description -
目标：构建一个功能类似于此的CodePen.io应用程序： https ： //codepen.io/freeCodeCamp/full/XpKrrW 。完成以下用户故事并通过所有测试。给它你自己的个人风格。您可以使用HTML，JavaScript，CSS，Bootstrap，SASS，React，Redux和jQuery的任意组合来完成此项目。您应该使用前端框架（例如React），因为本节是关于学习前端框架的。不建议使用上面未列出的其他技术，使用它们的风险由您自行承担。我们正在寻求支持其他前端框架，如Angular和Vue，但目前不支持它们。我们将接受并尝试修复所有使用建议的技术堆栈的问题报告。快乐的编码！ 用户故事＃1：我可以看到一个id="break-label"的元素，其中包含一个字符串（例如“Break Length”）。 用户故事＃2：我可以看到一个id="session-label"的元素，其中包含一个字符串（例如“Session Length”）。 用户故事＃3：我可以看到两个具有相应ID的可点击元素： id="break-decrement"和id="session-decrement" 。 用户故事＃4：我可以看到两个具有相应ID的可点击元素： id="break-increment"和id="session-increment" 。 用户故事＃5：我可以看到一个具有相应id="break-length"的元素，默认情况下（加载时）显示值5. 用户故事＃6：我可以看到一个元素具有相应的id="session-length" ，默认情况下显示值25. 用户故事＃7：我可以看到一个具有相应id="timer-label"的元素，其中包含一个表示会话已初始化的字符串（例如”Session“） 。 用户故事＃8：我可以看到一个对应id="time-left"的元素。注意：暂停或运行时，此字段中的值应始终以mm:ss格式显示（即25:00）。 用户故事＃9：我可以看到一个具有相应id="start_stop"的可点击元素。 用户故事＃10：我可以看到一个具有相应id="reset"的可点击元素。 用户故事＃11：当我单击id为reset的元素时，应该停止任何正在运行的计时器， id="break-length"的值应该返回5 ， id="session-length"应该返回到25，并且id="time-left"的元素应该重置为它的默认状态。 用户故事＃12：当我单击id为break-decrement的元素时， id="break-length"的值会减1，我可以看到更新后的值。 用户故事＃13：当我单击id为break-increment的元素时， id="break-length"的值会增加1，我可以看到更新后的值。 用户故事＃14：当我单击session-decrement id的元素时， id="session-length"的值减1，我可以看到更新后的值。 用户故事＃15：当我单击session-increment为id的元素时， id="session-length"的值会增加1，我可以看到更新后的值。 用户故事＃16：我不能将会话或休息长度设置为<= 0. 用户故事＃17：我不能将会话或休息时间设置为> 60. 用户故事＃18：当我首先单击id="start_stop"的元素，计时器应该从当前显示在id="session-length"的值开始运行，即使该值已经从原始值25递增或递减。 用户故事＃19 ：如果计时器正在运行，则id为time-left的元素应以mm:ss格式显示剩余时间（递减值1并每1000ms更新一次显示）。 用户故事＃20：如果计时器正在运行并且我单击id="start_stop"的元素，倒计时应该暂停。 用户故事＃21：如果计时器暂停，我点击id="start_stop"的元素，倒计时应该从暂停时恢复运行。 用户故事＃22：当会话倒计时到达零（注意：计时器必须达到00:00），并开始新的倒计时时，id为timer-label的元素应该显示一个表示休息已开始的字符串。 用户故事＃23：当会话倒计时到达零时（注意：计时器必须达到00:00），应该开始新的中断倒计时，从当前显示在id="break-length"元素中的值开始倒计时。 用户故事＃24：当休息倒计时到达零（注意：计时器必须达到00:00），并开始新的倒计时时，id为timer-label的元素应显示一个表示会话已开始的字符串。 用户故事＃25：当休息倒计时到达零时（注意：计时器必须达到00:00），应开始新的会话倒计时，从当前显示在id="session-length"元素中的值开始倒计时。 用户故事＃26：当倒计时到零时（注意：计时器必须达到00:00），应播放表示时间到了的声音。这应该使用HTML5 audio标签并具有相应的id="beep" 。 用户故事＃27： id="beep"的音频元素必须为1秒或更长。 用户故事＃28： id为beep的音频元素必须停止播放，并在单击具有reset id的元素时重绕到开头。您可以通过分叉此CodePen笔来构建项目。或者您可以使用此CDN链接在您喜欢的任何环境中运行测试： https://cdn.freecodecamp.org/testable-projects-fcc/v1/bundle.js ： https://cdn.freecodecamp.org/testable-projects-fcc/v1/bundle.js完成后，将URL提交给您的工作通过所有测试的项目。如果卡住，请记住使用Read-Search-Ask方法。
+
+目标：在 CodePen.io 上实现一个功能类似 https://codepen.io/freeCodeCamp/full/XpKrrW 的 App。 +在满足以下需求并能通过所有测试的前提下，你可以根据自己的喜好来美化你的 app。 +你可以使用 HTML、JavaScript、CSS、Bootstrap、SASS、React、Redux、jQuery 来完成这个挑战。但鉴于这个章节的学习内容与前端框架相关，推荐使用一款前端框架（比如 React）来完成这个挑战；不推荐你使用前面没有提到的技术，否则风险自负。我们有计划新增其他前端框架课程，例如 Angular 和 Vue，不过目前还没有这些内容。我们会接受并尽力处理你在使用建议的技术栈过程中遇到的问题。编码愉快！ +需求 1：我应该能看到一个具有id="break-label"属性的元素，这个元素的内容应该是一个字符串(例如："Break Length")。 +需求 2：我应该能看到一个具有id="session-label"属性的元素，这个元素的内容应该是一个字符串(例如："Session Length")。 +需求 3：我应该能看到两个可以点击的元素，他们分别具有如下 id：id="break-decrement"和id="session-decrement"。 +需求 4：我应该能看到两个可以点击的元素，他们分别具有如下 id：id="break-increment"和id="session-increment"。 +需求 5：我应该能看到一个具有id="break-length"属性的元素，这个元素默认展示数值应该为 5（加载后）。 +需求 6：我应该能看到一个具有id="session-length"属性的元素，这个元素默认展示数值应该为 25（加载后）。 +需求 7：我应该能看到一个具有id="timer-label"属性的元素，这个元素包含一个表示当前状态的字符串（例如："Session"）。 +需求 8：我应该能看到一个具有id="time-left"属性的元素。注意：暂停或者运行时，该元素的内容应始终以mm:ss格式显示（如 25:00）。 +需求 9：我应该能看到一个具有id="start_stop"属性的可点击的元素。 +需求 10：我应该能看到一个具有id="reset"属性的可点击的元素。 +需求 11：当我点击 id 属性为reset的元素时，应该停止任何运行中的计时器，id="break-length"元素中的值应该重新回到5，id="session-length"元素中的值应该重新回到 25，且id="time-left"元素应该重置为默认状态。 +需求 12：当我点击 id 属性为break-decrement的元素时，id="break-length"元素的值应该减去 1，且我应该能看到更新后的值。 +需求 13：当我点击 id 属性为break-increment 的元素时，id="break-length"元素的值应该增加 1，且我应该能看到更新后的值。 +需求 14：当我点击 id 属性为session-decrement 的元素时，id="session-length"元素的值应该减去 1，且我应该能看到更新后的值。 +需求 15：当我点击 id 属性为session-increment 的元素时，id="session-length"元素的值应该增加 1，且我应该能看到更新后的值。 +需求 16：工作或者休息长度不应该可以设置为 <= 0 的值。 +需求 17：工作或者休息长度比应该可以设置为 > 60 的值。 +需求 18：当我首次点击具有id="start_stop"属性的元素时，计时器应该根据id="session-length"元素当前显示的值开始运行，即使该值已从原始值 25 递增过或递减过。 +需求 19：如果计时器正在运行，id 属性为time-left的元素应该以mm:ss的格式展示剩余的时间（按1递减并且每秒更新一次显示的值）。 +需求 20：如果计时器正在运行，当我点击id="start_stop"元素时，倒计时应该暂停。 +需求 21：如果计时器已经暂停，当我点击id="start_stop"元素时，倒计时应该从暂停的时间点恢复运行。 +需求 22：当一个工作倒计时结束（注意：计时器必须达到00:00），并且新的倒计时开始运行时，id 属性为timer-label的元素应该显示一个表示已经开始休息的字符串。 +需求 23：当一个工作倒计时结束（注意：计时器必须达到00:00），应该开始一个新的休息倒计时，时间应该从id="break-length"元素中当前显示的值开始计算。 +需求 24：当一个休息倒计时结束（注意：计时器必须达到00:00），并且新的倒计时开始运行时，id 属性为timer-label的元素应该显示一个表示已经开始工作的字符串。 +需求 25：当一个休息倒计时结束（注意：计时器必须达到00:00），应该开始一个新的工作倒计时，时间应该从id="session-length"元素中当前显示的值开始计算。 +需求 26：当一个倒计时结束（注意：计时器必须达到00:00），应该播放一个表示时间到了的声音提示。这个提示音应该使用 HTML5 的audio标签并有一个id="beep"属性。 +需求 27：具有id="beep"属性的音频元素时长应该至少有一秒。 +需求 28：当点击 id 属性为reset的元素时，id 属性为beep的音频元素必须停止播放并回到开头。 +你可以 fork 这个 CodePen pen 项目 来构建你的项目。 或者你可以在任何你喜欢的环境中使用以下 CDN 链接来运行测试： https://gitcdn.link/repo/freeCodeCamp/testable-projects-fcc/master/build/bundle.js +一旦你完成了本项目并且该项目所有测试运行通过， 请提交项目的 URL。 +
## Instructions -
+
+
## Tests @@ -36,4 +71,4 @@ tests: [] // solution required ``` -/section> +
diff --git a/curriculum/challenges/chinese/03-front-end-libraries/front-end-libraries-projects/build-a-random-quote-machine.chinese.md b/curriculum/challenges/chinese/03-front-end-libraries/front-end-libraries-projects/build-a-random-quote-machine.chinese.md index 904345cb31..051e20a524 100644 --- a/curriculum/challenges/chinese/03-front-end-libraries/front-end-libraries-projects/build-a-random-quote-machine.chinese.md +++ b/curriculum/challenges/chinese/03-front-end-libraries/front-end-libraries-projects/build-a-random-quote-machine.chinese.md @@ -3,15 +3,32 @@ id: bd7158d8c442eddfaeb5bd13 title: Build a Random Quote Machine isRequired: true challengeType: 3 -videoUrl: '' -localeTitle: 建立一个随机报价机 +localeTitle: 构建一个随机引语生成器 --- ## Description -
目标：构建一个功能类似于此的CodePen.io应用程序： https ： //codepen.io/freeCodeCamp/full/qRZeGZ 。完成以下用户故事并通过所有测试。给它你自己的个人风格。您可以使用HTML，JavaScript，CSS，Bootstrap，SASS，React，Redux和jQuery的任意组合来完成此项目。您应该使用前端框架（例如React），因为本节是关于学习前端框架的。不建议使用上面未列出的其他技术，使用它们的风险由您自行承担。我们正在寻求支持其他前端框架，如Angular和Vue，但目前不支持它们。我们将接受并尝试修复所有使用建议的技术堆栈的问题报告。快乐的编码！ 用户故事＃1：我可以看到一个包含相应id="quote-box"的包装元素。 用户故事＃2：在#quote-box ，我可以看到一个具有相应id="text"的元素。 用户故事＃3：在#quote-box ，我可以看到一个具有相应id="author"的元素。 用户故事＃4：在#quote-box ，我可以看到一个具有相应id="new-quote"的可点击元素。 用户故事＃5：在#quote-box ，我可以看到一个可点击的具有相应id="tweet-quote"元素。 用户故事＃6：首次加载时，我的报价机器会在元素中显示一个id="text"的随机引号。 用户故事＃7：首次加载时，我的报价机器在id="author"的元素中显示随机引用的作者。 用户故事＃8：当单击#new-quote按钮时，我的报价机应该获取一个新报价并将其显示在#text元素中。 用户故事＃9：当单击#new-quote按钮并将其显示在#author元素中时，我的报价机器应该获取新报价的作者。 用户故事＃10：我可以点击#tweet-quote a元素来#tweet-quote 。这a元素应包括"twitter.com/intent/tweet"路径在它的href属性鸣叫当前报价。 用户故事＃11： #quote-box包装器元素应该水平居中。请使用浏览器的缩放级别100％和页面最大化运行测试。您可以通过分叉此CodePen笔来构建项目。或者您可以使用此CDN链接在您喜欢的任何环境中运行测试： https://cdn.freecodecamp.org/testable-projects-fcc/v1/bundle.js ： https://cdn.freecodecamp.org/testable-projects-fcc/v1/bundle.js完成后，将URL提交给您的工作通过所有测试的项目。如果卡住，请记住使用Read-Search-Ask方法。
+
+目标：在 CodePen.io 上实现一个功能类似 https://codepen.io/freeCodeCamp/full/qRZeGZ 的 App。 +在满足以下需求并能通过所有测试的前提下，你可以根据自己的喜好来美化你的 app。 +你可以使用 HTML、JavaScript、CSS、Bootstrap、SASS、React、Redux、jQuery 来完成这个挑战。但鉴于这个章节的学习内容与前端框架相关，推荐使用一款前端框架（比如 React）来完成这个挑战；不推荐你使用前面没有提到的技术，否则风险自负。我们有计划新增其他前端框架课程，例如 Angular 和 Vue，不过目前还没有这些内容。我们会接受并尽力处理你在使用建议的技术栈过程中遇到的问题。编码愉快！ +需求 1：我应该能看到一个具有id="quote-box"属性的包裹元素。 +需求 2：在#quote-box元素内，我应该能看到一个具有id="text"属性的元素。 +需求 3：在#quote-box元素内，我应该能看到一个具有id="author"属性的元素。 +需求 4：在#quote-box元素内，我应该能看到一个具有id="new-quote"属性的可点击元素。 +需求 5：在#quote-box元素内，我应该能看到一个具有id="tweet-quote"属性的可点击元素。 +需求 6：首次加载时，我的 App 应该在具有id="text"属性的元素内展示一条随机引语。 +需求 7：首次加载时，我的 App 应该在具有id="author"属性的元素内展示该条随机引语的作者。 +需求 8：当点击具有#new-quote属性的按钮时，我的 App 应该得到一条新的引语并在具有#text属性的元素内展示出来。 +需求 9：当点击具有#new-quote属性的按钮时，我的 App 应该得到新引语的作者并在具有#author属性的元素内展示出来。 +需求 10：我应该可以通过点击具有#tweet-quote属性的a标签将当前展示的引语发送推特。该a标签的href属性应该是"twitter.com/intent/tweet"以便成功发送。 +需求 11：具有#quote-box属性的包裹元素应该水平居中。请在浏览器缩放尺寸为 100% 且页面窗口最大化时运行测试。 +你可以 fork 这个 CodePen pen 项目来构建你的项目。或者你可以在任何你喜欢的环境中使用以下 CDN 链接来运行测试：https://gitcdn.link/repo/freeCodeCamp/testable-projects-fcc/master/build/bundle.js。 +一旦你完成了本项目并且该项目所有测试运行通过，请提交项目的 URL。 +
## Instructions -
+
+
## Tests @@ -36,4 +53,4 @@ tests: [] // solution required ``` -/section> +