fix(i18n): update Chinese translation of front end libraries projects (#38826)
This commit is contained in:
ZhichengChen
GitHub
@ -3,15 +3,29 @@ id: 587d7dbc367417b2b2512bae
|
||||
title: Build a Drum Machine
|
||||
isRequired: true
|
||||
challengeType: 3
|
||||
videoUrl: ''
|
||||
localeTitle: 建立鼓机
|
||||
forumTopicId: 301370
|
||||
localeTitle: 构建一台鼓式机器
|
||||
---
|
||||
|
||||
## Description
|
||||
<section id="description"> <strong>目标：</strong>构建一个功能类似于此的<a href="https://codepen.io" target="_blank">CodePen.io</a>应用程序： <a href="https://codepen.io/freeCodeCamp/full/MJyNMd" target="_blank">https</a> <strong>：</strong> <a href="https://codepen.io" target="_blank">//codepen.io/freeCodeCamp/full/MJyNMd</a> 。完成以下<a href="https://en.wikipedia.org/wiki/User_story" target="_blank">用户故事</a>并通过所有测试。给它你自己的个人风格。您可以使用HTML，JavaScript，CSS，Bootstrap，SASS，React，Redux和jQuery的任意组合来完成此项目。您应该使用前端框架（例如React），因为本节是关于学习前端框架的。不建议使用上面未列出的其他技术，使用它们的风险由您自行承担。我们正在寻求支持其他前端框架，如Angular和Vue，但目前不支持它们。我们将接受并尝试修复所有使用建议的技术堆栈的问题报告。快乐的编码！ <strong>用户故事＃1：</strong>我应该能够看到一个带有相应<code>id="drum-machine"</code>的外部容器，其中包含所有其他元素。 <strong>用户故事＃2：</strong>在<code>#drum-machine</code>我可以看到一个具有相应<code>id="display"</code>的元素。 <strong>用户故事＃3：</strong>在<code>#drum-machine</code>我可以看到9个可点击的鼓垫元素，每个鼓垫元素都有一个<code>drum-pad</code>的类名，一个唯一的id描述了鼓垫将被设置为触发的音频片段，以及一个内部与键盘上的以下键之一对应的文本：Q，W，E，A，S，D，Z，X，C。鼓垫必须按此顺序排列。 <strong>用户故事＃4：</strong>在每个<code>.drum-pad</code> ，应该有一个HTML5 <code>audio</code>其具有元件<code>src</code>指向音频剪辑，一个类名称属性<code>clip</code> ，以及对应于其父的内文本的ID <code>.drum-pad</code> （例如<code>id="Q"</code> ， <code>id="W"</code> ， <code>id="E"</code>等）。 <strong>用户故事＃5：</strong>当我点击<code>.drum-pad</code>元素时，应该触发其子<code>audio</code>元素中包含的音频剪辑。 <strong>用户故事＃6：</strong>当我按下与每个<code>.drum-pad</code>相关联的触发键时，应触发其子<code>audio</code>元素中包含的音频剪辑（例如，按下Q键应触发包含字符串“Q”的鼓垫，按下W键应触发包含字符串“W”等的鼓垫。 <strong>用户故事＃7：</strong>当触发<code>.drum-pad</code> ，描述相关音频剪辑的字符串将显示为<code>#display</code>元素的内部文本（每个字符串必须是唯一的）。您可以通过分叉<a href="http://codepen.io/freeCodeCamp/pen/MJjpwO" target="_blank">此CodePen笔</a>来构建项目。或者您可以使用此CDN链接在您喜欢的任何环境中运行测试： <code>https://cdn.freecodecamp.org/testable-projects-fcc/v1/bundle.js</code> ： <code>https://cdn.freecodecamp.org/testable-projects-fcc/v1/bundle.js</code>完成后，将URL提交给您的工作通过所有测试的项目。如果卡住，请记住使用<a href="https://forum.freecodecamp.org/t/how-to-get-help-when-you-are-stuck-coding/19514" target="_blank">Read-Search-Ask</a>方法。 </section>
|
||||
<section id='description'>
|
||||
<strong>目标：</strong>在 <a href='https://codepen.io' target='_blank'>CodePen.io</a> 上实现一个功能类似 <a href='https://codepen.io/freeCodeCamp/full/MJyNMd' target='_blank'>https://codepen.io/freeCodeCamp/full/MJyNMd</a> 的 App。
|
||||
在满足以下<a href='https://en.wikipedia.org/wiki/User_story' target='_blank'>需求</a>并能通过所有测试的前提下，你可以根据自己的喜好来美化你的 app。
|
||||
你可以使用 HTML、JavaScript、CSS、Bootstrap、SASS、React、Redux、jQuery 来完成这个挑战。但鉴于这个章节的学习内容与前端框架相关，推荐使用一款前端框架（比如 React）来完成这个挑战；不推荐你使用前面没有提到的技术，否则风险自负。我们有计划新增其他前端框架课程，例如 Angular 和 Vue，不过目前还没有这些内容。我们会接受并尽力处理你在使用建议的技术栈过程中遇到的问题。编码愉快！
|
||||
<strong>需求 1：</strong>我应该可以看到一个具有<code>id="drum-machine"</code>属性的外层容器，该容器包含了其他所有元素。
|
||||
<strong>需求 2：</strong>在具有<code>#drum-machine</code>属性的元素内，我应该能看到一个具有 <code>id="display"</code> 属性的元素。
|
||||
<strong>需求 3：</strong>在具有<code>#drum-machine</code>属性的元素内，我应该能看到 9 个可以点击的鼓垫元素，且每个鼓垫元素都应该有一个值为<code>drum-pad</code>的 class 属性。一个用于描述触发鼓垫音频片段的特殊 id，以及以下键值之一的文本内容：Q、W、E、A、S、D、Z、X、C。这些鼓垫必须按照以上顺序排列。
|
||||
<strong>需求 4：</strong>在每一个具有<code>.drum-pad</code>属性的元素内，应该有一个具有指向音频片段地址的<code>src</code>属性的 HTML5<code>audio</code>元素，一个值为<code>clip</code>的 class 属性，以及一个 id 属性，它的值应该是其父元素<code>.drum-pad</code>的文本内容（例如<code>id="Q"</code>、<code>id="W"</code>、<code>id="E"</code> 等等）。
|
||||
<strong>需求 5：</strong>当我点击一个具有<code>.drum-pad</code>属性的元素时，应该触发它的子元素<code>audio</code>包含的音频片段。
|
||||
<strong>需求 6：</strong>当我按下每一个<code>.drum-pad</code>元素的关联键时，应该触发其子元素<code>audio</code>包含的音频片段（例如：按下 Q 键应该触发包含字符串 "Q" 的鼓垫，按下 W 键应该触发包含字符串 "W" 的鼓垫等等）。
|
||||
<strong>需求 7：</strong>当触发一个具有<code>.drum-pad</code>属性的元素时，<code>#display</code>元素内应该展示这个触发元素关联音频片段的描述字符串（每一个字符串都应该是独一无二的）。
|
||||
你可以 fork <a href='http://codepen.io/freeCodeCamp/pen/MJjpwO' target='_blank'>这个 CodePen pen 项目</a> 来构建你的项目。或者你可以在任何你喜欢的环境中使用以下 CDN 链接来运行测试：<code>https://gitcdn.link/repo/freeCodeCamp/testable-projects-fcc/master/build/bundle.js</code>。
|
||||
一旦你完成了本项目并且该项目所有测试运行通过，请提交项目的 URL。
|
||||
</section>
|
||||
|
||||
## Instructions
|
||||
<section id="instructions">
|
||||
<section id='instructions'>
|
||||
|
||||
</section>
|
||||
|
||||
## Tests
|
||||
@ -36,4 +50,4 @@ tests: []
|
||||
// solution required
|
||||
```
|
||||
|
||||
/section>
|
||||
</section>
|
||||
|
||||
File diff suppressed because one or more lines are too long
@ -3,15 +3,29 @@ id: bd7157d8c242eddfaeb5bd13
|
||||
title: Build a Markdown Previewer
|
||||
isRequired: true
|
||||
challengeType: 3
|
||||
videoUrl: ''
|
||||
localeTitle: 构建Markdown预览器
|
||||
forumTopicId: 301372
|
||||
localeTitle: 构建一个 Markdown 文件预览器
|
||||
---
|
||||
|
||||
## Description
|
||||
<section id="description"> <strong>目标：</strong>构建一个功能类似于此的<a href="https://codepen.io" target="_blank">CodePen.io</a>应用程序： <a href="https://codepen.io/freeCodeCamp/full/GrZVVO" target="_blank">https</a> <strong>：</strong> <a href="https://codepen.io" target="_blank">//codepen.io/freeCodeCamp/full/GrZVVO</a> 。完成以下<a href="https://en.wikipedia.org/wiki/User_story" target="_blank">用户故事</a>并通过所有测试。给它你自己的个人风格。您可以使用HTML，JavaScript，CSS，Bootstrap，SASS，React，Redux和jQuery的任意组合来完成此项目。您应该使用前端框架（例如React），因为本节是关于学习前端框架的。不建议使用上面未列出的其他技术，使用它们的风险由您自行承担。我们正在寻求支持其他前端框架，如Angular和Vue，但目前不支持它们。我们将接受并尝试修复所有使用建议的技术堆栈的问题报告。快乐的编码！ <strong>用户故事＃1：</strong>我可以看到一个带有相应<code>id="editor"</code>的<code>textarea</code>元素。 <strong>用户故事＃2：</strong>我可以看到一个具有相应<code>id="preview"</code>的元素。 <strong>用户故事＃3：</strong>当我文本输入到<code>#editor</code>元件，所述<code>#preview</code>如I型显示textarea的内容元素被更新。 <strong>用户故事＃4：</strong>当我在<code>#editor</code>元素中输入GitHub风格的markdown时，文本在我输入的<code>#preview</code>元素中呈现为HTML（提示：您不需要自己解析Markdown - 您可以导入Marked库为此： <a href="https://cdnjs.com/libraries/marked" target="_blank">https</a> ： <a href="https://cdnjs.com/libraries/marked" target="_blank">//cdnjs.com/libraries/marked</a> ）。 <strong>用户故事＃5：</strong>当我的降价预览器首次加载时， <strong>＃</strong> <code>#editor</code>字段中的默认文本应包含有效的markdown，它至少代表以下每个元素之一：标题（H1大小），子标题（H2大小） ，链接，内联代码，代码块，列表项，块引用，图像和粗体文本。 <strong>用户故事＃6：</strong>首次加载我的降价预览器时， <strong>＃</strong> <code>#editor</code>字段中的默认降价应该在<code>#preview</code>元素中呈现为HTML。 <strong>可选的奖励（您不需要进行此测试通过）：</strong>我的降价预览器解释回车并将它们呈现为<code>br</code> （换行符）元素。您可以通过分叉<a href="http://codepen.io/freeCodeCamp/pen/MJjpwO" target="_blank">此CodePen笔</a>来构建项目。或者您可以使用此CDN链接在您喜欢的任何环境中运行测试： <code>https://cdn.freecodecamp.org/testable-projects-fcc/v1/bundle.js</code> ： <code>https://cdn.freecodecamp.org/testable-projects-fcc/v1/bundle.js</code>完成后，将URL提交给您的工作通过所有测试的项目。如果卡住，请记住使用<a href="https://forum.freecodecamp.org/t/how-to-get-help-when-you-are-stuck-coding/19514" target="_blank">Read-Search-Ask</a>方法。 </section>
|
||||
<section id='description'>
|
||||
<strong>目标：</strong>在 <a href='https://codepen.io' target='_blank'>CodePen.io</a> 上实现一个功能类似 <a href='https://codepen.io/freeCodeCamp/full/GrZVVO' target='_blank'>https://codepen.io/freeCodeCamp/full/GrZVVO</a> 的 App。
|
||||
在满足以下<a href='https://en.wikipedia.org/wiki/User_story' target='_blank'>需求</a>并能通过所有测试的前提下，你可以根据自己的喜好来美化你的 app。
|
||||
你可以使用 HTML、JavaScript、CSS、Bootstrap、SASS、React、Redux、jQuery 来完成这个挑战。但鉴于这个章节的学习内容与前端框架相关，推荐使用一款前端框架（比如 React）来完成这个挑战；不推荐你使用前面没有提到的技术，否则风险自负。我们有计划新增其他前端框架课程，例如 Angular 和 Vue，不过目前还没有这些内容。我们会接受并尽力处理你在使用建议的技术栈过程中遇到的问题。编码愉快！
|
||||
<strong>需求 1：</strong>我应该能看到一个具有<code>id="editor"</code>属性的<code>textarea</code>元素。
|
||||
<strong>需求 2：</strong>我应该能看到一个具有<code>id="preview"</code>属性的元素。
|
||||
<strong>需求 3：</strong>当我在具有<code>#editor</code>属性的元素内输入文本时，具有<code>#preview</code>属性的元素应该同步更新展示我键入的内容。
|
||||
<strong>需求 4：</strong>当我在具有<code>#editor</code>属性的元素内输入 Github 风格的 Markdown 内容时，文本应该以 HTML 的形式，把我所键入的内容渲染在具有<code>#preview</code>属性的元素中（提示：你不需要自己解析 Markdown——你可以引入一个叫做 Marked 的库来完成这项工作：<a href='https://cdnjs.com/libraries/marked' target='_blank'>https://cdnjs.com/libraries/marked</a>）。
|
||||
<strong>需求 5：</strong>当我的 Markdown 预览器首次加载时，具有<code>#editor</code>属性的元素内的默认内容应该包含以下每个种类的至少一段有效的 Markdown 代码：标题（H1 标签）、次级标题（H2 标签）、链接、行内代码、代码块、列表、引用块、图片、加粗文本。
|
||||
<strong>需求 6：</strong>当我的 Markdown 预览器首次加载时，具有<code>#editor</code>属性的元素内容应该以 HTML 的形式渲染在具有<code>#preview</code>属性的元素中。
|
||||
<strong>可选需求（你无需通过这项测试）：</strong>我的 Markdown 预览器能够解析回车符并且将他们以<code>br</code>（换行）元素的形式渲染出来。
|
||||
你可以 fork <a href='http://codepen.io/freeCodeCamp/pen/MJjpwO' target='_blank'>这个 CodePen pen 项目</a> 来构建你的项目。或者你可以在任何你喜欢的环境中使用以下 CDN 链接来运行测试：<code>https://gitcdn.link/repo/freeCodeCamp/testable-projects-fcc/master/build/bundle.js</code>。
|
||||
一旦你完成了本项目并且该项目所有测试运行通过，请提交项目的 URL。
|
||||
</section>
|
||||
|
||||
## Instructions
|
||||
<section id="instructions">
|
||||
<section id='instructions'>
|
||||
|
||||
</section>
|
||||
|
||||
## Tests
|
||||
@ -36,4 +50,4 @@ tests: []
|
||||
// solution required
|
||||
```
|
||||
|
||||
/section>
|
||||
</section>
|
||||
|
||||
File diff suppressed because one or more lines are too long
@ -3,15 +3,32 @@ id: bd7158d8c442eddfaeb5bd13
|
||||
title: Build a Random Quote Machine
|
||||
isRequired: true
|
||||
challengeType: 3
|
||||
videoUrl: ''
|
||||
localeTitle: 建立一个随机报价机
|
||||
localeTitle: 构建一个随机引语生成器
|
||||
---
|
||||
|
||||
## Description
|
||||
<section id="description"> <strong>目标：</strong>构建一个功能类似于此的<a href="https://codepen.io" target="_blank">CodePen.io</a>应用程序： <a href="https://codepen.io/freeCodeCamp/full/qRZeGZ" target="_blank">https</a> <strong>：</strong> <a href="https://codepen.io" target="_blank">//codepen.io/freeCodeCamp/full/qRZeGZ</a> 。完成以下<a href="https://en.wikipedia.org/wiki/User_story" target="_blank">用户故事</a>并通过所有测试。给它你自己的个人风格。您可以使用HTML，JavaScript，CSS，Bootstrap，SASS，React，Redux和jQuery的任意组合来完成此项目。您应该使用前端框架（例如React），因为本节是关于学习前端框架的。不建议使用上面未列出的其他技术，使用它们的风险由您自行承担。我们正在寻求支持其他前端框架，如Angular和Vue，但目前不支持它们。我们将接受并尝试修复所有使用建议的技术堆栈的问题报告。快乐的编码！ <strong>用户故事＃1：</strong>我可以看到一个包含相应<code>id="quote-box"</code>的包装元素。 <strong>用户故事＃2：</strong>在<code>#quote-box</code> ，我可以看到一个具有相应<code>id="text"</code>的元素。 <strong>用户故事＃3：</strong>在<code>#quote-box</code> ，我可以看到一个具有相应<code>id="author"</code>的元素。 <strong>用户故事＃4：</strong>在<code>#quote-box</code> ，我可以看到一个具有相应<code>id="new-quote"</code>的可点击元素。 <strong>用户故事＃5：</strong>在<code>#quote-box</code> ，我可以看到一个可点击的<codea< code="">具有相应<code>id="tweet-quote"</code>元素。 <strong>用户故事＃6：</strong>首次加载时，我的报价机器会在元素中显示一个<code>id="text"</code>的随机引号。 <strong>用户故事＃7：</strong>首次加载时，我的报价机器在<code>id="author"</code>的元素中显示随机引用的作者。 <strong>用户故事＃8：</strong>当单击<code>#new-quote</code>按钮时，我的报价机应该获取一个新报价并将其显示在<code>#text</code>元素中。 <strong>用户故事＃9：</strong>当单击<code>#new-quote</code>按钮并将其显示在<code>#author</code>元素中时，我的报价机器应该获取新报价的作者。 <strong>用户故事＃10：</strong>我可以点击<code>#tweet-quote</code> <code>a</code>元素来<code>#tweet-quote</code> 。这<code>a</code>元素应包括<code>"twitter.com/intent/tweet"</code>路径在它的<code>href</code>属性鸣叫当前报价。 <strong>用户故事＃11：</strong> <code>#quote-box</code>包装器元素应该水平居中。请使用浏览器的缩放级别100％和页面最大化运行测试。您可以通过分叉<a href="http://codepen.io/freeCodeCamp/pen/MJjpwO" target="_blank">此CodePen笔</a>来构建项目。或者您可以使用此CDN链接在您喜欢的任何环境中运行测试： <code>https://cdn.freecodecamp.org/testable-projects-fcc/v1/bundle.js</code> ： <code>https://cdn.freecodecamp.org/testable-projects-fcc/v1/bundle.js</code>完成后，将URL提交给您的工作通过所有测试的项目。如果卡住，请记住使用<a href="https://forum.freecodecamp.org/t/how-to-get-help-when-you-are-stuck-coding/19514" target="_blank">Read-Search-Ask</a>方法。 </codea<></section>
|
||||
<section id='description'>
|
||||
<strong>目标：</strong>在 <a href='https://codepen.io' target='_blank'>CodePen.io</a> 上实现一个功能类似 <a href='https://codepen.io/freeCodeCamp/full/qRZeGZ' target='_blank'>https://codepen.io/freeCodeCamp/full/qRZeGZ</a> 的 App。
|
||||
在满足以下<a href='https://en.wikipedia.org/wiki/User_story' target='_blank'>需求</a>并能通过所有测试的前提下，你可以根据自己的喜好来美化你的 app。
|
||||
你可以使用 HTML、JavaScript、CSS、Bootstrap、SASS、React、Redux、jQuery 来完成这个挑战。但鉴于这个章节的学习内容与前端框架相关，推荐使用一款前端框架（比如 React）来完成这个挑战；不推荐你使用前面没有提到的技术，否则风险自负。我们有计划新增其他前端框架课程，例如 Angular 和 Vue，不过目前还没有这些内容。我们会接受并尽力处理你在使用建议的技术栈过程中遇到的问题。编码愉快！
|
||||
<strong>需求 1：</strong>我应该能看到一个具有<code>id="quote-box"</code>属性的包裹元素。
|
||||
<strong>需求 2：</strong>在<code>#quote-box</code>元素内，我应该能看到一个具有<code>id="text"</code>属性的元素。
|
||||
<strong>需求 3：</strong>在<code>#quote-box</code>元素内，我应该能看到一个具有<code>id="author"</code>属性的元素。
|
||||
<strong>需求 4：</strong>在<code>#quote-box</code>元素内，我应该能看到一个具有<code>id="new-quote"</code>属性的可点击元素。
|
||||
<strong>需求 5：</strong>在<code>#quote-box</code>元素内，我应该能看到一个具有<code>id="tweet-quote"</code>属性的可点击元素。
|
||||
<strong>需求 6：</strong>首次加载时，我的 App 应该在具有<code>id="text"</code>属性的元素内展示一条随机引语。
|
||||
<strong>需求 7：</strong>首次加载时，我的 App 应该在具有<code>id="author"</code>属性的元素内展示该条随机引语的作者。
|
||||
<strong>需求 8：</strong>当点击具有<code>#new-quote</code>属性的按钮时，我的 App 应该得到一条新的引语并在具有<code>#text</code>属性的元素内展示出来。
|
||||
<strong>需求 9：</strong>当点击具有<code>#new-quote</code>属性的按钮时，我的 App 应该得到新引语的作者并在具有<code>#author</code>属性的元素内展示出来。
|
||||
<strong>需求 10：</strong>我应该可以通过点击具有<code>#tweet-quote</code>属性的<code>a</code>标签将当前展示的引语发送推特。该<code>a</code>标签的<code>href</code>属性应该是<code>"twitter.com/intent/tweet"</code>以便成功发送。
|
||||
<strong>需求 11：</strong>具有<code>#quote-box</code>属性的包裹元素应该水平居中。请在浏览器缩放尺寸为 100% 且页面窗口最大化时运行测试。
|
||||
你可以 fork <a href='http://codepen.io/freeCodeCamp/pen/MJjpwO' target='_blank'>这个 CodePen pen 项目</a>来构建你的项目。或者你可以在任何你喜欢的环境中使用以下 CDN 链接来运行测试：<code>https://gitcdn.link/repo/freeCodeCamp/testable-projects-fcc/master/build/bundle.js</code>。
|
||||
一旦你完成了本项目并且该项目所有测试运行通过，请提交项目的 URL。
|
||||
</section>
|
||||
|
||||
## Instructions
|
||||
<section id="instructions">
|
||||
<section id='instructions'>
|
||||
|
||||
</section>
|
||||
|
||||
## Tests
|
||||
@ -36,4 +53,4 @@ tests: []
|
||||
// solution required
|
||||
```
|
||||
|
||||
/section>
|
||||
</section>
|
||||
|
||||
Reference in New Issue
Block a user