chore(i8n,learn): processed translations
This commit is contained in:
committed by
Mrugesh Mohapatra
parent
15047f2d90
commit
e5c44a3ae5
@@ -1,6 +1,6 @@
|
||||
---
|
||||
id: bd7158d8c442eddfaeb5bd0f
|
||||
title: 构建一个番茄时钟
|
||||
title: Build a 25 + 5 Clock
|
||||
challengeType: 3
|
||||
forumTopicId: 301373
|
||||
dashedName: build-a-25--5-clock
|
||||
@@ -8,71 +8,71 @@ dashedName: build-a-25--5-clock
|
||||
|
||||
# --description--
|
||||
|
||||
**目标:** 在 [CodePen.io](https://codepen.io) 上实现一个功能类似 <https://codepen.io/freeCodeCamp/full/XpKrrW> 的 App。
|
||||
**Objective:** Build a [CodePen.io](https://codepen.io) app that is functionally similar to this: <https://codepen.io/freeCodeCamp/full/XpKrrW>.
|
||||
|
||||
在满足以下[需求](https://en.wikipedia.org/wiki/User_story)并能通过所有测试的前提下,你可以根据自己的喜好来美化你的 app。
|
||||
Fulfill the below [user stories](https://en.wikipedia.org/wiki/User_story) and get all of the tests to pass. Give it your own personal style.
|
||||
|
||||
你可以使用 HTML、JavaScript、CSS、Bootstrap、SASS、React、Redux、jQuery 来完成这个挑战。但鉴于这个章节的学习内容与前端框架相关,推荐使用一款前端框架(比如 React)来完成这个挑战;不推荐你使用前面没有提到的技术,否则风险自负。我们有计划新增其他前端框架课程,例如 Angular 和 Vue,不过目前还没有这些内容。我们会接受并尽力处理你在使用建议的技术栈过程中遇到的问题。编码愉快!
|
||||
You can use any mix of HTML, JavaScript, CSS, Bootstrap, SASS, React, Redux, and jQuery to complete this project. You should use a frontend framework (like React for example) because this section is about learning frontend frameworks. Additional technologies not listed above are not recommended and using them is at your own risk. We are looking at supporting other frontend frameworks like Angular and Vue, but they are not currently supported. We will accept and try to fix all issue reports that use the suggested technology stack for this project. Happy coding!
|
||||
|
||||
**需求 1:** 我应该能看到一个具有`id="break-label"`属性的元素,这个元素的内容应该是一个字符串(例如:"Break Length")。
|
||||
**User Story #1:** I can see an element with `id="break-label"` that contains a string (e.g. "Break Length").
|
||||
|
||||
**需求 2:** 我应该能看到一个具有`id="session-label"`属性的元素,这个元素的内容应该是一个字符串(例如:"Session Length")。
|
||||
**User Story #2:** I can see an element with `id="session-label"` that contains a string (e.g. "Session Length").
|
||||
|
||||
**需求 3:** 我应该能看到两个可以点击的元素,他们分别具有如下 id:`id="break-decrement"`和`id="session-decrement"`。
|
||||
**User Story #3:** I can see two clickable elements with corresponding IDs: `id="break-decrement"` and `id="session-decrement"`.
|
||||
|
||||
**需求 4:** 我应该能看到两个可以点击的元素,他们分别具有如下 id:`id="break-increment"`和`id="session-increment"`。
|
||||
**User Story #4:** I can see two clickable elements with corresponding IDs: `id="break-increment"` and `id="session-increment"`.
|
||||
|
||||
**需求 5:** 我应该能看到一个具有`id="break-length"`属性的元素,这个元素默认展示数值应该为 5(加载后)。
|
||||
**User Story #5:** I can see an element with a corresponding `id="break-length"`, which by default (on load) displays a value of 5.
|
||||
|
||||
**需求 6:** 我应该能看到一个具有`id="session-length"`属性的元素,这个元素默认展示数值应该为 25(加载后)。
|
||||
**User Story #6:** I can see an element with a corresponding `id="session-length"`, which by default displays a value of 25.
|
||||
|
||||
**需求 7:** 我应该能看到一个具有`id="timer-label"`属性的元素,这个元素包含一个表示当前状态的字符串(例如:"Session")。
|
||||
**User Story #7:** I can see an element with a corresponding `id="timer-label"`, that contains a string indicating a session is initialized (e.g. "Session").
|
||||
|
||||
**需求 8:** 我应该能看到一个具有`id="time-left"`属性的元素。注意:暂停或者运行时,该元素的内容应始终以`mm:ss`格式显示(如 25:00)。
|
||||
**User Story #8:** I can see an element with corresponding `id="time-left"`. NOTE: Paused or running, the value in this field should always be displayed in `mm:ss` format (i.e. 25:00).
|
||||
|
||||
**需求 9:** 我应该能看到一个具有`id="start_stop"`属性的可点击的元素。
|
||||
**User Story #9:** I can see a clickable element with a corresponding `id="start_stop"`.
|
||||
|
||||
**需求 10:** 我应该能看到一个具有`id="reset"`属性的可点击的元素。
|
||||
**User Story #10:** I can see a clickable element with a corresponding `id="reset"`.
|
||||
|
||||
**需求 11:** 当我点击 id 属性为`reset`的元素时,应该停止任何运行中的计时器,`id="break-length"`元素中的值应该重新回到`5`,`id="session-length"`元素中的值应该重新回到 25,且`id="time-left"`元素应该重置为默认状态。
|
||||
**User Story #11:** When I click the element with the id of `reset`, any running timer should be stopped, the value within `id="break-length"` should return to `5`, the value within `id="session-length"` should return to 25, and the element with `id="time-left"` should reset to it's default state.
|
||||
|
||||
**需求 12:** 当我点击 id 属性为`break-decrement`的元素时,`id="break-length"`元素的值应该减去 1,且我应该能看到更新后的值。
|
||||
**User Story #12:** When I click the element with the id of `break-decrement`, the value within `id="break-length"` decrements by a value of 1, and I can see the updated value.
|
||||
|
||||
**需求 13:** 当我点击 id 属性为`break-increment` 的元素时,`id="break-length"`元素的值应该增加 1,且我应该能看到更新后的值。
|
||||
**User Story #13:** When I click the element with the id of `break-increment`, the value within `id="break-length"` increments by a value of 1, and I can see the updated value.
|
||||
|
||||
**需求 14:** 当我点击 id 属性为`session-decrement` 的元素时,`id="session-length"`元素的值应该减去 1,且我应该能看到更新后的值。
|
||||
**User Story #14:** When I click the element with the id of `session-decrement`, the value within `id="session-length"` decrements by a value of 1, and I can see the updated value.
|
||||
|
||||
**需求 15:** 当我点击 id 属性为`session-increment` 的元素时,`id="session-length"`元素的值应该增加 1,且我应该能看到更新后的值。
|
||||
**User Story #15:** When I click the element with the id of `session-increment`, the value within `id="session-length"` increments by a value of 1, and I can see the updated value.
|
||||
|
||||
**需求 16:** 工作或者休息长度不应该可以设置为 <= 0 的值。
|
||||
**User Story #16:** I should not be able to set a session or break length to <= 0.
|
||||
|
||||
**需求 17:** 工作或者休息长度比应该可以设置为 > 60 的值。
|
||||
**User Story #17:** I should not be able to set a session or break length to > 60.
|
||||
|
||||
**需求 18:** 当我首次点击具有`id="start_stop"`属性的元素时,计时器应该根据`id="session-length"`元素当前显示的值开始运行,即使该值已从原始值 25 递增过或递减过。
|
||||
**User Story #18:** When I first click the element with `id="start_stop"`, the timer should begin running from the value currently displayed in `id="session-length"`, even if the value has been incremented or decremented from the original value of 25.
|
||||
|
||||
**需求 19:** 如果计时器正在运行,id 属性为`time-left`的元素应该以`mm:ss`的格式展示剩余的时间(按1递减并且每秒更新一次显示的值)。
|
||||
**User Story #19:** If the timer is running, the element with the id of `time-left` should display the remaining time in `mm:ss` format (decrementing by a value of 1 and updating the display every 1000ms).
|
||||
|
||||
**需求 20:** 如果计时器正在运行,当我点击`id="start_stop"`元素时,倒计时应该暂停。
|
||||
**User Story #20:** If the timer is running and I click the element with `id="start_stop"`, the countdown should pause.
|
||||
|
||||
**需求 21:** 如果计时器已经暂停,当我点击`id="start_stop"`元素时,倒计时应该从暂停的时间点恢复运行。
|
||||
**User Story #21:** If the timer is paused and I click the element with `id="start_stop"`, the countdown should resume running from the point at which it was paused.
|
||||
|
||||
**需求 22:** 当一个工作倒计时结束(注意:计时器必须达到00:00),并且新的倒计时开始运行时,id 属性为`timer-label`的元素应该显示一个表示已经开始休息的字符串。
|
||||
**User Story #22:** When a session countdown reaches zero (NOTE: timer MUST reach 00:00), and a new countdown begins, the element with the id of `timer-label` should display a string indicating a break has begun.
|
||||
|
||||
**需求 23:** 当一个工作倒计时结束(注意:计时器必须达到00:00),应该开始一个新的休息倒计时,时间应该从`id="break-length"`元素中当前显示的值开始计算。
|
||||
**User Story #23:** When a session countdown reaches zero (NOTE: timer MUST reach 00:00), a new break countdown should begin, counting down from the value currently displayed in the `id="break-length"` element.
|
||||
|
||||
**需求 24:** 当一个休息倒计时结束(注意:计时器必须达到00:00),并且新的倒计时开始运行时,id 属性为`timer-label`的元素应该显示一个表示已经开始工作的字符串。
|
||||
**User Story #24:** When a break countdown reaches zero (NOTE: timer MUST reach 00:00), and a new countdown begins, the element with the id of `timer-label` should display a string indicating a session has begun.
|
||||
|
||||
**需求 25:** 当一个休息倒计时结束(注意:计时器必须达到00:00),应该开始一个新的工作倒计时,时间应该从`id="session-length"`元素中当前显示的值开始计算。
|
||||
**User Story #25:** When a break countdown reaches zero (NOTE: timer MUST reach 00:00), a new session countdown should begin, counting down from the value currently displayed in the `id="session-length"` element.
|
||||
|
||||
**需求 26:** 当一个倒计时结束(注意:计时器必须达到00:00),应该播放一个表示时间到了的声音提示。这个提示音应该使用 HTML5 的`audio`标签并有一个`id="beep"`属性。
|
||||
**User Story #26:** When a countdown reaches zero (NOTE: timer MUST reach 00:00), a sound indicating that time is up should play. This should utilize an HTML5 `audio` tag and have a corresponding `id="beep"`.
|
||||
|
||||
**需求 27:** 具有`id="beep"`属性的音频元素时长应该至少有一秒。
|
||||
**User Story #27:** The audio element with `id="beep"` must be 1 second or longer.
|
||||
|
||||
**需求 28:** 当点击 id 属性为`reset`的元素时,id 属性为`beep`的音频元素必须停止播放并回到开头。
|
||||
**User Story #28:** The audio element with id of `beep` must stop playing and be rewound to the beginning when the element with the id of `reset` is clicked.
|
||||
|
||||
你可以 fork [这个 CodePen pen 项目](http://codepen.io/freeCodeCamp/pen/MJjpwO) 来构建你的项目。 或者你可以在任何你喜欢的环境中使用以下 CDN 链接来运行测试: `https://gitcdn.link/repo/freeCodeCamp/testable-projects-fcc/master/build/bundle.js`
|
||||
You can build your project by forking [this CodePen pen](https://codepen.io/freeCodeCamp/pen/MJjpwO). Or you can use this CDN link to run the tests in any environment you like: `https://cdn.freecodecamp.org/testable-projects-fcc/v1/bundle.js`
|
||||
|
||||
一旦你完成了本项目并且该项目所有测试运行通过, 请提交项目的 URL。
|
||||
Once you're done, submit the URL to your working project with all its tests passing.
|
||||
|
||||
# --solutions--
|
||||
|
||||
|
||||
@@ -1,6 +1,6 @@
|
||||
---
|
||||
id: 587d7dbc367417b2b2512bae
|
||||
title: 构建一台鼓式机器
|
||||
title: Build a Drum Machine
|
||||
challengeType: 3
|
||||
forumTopicId: 301370
|
||||
dashedName: build-a-drum-machine
|
||||
@@ -8,29 +8,29 @@ dashedName: build-a-drum-machine
|
||||
|
||||
# --description--
|
||||
|
||||
**目标:** 在 [CodePen.io](https://codepen.io) 上实现一个功能类似 <https://codepen.io/freeCodeCamp/full/MJyNMd> 的 App。
|
||||
**Objective:** Build a [CodePen.io](https://codepen.io) app that is functionally similar to this: <https://codepen.io/freeCodeCamp/full/MJyNMd>.
|
||||
|
||||
在满足以下[需求](https://en.wikipedia.org/wiki/User_story)并能通过所有测试的前提下,你可以根据自己的喜好来美化你的 app。
|
||||
Fulfill the below [user stories](https://en.wikipedia.org/wiki/User_story) and get all of the tests to pass. Give it your own personal style.
|
||||
|
||||
你可以使用 HTML、JavaScript、CSS、Bootstrap、SASS、React、Redux、jQuery 来完成这个挑战。但鉴于这个章节的学习内容与前端框架相关,推荐使用一款前端框架(比如 React)来完成这个挑战;不推荐你使用前面没有提到的技术,否则风险自负。我们有计划新增其他前端框架课程,例如 Angular 和 Vue,不过目前还没有这些内容。我们会接受并尽力处理你在使用建议的技术栈过程中遇到的问题。编码愉快!
|
||||
You can use any mix of HTML, JavaScript, CSS, Bootstrap, SASS, React, Redux, and jQuery to complete this project. You should use a frontend framework (like React for example) because this section is about learning frontend frameworks. Additional technologies not listed above are not recommended and using them is at your own risk. We are looking at supporting other frontend frameworks like Angular and Vue, but they are not currently supported. We will accept and try to fix all issue reports that use the suggested technology stack for this project. Happy coding!
|
||||
|
||||
**需求 1:** 我应该可以看到一个具有`id="drum-machine"`属性的外层容器,该容器包含了其他所有元素。
|
||||
**User Story #1:** I should be able to see an outer container with a corresponding `id="drum-machine"` that contains all other elements.
|
||||
|
||||
**需求 2:** 在具有`#drum-machine`属性的元素内,我应该能看到一个具有 `id="display"` 属性的元素。
|
||||
**User Story #2:** Within `#drum-machine` I can see an element with a corresponding `id="display"`.
|
||||
|
||||
**需求 3:** 在具有`#drum-machine`属性的元素内,我应该能看到 9 个可以点击的鼓垫元素,且每个鼓垫元素都应该有一个值为`drum-pad`的 class 属性。一个用于描述触发鼓垫音频片段的特殊 id,以及以下键值之一的文本内容:Q、W、E、A、S、D、Z、X、C。这些鼓垫必须按照以上顺序排列。
|
||||
**User Story #3:** Within `#drum-machine` I can see 9 clickable drum pad elements, each with a class name of `drum-pad`, a unique id that describes the audio clip the drum pad will be set up to trigger, and an inner text that corresponds to one of the following keys on the keyboard: Q, W, E, A, S, D, Z, X, C. The drum pads MUST be in this order.
|
||||
|
||||
**需求 4:** 在每一个具有`.drum-pad`属性的元素内,应该有一个具有指向音频片段地址的`src`属性的 HTML5`audio`元素,一个值为`clip`的 class 属性,以及一个 id 属性,它的值应该是其父元素`.drum-pad`的文本内容(例如`id="Q"`、`id="W"`、`id="E"` 等等)。
|
||||
**User Story #4:** Within each `.drum-pad`, there should be an HTML5 `audio` element which has a `src` attribute pointing to an audio clip, a class name of `clip`, and an id corresponding to the inner text of its parent `.drum-pad` (e.g. `id="Q"`, `id="W"`, `id="E"` etc.).
|
||||
|
||||
**需求 5:** 当我点击一个具有`.drum-pad`属性的元素时,应该触发它的子元素`audio`包含的音频片段。
|
||||
**User Story #5:** When I click on a `.drum-pad` element, the audio clip contained in its child `audio` element should be triggered.
|
||||
|
||||
**需求 6:** 当我按下每一个`.drum-pad`元素的关联键时,应该触发其子元素`audio`包含的音频片段(例如:按下 Q 键应该触发包含字符串 "Q" 的鼓垫,按下 W 键应该触发包含字符串 "W" 的鼓垫等等)。
|
||||
**User Story #6:** When I press the trigger key associated with each `.drum-pad`, the audio clip contained in its child `audio` element should be triggered (e.g. pressing the Q key should trigger the drum pad which contains the string "Q", pressing the W key should trigger the drum pad which contains the string "W", etc.).
|
||||
|
||||
**需求 7:** 当触发一个具有`.drum-pad`属性的元素时,`#display`元素内应该展示这个触发元素关联音频片段的描述字符串(每一个字符串都应该是独一无二的)。
|
||||
**User Story #7:** When a `.drum-pad` is triggered, a string describing the associated audio clip is displayed as the inner text of the `#display` element (each string must be unique).
|
||||
|
||||
你可以 fork [这个 CodePen pen 项目](http://codepen.io/freeCodeCamp/pen/MJjpwO) 来构建你的项目。或者你可以在任何你喜欢的环境中使用以下 CDN 链接来运行测试:`https://cdn.freecodecamp.org/testable-projects-fcc/v1/bundle.js`。
|
||||
You can build your project by forking [this CodePen pen](https://codepen.io/freeCodeCamp/pen/MJjpwO). Or you can use this CDN link to run the tests in any environment you like: `https://cdn.freecodecamp.org/testable-projects-fcc/v1/bundle.js`
|
||||
|
||||
一旦你完成了本项目并且该项目所有测试运行通过,请提交项目的 URL。
|
||||
Once you're done, submit the URL to your working project with all its tests passing.
|
||||
|
||||
# --solutions--
|
||||
|
||||
|
||||
@@ -1,6 +1,6 @@
|
||||
---
|
||||
id: bd7158d8c442eddfaeb5bd17
|
||||
title: 构建一个 JavaScript 计算器
|
||||
title: Build a JavaScript Calculator
|
||||
challengeType: 3
|
||||
forumTopicId: 301371
|
||||
dashedName: build-a-javascript-calculator
|
||||
@@ -8,52 +8,52 @@ dashedName: build-a-javascript-calculator
|
||||
|
||||
# --description--
|
||||
|
||||
**目标:** 在 [CodePen.io](https://codepen.io) 上实现一个功能类似 <https://codepen.io/freeCodeCamp/full/wgGVVX> 的 App。
|
||||
**Objective:** Build a [CodePen.io](https://codepen.io) app that is functionally similar to this: <https://codepen.io/freeCodeCamp/full/wgGVVX>.
|
||||
|
||||
在满足以下[需求](https://en.wikipedia.org/wiki/User_story)并能通过所有测试的前提下,你可以根据自己的喜好来美化你的 app。
|
||||
Fulfill the below [user stories](https://en.wikipedia.org/wiki/User_story) and get all of the tests to pass. Give it your own personal style.
|
||||
|
||||
你可以使用 HTML、JavaScript、CSS、Bootstrap、SASS、React、Redux、jQuery 来完成这个挑战。但鉴于这个章节的学习内容与前端框架相关,推荐使用一款前端框架(比如 React)来完成这个挑战;不推荐你使用前面没有提到的技术,否则风险自负。我们有计划新增其他前端框架课程,例如 Angular 和 Vue,不过目前还没有这些内容。我们会接受并尽力处理你在使用建议的技术栈过程中遇到的问题。编码愉快!
|
||||
You can use any mix of HTML, JavaScript, CSS, Bootstrap, SASS, React, Redux, and jQuery to complete this project. You should use a frontend framework (like React for example) because this section is about learning frontend frameworks. Additional technologies not listed above are not recommended and using them is at your own risk. We are looking at supporting other frontend frameworks like Angular and Vue, but they are not currently supported. We will accept and try to fix all issue reports that use the suggested technology stack for this project. Happy coding!
|
||||
|
||||
**需求 1:** 我的计算器应该包含一个具有`id="equals"`属性的可以点击的元素,元素的文本内容为`=`(等于符号)。
|
||||
**User Story #1:** My calculator should contain a clickable element containing an `=` (equal sign) with a corresponding `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"`。
|
||||
**User Story #2:** My calculator should contain 10 clickable elements containing one number each from 0-9, with the following corresponding IDs: `id="zero"`, `id="one"`, `id="two"`, `id="three"`, `id="four"`, `id="five"`, `id="six"`, `id="seven"`, `id="eight"`, and `id="nine"`.
|
||||
|
||||
**需求 3:** 我的计算器应该包含四个可以点击的元素,文本内容对应4个主要数学运算符,且应具有如下 id 属性: `id="add"`, `id="subtract"`, `id="multiply"`, `id="divide"`。
|
||||
**User Story #3:** My calculator should contain 4 clickable elements each containing one of the 4 primary mathematical operators with the following corresponding IDs: `id="add"`, `id="subtract"`, `id="multiply"`, `id="divide"`.
|
||||
|
||||
**需求 4:** 计算器应该包含一个可点击的 `.`(小数点)符号,对应的`id="decimal"`。
|
||||
**User Story #4:** My calculator should contain a clickable element containing a `.` (decimal point) symbol with a corresponding `id="decimal"`.
|
||||
|
||||
**需求 5:** 我的计算器应该包含一个具有`id="clear"`属性的可以点击的元素。
|
||||
**User Story #5:** My calculator should contain a clickable element with an `id="clear"`.
|
||||
|
||||
**需求 6:** 我的计算器应该包含一个用于展示数值的元素,这个元素具有`id="display"`属性。
|
||||
**User Story #6:** My calculator should contain an element to display values with a corresponding `id="display"`.
|
||||
|
||||
**需求 7:** 在任何时候按下清除键,都会清空输入和输出的数值并且使计算器回到初始状态;此时在 id 为`display`的元素中应该显示数字 0。
|
||||
**User Story #7:** At any time, pressing the clear button clears the input and output values, and returns the calculator to its initialized state; 0 should be shown in the element with the id of `display`.
|
||||
|
||||
**需求 8:** 在我输入数字的同时,我应该能看到我输入的数字展示在 id 为`display`的元素中。
|
||||
**User Story #8:** As I input numbers, I should be able to see my input in the element with the id of `display`.
|
||||
|
||||
**需求 9:** 我应该可以在任意顺序下对一串任意长度的数字执行加、减、乘、除操作,并且当我按下`=`时,正确答案应该显示在 id 为`display`的元素中。
|
||||
**User Story #9:** In any order, I should be able to add, subtract, multiply and divide a chain of numbers of any length, and when I hit `=`, the correct result should be shown in the element with the id of `display`.
|
||||
|
||||
**需求 10:** 在我输入数字的同时,我的计算器应该不允许一个数字以多个零开头。
|
||||
**User Story #10:** When inputting numbers, my calculator should not allow a number to begin with multiple zeros.
|
||||
|
||||
**需求 11:** 当点击小数点元素时,当前展示的数值后面应该添加一个`.`符号;数字中不允许出现两个`.`符号。
|
||||
**User Story #11:** When the decimal element is clicked, a `.` should append to the currently displayed value; two `.` in one number should not be accepted.
|
||||
|
||||
**需求 12:** 我可以对包含小数点的数字执行任何四则运算(+、-、\*、/)。
|
||||
**User Story #12:** I should be able to perform any operation (+, -, \*, /) on numbers containing decimal points.
|
||||
|
||||
**需求 13:** 如果连续键入了两个及以上的运算符,应该执行最后一次键入的运算符(负数(-)运算符除外)。例如,如果输入 `5 + * 7 = `,结果应该是 `35` (等同于 5 \* 7);如果输入 `5 * - 5 =`,结果应该是 `-25`(等同于 5 x (-5))。
|
||||
**User Story #13:** If 2 or more operators are entered consecutively, the operation performed should be the last operator entered (excluding the negative (-) sign). For example, if `5 + * 7 =` is entered, the result should be `35` (i.e. 5 \* 7); if `5 * - 5 =` is entered, the result should be `-25` (i.e. 5 x (-5)).
|
||||
|
||||
**需求 14:** 如果在按下`=`符号后继续按一个运算符,则应该在上一次计算结果的基础上进行新的计算。
|
||||
**User Story #14:** Pressing an operator immediately following `=` should start a new calculation that operates on the result of the previous evaluation.
|
||||
|
||||
**需求 15:** 当需要四舍五入时,我的计算器应该可以处理结果的精度(注意:处理到多少位没有一个准确的标准,但是你应该能处理类似`2 / 7`这样的计算,使之至少有 4 位小数的精度)。
|
||||
**User Story #15:** My calculator should have several decimal places of precision when it comes to rounding (note that there is no exact standard, but you should be able to handle calculations like `2 / 7` with reasonable precision to at least 4 decimal places).
|
||||
|
||||
**注意计算器的逻辑:** 应当注意的是,计算器输入逻辑主要有两种思路:<dfn>立即执行逻辑</dfn>和<dfn>公式逻辑</dfn>。我们的示例使用公式逻辑并遵守运算优先顺序,而立即执行则不然。两者都是可以接受的,但请注意,根据你的选择,你的计算器对于某些算式可能会得到与我们不同的计算结果(参见下面的示例)。只要你的数学计算可以通过其他现实中计算器的验证,那么你的代码就是合理的。
|
||||
**Note On Calculator Logic:** It should be noted that there are two main schools of thought on calculator input logic: <dfn>immediate execution logic</dfn> and <dfn>formula logic</dfn>. Our example utilizes formula logic and observes order of operation precedence, immediate execution does not. Either is acceptable, but please note that depending on which you choose, your calculator may yield different results than ours for certain equations (see below example). As long as your math can be verified by another production calculator, please do not consider this a bug.
|
||||
|
||||
**示例:** `3 + 5 x 6 - 2 / 4 =`
|
||||
**EXAMPLE:** `3 + 5 x 6 - 2 / 4 =`
|
||||
|
||||
- **立即执行逻辑:** `11.5`
|
||||
- **公式/表达式逻辑:** `32.5`
|
||||
- **Immediate Execution Logic:** `11.5`
|
||||
- **Formula/Expression Logic:** `32.5`
|
||||
|
||||
你可以 fork [这个 CodePen pen 项目](http://codepen.io/freeCodeCamp/pen/MJjpwO) 来构建你的项目。或者你可以在任何你喜欢的环境中使用以下 CDN 链接来运行测试:`https://cdn.freecodecamp.org/testable-projects-fcc/v1/bundle.js`。
|
||||
You can build your project by forking [this CodePen pen](https://codepen.io/freeCodeCamp/pen/MJjpwO). Or you can use this CDN link to run the tests in any environment you like: `https://cdn.freecodecamp.org/testable-projects-fcc/v1/bundle.js`
|
||||
|
||||
一旦你完成了本项目并且该项目所有测试运行通过,请提交项目的 URL。
|
||||
Once you're done, submit the URL to your working project with all its tests passing.
|
||||
|
||||
# --solutions--
|
||||
|
||||
|
||||
@@ -1,6 +1,6 @@
|
||||
---
|
||||
id: bd7157d8c242eddfaeb5bd13
|
||||
title: 构建一个 Markdown 文件预览器
|
||||
title: Build a Markdown Previewer
|
||||
challengeType: 3
|
||||
forumTopicId: 301372
|
||||
dashedName: build-a-markdown-previewer
|
||||
@@ -8,29 +8,29 @@ dashedName: build-a-markdown-previewer
|
||||
|
||||
# --description--
|
||||
|
||||
**目标:** 在 [CodePen.io](https://codepen.io) 上实现一个功能类似 <https://codepen.io/freeCodeCamp/full/GrZVVO> 的 App。
|
||||
**Objective:** Build a [CodePen.io](https://codepen.io) app that is functionally similar to this: <https://codepen.io/freeCodeCamp/full/GrZVVO>.
|
||||
|
||||
在满足以下[需求](https://en.wikipedia.org/wiki/User_story)并能通过所有测试的前提下,你可以根据自己的喜好来美化你的 app。
|
||||
Fulfill the below [user stories](https://en.wikipedia.org/wiki/User_story) and get all of the tests to pass. Give it your own personal style.
|
||||
|
||||
你可以使用 HTML、JavaScript、CSS、Bootstrap、SASS、React、Redux、jQuery 来完成这个挑战。但鉴于这个章节的学习内容与前端框架相关,推荐使用一款前端框架(比如 React)来完成这个挑战;不推荐你使用前面没有提到的技术,否则风险自负。我们有计划新增其他前端框架课程,例如 Angular 和 Vue,不过目前还没有这些内容。我们会接受并尽力处理你在使用建议的技术栈过程中遇到的问题。编码愉快!
|
||||
You can use any mix of HTML, JavaScript, CSS, Bootstrap, SASS, React, Redux, and jQuery to complete this project. You should use a frontend framework (like React for example) because this section is about learning frontend frameworks. Additional technologies not listed above are not recommended and using them is at your own risk. We are looking at supporting other frontend frameworks like Angular and Vue, but they are not currently supported. We will accept and try to fix all issue reports that use the suggested technology stack for this project. Happy coding!
|
||||
|
||||
**需求 1:** 我应该能看到一个具有`id="editor"`属性的`textarea`元素。
|
||||
**User Story #1:** I can see a `textarea` element with a corresponding `id="editor"`.
|
||||
|
||||
**需求 2:** 我应该能看到一个具有`id="preview"`属性的元素。
|
||||
**User Story #2:** I can see an element with a corresponding `id="preview"`.
|
||||
|
||||
**需求 3:** 当我在具有`#editor`属性的元素内输入文本时,具有`#preview`属性的元素应该同步更新展示我键入的内容。
|
||||
**User Story #3:** When I enter text into the `#editor` element, the `#preview` element is updated as I type to display the content of the textarea.
|
||||
|
||||
**需求 4:** 当我在具有`#editor`属性的元素内输入 GitHub 风格的 markdown 内容时,文本应该以 HTML 的形式,把我所键入的内容渲染在具有`#preview`属性的元素中(提示:你不需要自己解析 Markdown——你可以引入一个叫做 Marked 的库来完成这项工作:<https://cdnjs.com/libraries/marked>)。
|
||||
**User Story #4:** When I enter GitHub flavored markdown into the `#editor` element, the text is rendered as HTML in the `#preview` element as I type (HINT: You don't need to parse Markdown yourself - you can import the Marked library for this: <https://cdnjs.com/libraries/marked>).
|
||||
|
||||
**需求 5:** 当我的 Markdown 预览器首次加载时,具有`#editor`属性的元素内的默认内容应该包含以下每个种类的至少一段有效的 Markdown 代码:标题(H1 标签)、次级标题(H2 标签)、链接、行内代码、代码块、列表、引用块、图片、加粗文本。
|
||||
**User Story #5:** When my markdown previewer first loads, the default text in the `#editor` field should contain valid markdown that represents at least one of each of the following elements: a header (H1 size), a sub header (H2 size), a link, inline code, a code block, a list item, a blockquote, an image, and bolded text.
|
||||
|
||||
**需求 6:** 当我的 Markdown 预览器首次加载时,具有`#editor`属性的元素内容应该以 HTML 的形式渲染在具有`#preview`属性的元素中。
|
||||
**User Story #6:** When my markdown previewer first loads, the default markdown in the `#editor` field should be rendered as HTML in the `#preview` element.
|
||||
|
||||
**可选需求(你无需通过这项测试):** 我的 Markdown 预览器能够解析回车符并且将他们以`br`(换行)元素的形式渲染出来。
|
||||
**Optional Bonus (you do not need to make this test pass):** My markdown previewer interprets carriage returns and renders them as `br` (line break) elements.
|
||||
|
||||
你可以 fork [这个 CodePen pen 项目](http://codepen.io/freeCodeCamp/pen/MJjpwO) 来构建你的项目。或者你可以在任何你喜欢的环境中使用以下 CDN 链接来运行测试:`https://cdn.freecodecamp.org/testable-projects-fcc/v1/bundle.js`。
|
||||
You can build your project by forking [this CodePen pen](https://codepen.io/freeCodeCamp/pen/MJjpwO). Or you can use this CDN link to run the tests in any environment you like: `https://cdn.freecodecamp.org/testable-projects-fcc/v1/bundle.js`
|
||||
|
||||
一旦你完成了本项目并且该项目所有测试运行通过,请提交项目的 URL。
|
||||
Once you're done, submit the URL to your working project with all its tests passing.
|
||||
|
||||
# --solutions--
|
||||
|
||||
|
||||
@@ -1,6 +1,6 @@
|
||||
---
|
||||
id: bd7158d8c442eddfaeb5bd13
|
||||
title: 构建一个随机引语生成器
|
||||
title: Build a Random Quote Machine
|
||||
challengeType: 3
|
||||
forumTopicId: 301374
|
||||
dashedName: build-a-random-quote-machine
|
||||
@@ -8,39 +8,39 @@ dashedName: build-a-random-quote-machine
|
||||
|
||||
# --description--
|
||||
|
||||
**目标:** 在 [CodePen.io](https://codepen.io) 上实现一个功能类似 <https://codepen.io/freeCodeCamp/full/qRZeGZ> 的 App。
|
||||
**Objective:** Build a [CodePen.io](https://codepen.io) app that is functionally similar to this: <https://codepen.io/freeCodeCamp/full/qRZeGZ>.
|
||||
|
||||
在满足以下[需求](https://en.wikipedia.org/wiki/User_story)并能通过所有测试的前提下,你可以根据自己的喜好来美化你的 app。
|
||||
Fulfill the below [user stories](https://en.wikipedia.org/wiki/User_story) and get all of the tests to pass. Give it your own personal style.
|
||||
|
||||
你可以使用 HTML、JavaScript、CSS、Bootstrap、SASS、React、Redux、jQuery 来完成这个挑战。但鉴于这个章节的学习内容与前端框架相关,推荐使用一款前端框架(比如 React)来完成这个挑战;不推荐你使用前面没有提到的技术,否则风险自担。我们有计划新增其他前端框架课程,例如 Angular 和 Vue,不过目前还没有这些内容。我们会接受并尽力处理你在使用建议的技术栈过程中遇到的问题。编码愉快!
|
||||
You can use any mix of HTML, JavaScript, CSS, Bootstrap, SASS, React, Redux, and jQuery to complete this project. You should use a frontend framework (like React for example) because this section is about learning frontend frameworks. Additional technologies not listed above are not recommended and using them is at your own risk. We are looking at supporting other frontend frameworks like Angular and Vue, but they are not currently supported. We will accept and try to fix all issue reports that use the suggested technology stack for this project. Happy coding!
|
||||
|
||||
**需求 1:** 我应该能看到一个具有`id="quote-box"`属性的包裹元素。
|
||||
**User Story #1:** I can see a wrapper element with a corresponding `id="quote-box"`.
|
||||
|
||||
**需求 2:** 在`#quote-box`元素内,我应该能看到一个具有`id="text"`属性的元素。
|
||||
**User Story #2:** Within `#quote-box`, I can see an element with a corresponding `id="text"`.
|
||||
|
||||
**需求 3:** 在`#quote-box`元素内,我应该能看到一个具有`id="author"`属性的元素。
|
||||
**User Story #3:** Within `#quote-box`, I can see an element with a corresponding `id="author"`.
|
||||
|
||||
**需求 4:** 在`#quote-box`元素内,我应该能看到一个具有`id="new-quote"`属性的可点击元素。
|
||||
**User Story #4:** Within `#quote-box`, I can see a clickable element with a corresponding `id="new-quote"`.
|
||||
|
||||
**需求 5:** 在`#quote-box`元素内,我应该能看到一个具有`id="tweet-quote"`属性的可点击 `a` 元素。
|
||||
**User Story #5:** Within `#quote-box`, I can see a clickable `a` element with a corresponding `id="tweet-quote"`.
|
||||
|
||||
**需求 6:** 首次加载时,我的 App 应该在具有`id="text"`属性的元素内展示一条随机引语。
|
||||
**User Story #6:** On first load, my quote machine displays a random quote in the element with `id="text"`.
|
||||
|
||||
**需求 7:** 首次加载时,我的 App 应该在具有`id="author"`属性的元素内展示该条随机引语的作者。
|
||||
**User Story #7:** On first load, my quote machine displays the random quote's author in the element with `id="author"`.
|
||||
|
||||
**需求 8:** 当点击具有`#new-quote`属性的按钮时,我的 App 应该得到一条新的引语并在具有`#text`属性的元素内展示出来。
|
||||
**User Story #8:** When the `#new-quote` button is clicked, my quote machine should fetch a new quote and display it in the `#text` element.
|
||||
|
||||
**需求 9:** 当点击具有`#new-quote`属性的按钮时,我的 App 应该得到新引语的作者并在具有`#author`属性的元素内展示出来。
|
||||
**User Story #9:** My quote machine should fetch the new quote's author when the `#new-quote` button is clicked and display it in the `#author` element.
|
||||
|
||||
**需求 10:** 我应该可以通过点击具有`#tweet-quote`属性的`a`标签将当前展示的引语发送推特。该`a`标签的`href`属性应该是`"twitter.com/intent/tweet"`以便成功发送。
|
||||
**User Story #10:** I can tweet the current quote by clicking on the `#tweet-quote``a` element. This `a` element should include the `"twitter.com/intent/tweet"` path in its `href` attribute to tweet the current quote.
|
||||
|
||||
**需求 11:** 具有`#quote-box`属性的包裹元素应该水平居中。请在浏览器缩放尺寸为 100% 且页面窗口最大化时运行测试。
|
||||
**User Story #11:** The `#quote-box` wrapper element should be horizontally centered. Please run tests with browser's zoom level at 100% and page maximized.
|
||||
|
||||
你可以 fork [这个 CodePen pen 项目](http://codepen.io/freeCodeCamp/pen/MJjpwO)来构建你的项目。或者你可以在任何你喜欢的环境中使用以下 CDN 链接来运行测试:`https://gitcdn.link/repo/freeCodeCamp/testable-projects-fcc/master/build/bundle.js`。
|
||||
You can build your project by forking [this CodePen pen](https://codepen.io/freeCodeCamp/pen/MJjpwO). Or you can use this CDN link to run the tests in any environment you like: `https://cdn.freecodecamp.org/testable-projects-fcc/v1/bundle.js`
|
||||
|
||||
一旦你完成了本项目并且该项目所有测试运行通过,请提交项目的 URL。
|
||||
Once you're done, submit the URL to your working project with all its tests passing.
|
||||
|
||||
**注意:** Twitter 不允许在 iframe 里加载链接。如果你的 tweet 不能加载,尝试在 `#tweet-quote` 元素上使用 `target="_blank"` 或者 `target="_top"` 属性。`target="_top"` 会替换当前 tab 页的内容,所以确保当前内容已经保存了。
|
||||
**Note:** Twitter does not allow links to be loaded in an iframe. Try using the `target="_blank"` or `target="_top"` attribute on the `#tweet-quote` element if your tweet won't load. `target="_top"` will replace the current tab so make sure your work is saved.
|
||||
|
||||
# --solutions--
|
||||
|
||||
|
||||
Reference in New Issue
Block a user