Files
freeCodeCamp/curriculum/challenges/chinese/03-front-end-libraries/front-end-libraries-projects/build-a-random-quote-machine.md
Oliver Eyton-Williams ee1e8abd87 feat(curriculum): restore seed + solution to Chinese (#40683)
* feat(tools): add seed/solution restore script

* chore(curriculum): remove empty sections' markers

* chore(curriculum): add seed + solution to Chinese

* chore: remove old formatter

* fix: update getChallenges

parse translated challenges separately, without reference to the source

* chore(curriculum): add dashedName to English

* chore(curriculum): add dashedName to Chinese

* refactor: remove unused challenge property 'name'

* fix: relax dashedName requirement

* fix: stray tag

Remove stray `pre` tag from challenge file.

Signed-off-by: nhcarrigan <nhcarrigan@gmail.com>

Co-authored-by: nhcarrigan <nhcarrigan@gmail.com>
2021-01-12 19:31:00 -07:00

3.1 KiB
Raw Blame History

id, title, challengeType, forumTopicId, dashedName
id title challengeType forumTopicId dashedName
bd7158d8c442eddfaeb5bd13 构建一个随机引语生成器 3 301374 build-a-random-quote-machine

--description--

目标: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"属性的可点击 a 元素。

需求 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。

注意: Twitter 不允许在 iframe 里加载链接。如果你的 tweet 不能加载,尝试在 #tweet-quote 元素上使用 target="_blank" 或者 target="_top" 属性。target="_top" 会替换当前 tab 页的内容,所以确保当前内容已经保存了。

--solutions--

// solution required