2018-10-10 18:03:03 -04:00
|
|
|
|
---
|
|
|
|
|
|
id: bd7158d8c442eddfaeb5bd13
|
|
|
|
|
|
challengeType: 3
|
2020-09-07 16:15:49 +08:00
|
|
|
|
localeTitle: 构建一个随机引语生成器
|
2018-10-10 18:03:03 -04:00
|
|
|
|
---
|
|
|
|
|
|
|
|
|
|
|
|
## Description
|
2020-09-07 16:15:49 +08:00
|
|
|
|
<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>
|
2018-10-10 18:03:03 -04:00
|
|
|
|
|
|
|
|
|
|
## Instructions
|
2020-09-07 16:15:49 +08:00
|
|
|
|
<section id='instructions'>
|
|
|
|
|
|
|
2018-10-10 18:03:03 -04:00
|
|
|
|
</section>
|
|
|
|
|
|
|
|
|
|
|
|
## Tests
|
|
|
|
|
|
<section id='tests'>
|
|
|
|
|
|
|
|
|
|
|
|
```yml
|
|
|
|
|
|
tests: []
|
|
|
|
|
|
|
|
|
|
|
|
```
|
|
|
|
|
|
|
|
|
|
|
|
</section>
|
|
|
|
|
|
|
|
|
|
|
|
## Challenge Seed
|
|
|
|
|
|
<section id='challengeSeed'>
|
|
|
|
|
|
|
|
|
|
|
|
</section>
|
|
|
|
|
|
|
|
|
|
|
|
## Solution
|
|
|
|
|
|
<section id='solution'>
|
|
|
|
|
|
|
|
|
|
|
|
```js
|
|
|
|
|
|
// solution required
|
|
|
|
|
|
```
|
2020-08-13 17:24:35 +02:00
|
|
|
|
|
2020-09-07 16:15:49 +08:00
|
|
|
|
</section>
|
