目标：构建一个功能类似于此的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方法。