chore(i8n,learn): processed translations
This commit is contained in:
Crowdin Bot
committed by
Mrugesh Mohapatra
Mrugesh Mohapatra
parent
15047f2d90
commit
e5c44a3ae5
@ -1,14 +1,28 @@
|
||||
---
|
||||
id: bd7156d8c242eddfaeb5bd13
|
||||
title: 建立一个露营者排行榜
|
||||
title: Build a freeCodeCamp Forum Homepage
|
||||
challengeType: 3
|
||||
videoUrl: ''
|
||||
forumTopicId: 302349
|
||||
dashedName: build-a-freecodecamp-forum-homepage
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
**目标：** 构建一个功能类似于此的[CodePen.io](https://codepen.io)应用程序： [https](https://codepen.io/freeCodeCamp/full/eZGMjp/) **：** [//codepen.io/freeCodeCamp/full/eZGMjp/](https://codepen.io) 。完成以下[用户故事](https://en.wikipedia.org/wiki/User_story) 。使用您需要的任何库或API。给它你自己的个人风格。 **用户故事：** 我可以看到freeCodeCamp露营者的表格，他们在过去30天内获得了最多的布朗尼积分。 **用户故事：** 我可以看到他们在过去30天内获得了多少布朗尼积分，以及他们获得了多少积分。 **用户故事：** 我可以根据他们在过去30天内获得的布朗尼点数和他们总共获得的布朗尼点数来对列表进行排序。 **提示：** 要获得过去30天的前100名营员： [https](https://fcctop100.herokuapp.com/api/fccusers/top/recent) ： [//fcctop100.herokuapp.com/api/fccusers/top/recent](https://fcctop100.herokuapp.com/api/fccusers/top/recent) 。 **提示：** 要获得有史以来前100名的露营者： [https](https://fcctop100.herokuapp.com/api/fccusers/top/alltime) ： [//fcctop100.herokuapp.com/api/fccusers/top/alltime](https://fcctop100.herokuapp.com/api/fccusers/top/alltime) 。如果卡住，请记得使用[Read-Search-Ask](https://forum.freecodecamp.org/t/how-to-get-help-when-you-are-stuck-coding/19514) 。完成后，单击“我已完成此挑战”按钮并包含指向CodePen的链接。您可以通过Facebook上的朋友分享您的项目反馈。
|
||||
**Objective:** Build a [CodePen.io](https://codepen.io) app that is functionally similar to this: <https://codepen.io/freeCodeCamp/full/JqdoMV>.
|
||||
|
||||
Fulfill the below [user stories](https://en.wikipedia.org/wiki/User_story). Use whichever libraries or APIs you need. Give it your own personal style.
|
||||
|
||||
**User Story:** I can see a list of the most recent posts on the freeCodeCamp forum.
|
||||
|
||||
**User Story:** For each topic, I can see the title and a list of links to users who have recently posted in it.
|
||||
|
||||
**User Story:** I can see the number of replies and views that each topic has had, and a timestamp of when the topic was last active.
|
||||
|
||||
**Hint:** To get the 30 most recent forum posts: <https://forum-proxy.freecodecamp.rocks/latest>.
|
||||
|
||||
When you are finished, include a link to your project on CodePen and click the "I've completed this challenge" button.
|
||||
|
||||
You can get feedback on your project by sharing it on the [freeCodeCamp forum](https://forum.freecodecamp.org/c/project-feedback/409).
|
||||
|
||||
# --solutions--
|
||||
|
||||
|
||||
@ -1,14 +1,34 @@
|
||||
---
|
||||
id: 5a5d02bd919fcf9ca8cf46cb
|
||||
title: 构建一个明亮的应用程序
|
||||
title: Build a Light-Bright App
|
||||
challengeType: 3
|
||||
videoUrl: ''
|
||||
forumTopicId: 302350
|
||||
dashedName: build-a-light-bright-app
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
**目标：** 构建一个功能类似于此的[CodePen.io](https://codepen.io)应用程序： [https](https://codepen.io/freeCodeCamp/full/eyLYXE) **：** [//codepen.io/freeCodeCamp/full/eyLYXE](https://codepen.io) 。 **规则＃1：** 不要查看示例项目的代码。自己搞清楚。 **规则＃2：** 完成以下[用户故事](https://en.wikipedia.org/wiki/User_story) 。使用您需要的任何库或API。给它你自己的个人风格。 **用户故事：** 我可以单击或拖动鼠标光标为圆圈着色。 **用户故事：** 我可以双击彩色圆圈去除颜色。 **用户故事：** 我可以点击彩色圆圈来改变它的颜色。 **用户故事：** 每次点击我都会得到一个不同颜色的圆圈。 **用户故事：** 我可以点击“重置”按钮删除最近的颜色。 **用户故事：** 我可以单击“全部重置”按钮删除圆圈中的所有颜色。如果卡住，请记得使用[Read-Search-Ask](https://forum.freecodecamp.org/t/how-to-get-help-when-you-are-stuck-coding/19514) 。完成后，单击“我已完成此挑战”按钮并包含指向CodePen的链接。您可以通过Facebook上的朋友分享您的项目反馈。
|
||||
**Objective:** Build a [CodePen.io](https://codepen.io) app that is functionally similar to this: <https://codepen.io/freeCodeCamp/full/eyLYXE>.
|
||||
|
||||
**Rule #1:** Don't look at the example project's code. Figure it out for yourself.
|
||||
|
||||
**Rule #2:** Fulfill the below [user stories](https://en.wikipedia.org/wiki/User_story). Use whichever libraries or APIs you need. Give it your own personal style.
|
||||
|
||||
**User Story:** I can click or drag the mouse cursor to color the circles.
|
||||
|
||||
**User Story:** I can double-click on a colored circle to remove the color.
|
||||
|
||||
**User Story:** I can click on a colored circle to change its color.
|
||||
|
||||
**User Story:** I should get a circle of different color on each click.
|
||||
|
||||
**User Story:** I can click on the 'Reset' button to remove the recent color.
|
||||
|
||||
**User Story:** I can click on the 'Reset All' button to remove all the colors from the circles.
|
||||
|
||||
When you are finished, include a link to your project on CodePen and click the "I've completed this challenge" button.
|
||||
|
||||
You can get feedback on your project by sharing it on the [freeCodeCamp forum](https://forum.freecodecamp.org/c/project-feedback/409).
|
||||
|
||||
# --solutions--
|
||||
|
||||
|
||||
@ -1,14 +1,28 @@
|
||||
---
|
||||
id: bd7158d8c443eddfaeb5bdff
|
||||
title: 建立夜生活协调应用程序
|
||||
title: Build a Nightlife Coordination App
|
||||
challengeType: 4
|
||||
videoUrl: ''
|
||||
forumTopicId: 302351
|
||||
dashedName: build-a-nightlife-coordination-app
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
**目标：** 构建一个功能类似于此的完整堆栈JavaScript应用程序： [http](http://whatsgoinontonight.herokuapp.com/) ： [//whatsgoinontonight.herokuapp.com/](http://whatsgoinontonight.herokuapp.com/)并将其部署到Heroku。请注意，对于每个项目，您应该创建一个新的GitHub存储库和一个新的Heroku项目。如果您不记得如何执行此操作，请重新访问[https://freecodecamp.com/challenges/get-set-for-our-dynamic-web-application-projects](/challenges/get-set-for-our-dynamic-web-application-projects) 。以下是您应为此项目实施的特定用户故事： **用户故事：** 作为未经身份验证的用户，我可以查看我所在区域的所有条形图。 **用户故事：** 作为一名经过身份验证的用户，我可以将自己添加到一个栏中，以表明我今晚要去那里。 **用户故事：** 作为一名经过身份验证的用户，如果我不想再去那里，我可以将自己从酒吧中删除。 **用户故事：** 作为未经身份验证的用户，当我登录时，我不应该再次搜索。 **提示：** 尝试使用[Yelp API](https://www.yelp.com/developers/documentation/v2/overview)查找用户搜索的城市中的场地。如果您使用Yelp的API，请务必在您的应用中提及。完成这些用户故事的实现后，单击“我已完成此挑战”按钮，然后输入GitHub存储库和在Heroku上运行的实时应用程序的URL。您可以通过Facebook上的朋友分享您的项目反馈。
|
||||
Build a full stack JavaScript app that is functionally similar to this: <https://yoyo44.herokuapp.com/>. Use a site builder of your choice to complete the project.
|
||||
|
||||
Here are the specific user stories you should implement for this project:
|
||||
|
||||
**User Story:** As an unauthenticated user, you can view all bars in my area.
|
||||
|
||||
**User Story:** As an authenticated user, you can add myself to a bar to indicate you am going there tonight.
|
||||
|
||||
**User Story:** As an authenticated user, you can remove myself from a bar if you no longer want to go there.
|
||||
|
||||
**User Story:** As an unauthenticated user, when you login you should not have to search again.
|
||||
|
||||
**Hint:** Try using the [Yelp API](https://www.yelp.com/developers/documentation/v3) to find venues in the cities your users search for. If you use Yelp's API, be sure to mention so in your app.
|
||||
|
||||
When you are done, make sure a working demo of your project is hosted somewhere public. Then submit the URL to it in the `Solution Link` field. Optionally, also submit a link to your project's source code in the `GitHub Link` field.
|
||||
|
||||
# --solutions--
|
||||
|
||||
|
||||
@ -1,14 +1,34 @@
|
||||
---
|
||||
id: bd7158d8c443eddfaeb5bdee
|
||||
title: 建立一个Pinterest克隆
|
||||
title: Build a Pinterest Clone
|
||||
challengeType: 4
|
||||
videoUrl: ''
|
||||
forumTopicId: 302352
|
||||
dashedName: build-a-pinterest-clone
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
**目标：** 构建一个功能类似于此的[Glitch](https://glitch.com)应用程序： [https](https://wild-song.glitch.me/) ： [//wild-song.glitch.me](https://wild-song.glitch.me/) 。完成以下[用户故事](https://en.wikipedia.org/wiki/User_story) 。使用您需要的任何库或API。给它你自己的个人风格。 **用户故事：** 作为未经身份验证的用户，我可以使用GitHub登录。 **用户故事：** 作为经过身份验证的用户，我可以链接到图像。 **用户故事：** 作为经过身份验证的用户，我可以删除已链接到的图像。 **用户故事：** 作为一个经过身份验证的用户，我可以看到我所链接的所有图像的Pinterest风格的墙。 **用户故事：** 作为未经身份验证的用户，我可以浏览其他用户的图像墙。 **用户故事：** 作为经过身份验证的用户，如果我上传的图片已损坏，则会被占位符图片替换。 （可以使用jQuery破碎图像检测） **提示：** [Masonry.js](http://masonry.desandro.com/)是一个允许Pinterest风格图像网格的库。完成这些用户故事的实现后，单击“我已完成此挑战”按钮，然后输入GitHub存储库和在Heroku上运行的实时应用程序的URL。您可以通过Facebook上的朋友分享您的项目反馈。
|
||||
**Objective:** Build a [Repl.it](https://repl.it/) app that is functionally similar to this: <https://build-a-pinterest-clone.freecodecamp.rocks/>.
|
||||
|
||||
Fulfill the below [user stories](https://en.wikipedia.org/wiki/User_story). Use whichever libraries or APIs you need. Give it your own personal style.
|
||||
|
||||
**User Story:** As an unauthenticated user, I can login with GitHub.
|
||||
|
||||
**User Story:** As an authenticated user, I can link to images.
|
||||
|
||||
**User Story:** As an authenticated user, I can delete images that I've linked to.
|
||||
|
||||
**User Story:** As an authenticated user, I can see a Pinterest-style wall of all the images I've linked to.
|
||||
|
||||
**User Story:** As an unauthenticated user, I can browse other users' walls of images.
|
||||
|
||||
**User Story:** As an authenticated user, if I upload an image that is broken, it will be replaced by a placeholder image. (can use jQuery broken image detection)
|
||||
|
||||
**Hint:** [Masonry.js](https://masonry.desandro.com/) is a library that allows for Pinterest-style image grids.
|
||||
|
||||
Once you've finished implementing these user stories, enter the URL to your live app and, optionally, your GitHub repository. Then click the "I've completed this challenge" button.
|
||||
|
||||
You can get feedback on your project by sharing it on the [freeCodeCamp forum](https://forum.freecodecamp.org/c/project-feedback/409).
|
||||
|
||||
# --solutions--
|
||||
|
||||
|
||||
@ -1,14 +1,30 @@
|
||||
---
|
||||
id: 5a4b7fcdb66f799f199e11db
|
||||
title: 建立乒乓球比赛
|
||||
title: Build a Pong Game
|
||||
challengeType: 3
|
||||
videoUrl: ''
|
||||
forumTopicId: 302353
|
||||
dashedName: build-a-pong-game
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
**目标：** 构建一个功能类似于此的[CodePen.io](https://codepen.io)应用程序： [https](https://codepen.io/satyamdev/full/pdMmBp) **：** [//codepen.io/satyamdev/full/pdMmBp](https://codepen.io) 。 **规则＃1：** 不要查看示例项目的代码。自己搞清楚。 **规则＃2：** 完成以下[用户故事](https://en.wikipedia.org/wiki/User_story) 。使用您需要的任何库或API。给它你自己的个人风格。 **用户故事：** 我可以控制一个球拍。 **用户故事：** 计算机可以控制另一个拨片。 **用户故事：** 计算机的桨是无与伦比的。它绝不应该错过球。 **用户故事：** 游戏记录玩家和计算机的分数。如果卡住，请记得使用[Read-Search-Ask](https://forum.freecodecamp.org/t/how-to-get-help-when-you-are-stuck-coding/19514) 。完成后，单击“我已完成此挑战”按钮并包含指向CodePen的链接。您可以通过Facebook上的朋友分享您的项目反馈。
|
||||
**Objective:** Build a [CodePen.io](https://codepen.io) app that is functionally similar to this: <https://codepen.io/satyamdev/full/pdMmBp>.
|
||||
|
||||
**Rule #1:** Don't look at the example project's code. Figure it out for yourself.
|
||||
|
||||
**Rule #2:** Fulfill the below [user stories](https://en.wikipedia.org/wiki/User_story). Use whichever libraries or APIs you need. Give it your own personal style.
|
||||
|
||||
**User Story:** I can control a paddle.
|
||||
|
||||
**User Story:** The computer can control the other paddle.
|
||||
|
||||
**User Story:** The computer's paddle is unbeatable. It should never miss the ball.
|
||||
|
||||
**User Story:** The game keeps track of the player and computer's score.
|
||||
|
||||
When you are finished, include a link to your project on CodePen and click the "I've completed this challenge" button.
|
||||
|
||||
You can get feedback on your project by sharing it on the [freeCodeCamp forum](https://forum.freecodecamp.org/c/project-feedback/409).
|
||||
|
||||
# --solutions--
|
||||
|
||||
|
||||
@ -1,14 +1,34 @@
|
||||
---
|
||||
id: bd7155d8c242eddfaeb5bd13
|
||||
title: 建立配方盒
|
||||
title: Build a Recipe Box
|
||||
challengeType: 3
|
||||
videoUrl: ''
|
||||
forumTopicId: 302354
|
||||
dashedName: build-a-recipe-box
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
**目标：** 构建一个功能类似于此的[CodePen.io](https://codepen.io)应用程序： [https](https://codepen.io/freeCodeCamp/full/dNVazZ/) **：** [//codepen.io/freeCodeCamp/full/dNVazZ/](https://codepen.io) 。完成以下[用户故事](https://en.wikipedia.org/wiki/User_story) 。使用您需要的任何库或API。给它你自己的个人风格。 **用户故事：** 我可以创建具有名称和成分的食谱。 **用户故事：** 我可以看到一个索引视图，其中所有配方的名称都是可见的。 **用户故事：** 我可以点击任何这些食谱来查看它。 **用户故事：** 我可以编辑这些食谱。 **用户故事：** 我可以删除这些食谱。 **用户故事：** 我添加的所有新食谱都保存在浏览器的本地存储中。如果我刷新页面，这些配方仍然会在那里。 **提示：** 您应该在CodePen上为本地存储密钥添加前缀，即`_username_recipes`如果卡住，请记住使用[Read-Search-Ask](//github.com/FreeCodeCamp/freecodecamp/wiki/FreeCodeCamp-Get-Help) 。完成后，单击“我已完成此挑战”按钮并包含指向CodePen的链接。您可以通过Facebook上的朋友分享您的项目反馈。
|
||||
**Objective:** Build a [CodePen.io](https://codepen.io) app that is functionally similar to this: <https://codepen.io/freeCodeCamp/full/dNVazZ/>.
|
||||
|
||||
Fulfill the below [user stories](https://en.wikipedia.org/wiki/User_story). Use whichever libraries or APIs you need. Give it your own personal style.
|
||||
|
||||
**User Story:** I can create recipes that have names and ingredients.
|
||||
|
||||
**User Story:** I can see an index view where the names of all the recipes are visible.
|
||||
|
||||
**User Story:** I can click into any of those recipes to view it.
|
||||
|
||||
**User Story:** I can edit these recipes.
|
||||
|
||||
**User Story:** I can delete these recipes.
|
||||
|
||||
**User Story:** All new recipes I add are saved in my browser's local storage. If I refresh the page, these recipes will still be there.
|
||||
|
||||
**Hint:** You should prefix your local storage keys on CodePen, i.e. `_username_recipes`
|
||||
|
||||
When you are finished, include a link to your project on CodePen and click the "I've completed this challenge" button.
|
||||
|
||||
You can get feedback on your project by sharing it on the [freeCodeCamp forum](https://forum.freecodecamp.org/c/project-feedback/409).
|
||||
|
||||
# --solutions--
|
||||
|
||||
|
||||
@ -1,14 +1,38 @@
|
||||
---
|
||||
id: bd7153d8c242eddfaeb5bd13
|
||||
title: 建立一个Roguelike Dungeon Crawler游戏
|
||||
title: Build a Roguelike Dungeon Crawler Game
|
||||
challengeType: 3
|
||||
videoUrl: ''
|
||||
forumTopicId: 302355
|
||||
dashedName: build-a-roguelike-dungeon-crawler-game
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
**目标：** 构建一个功能类似于此的[CodePen.io](https://codepen.io)应用程序： [https](https://codepen.io/freeCodeCamp/full/apLXEJ/) **：** [//codepen.io/freeCodeCamp/full/apLXEJ/](https://codepen.io) 。完成以下[用户故事](https://en.wikipedia.org/wiki/User_story) 。使用您需要的任何库或API。给它你自己的个人风格。 **用户故事：** 我有健康，水平和武器。我可以拿起更好的武器。我可以拿起健康食品。 **用户故事：** 地图上的所有物品和敌人都是随机排列的。 **用户故事：** 我可以在整个地图中移动，发现项目。 **用户故事：** 我可以在地图边界内的任何地方移动，但是在我击败它之前我无法穿越敌人。 **用户故事：** 大部分地图都是隐藏的。当我迈出一步时，所有与我在一定数量空间内的空间都会被揭示出来。 **用户故事：** 当我击败敌人时，敌人消失，我得到了XP，最终提高了我的等级。 **用户故事：** 当我与敌人作战时，我们会轮流造成伤害，直到我们其中一人失败为止。我根据自己的等级和武器造成伤害。敌人根据其等级造成伤害。损伤在一定范围内有些随机。 **用户故事：** 当我找到并击败老板时，我赢了。 **用户故事：** 游戏应该具有挑战性，但理论上可以获胜。如果卡住，请记得使用[Read-Search-Ask](https://forum.freecodecamp.org/t/how-to-get-help-when-you-are-stuck-coding/19514) 。完成后，单击“我已完成此挑战”按钮并包含指向CodePen的链接。您可以通过Facebook上的朋友分享您的项目反馈。
|
||||
**Objective:** Build a [CodePen.io](https://codepen.io) app that is functionally similar to this: <https://codepen.io/freeCodeCamp/full/apLXEJ/>.
|
||||
|
||||
Fulfill the below [user stories](https://en.wikipedia.org/wiki/User_story). Use whichever libraries or APIs you need. Give it your own personal style.
|
||||
|
||||
**User Story:** I have health, a level, and a weapon. I can pick up a better weapon. I can pick up health items.
|
||||
|
||||
**User Story:** All the items and enemies on the map are arranged at random.
|
||||
|
||||
**User Story:** I can move throughout a map, discovering items.
|
||||
|
||||
**User Story:** I can move anywhere within the map's boundaries, but I can't move through an enemy until I've beaten it.
|
||||
|
||||
**User Story:** Much of the map is hidden. When I take a step, all spaces that are within a certain number of spaces from me are revealed.
|
||||
|
||||
**User Story:** When I beat an enemy, the enemy goes away and I get XP, which eventually increases my level.
|
||||
|
||||
**User Story:** When I fight an enemy, we take turns damaging each other until one of us loses. I do damage based off of my level and my weapon. The enemy does damage based off of its level. Damage is somewhat random within a range.
|
||||
|
||||
**User Story:** When I find and beat the boss, I win.
|
||||
|
||||
**User Story:** The game should be challenging, but theoretically winnable.
|
||||
|
||||
When you are finished, include a link to your project on CodePen and click the "I've completed this challenge" button.
|
||||
|
||||
You can get feedback on your project by sharing it on the [freeCodeCamp forum](https://forum.freecodecamp.org/c/project-feedback/409).
|
||||
|
||||
# --solutions--
|
||||
|
||||
|
||||
@ -1,14 +1,38 @@
|
||||
---
|
||||
id: bd7158d8c442eddfaeb5bd1c
|
||||
title: 建立一个西蒙游戏
|
||||
title: Build a Simon Game
|
||||
challengeType: 3
|
||||
videoUrl: ''
|
||||
forumTopicId: 302357
|
||||
dashedName: build-a-simon-game
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
**目标：** 构建一个功能类似于此的[CodePen.io](https://codepen.io)应用程序： [https](https://codepen.io/Em-Ant/full/QbRyqq/) **：** [//codepen.io/freeCodeCamp/full/obYBjE](https://codepen.io) 。完成以下[用户故事](https://en.wikipedia.org/wiki/User_story) 。使用您需要的任何库或API。给它你自己的个人风格。 **用户故事：** 我看到一系列随机按钮。 **用户故事：** 每当我正确输入一系列按钮时，我会看到同一系列的按钮按下，但还有一个额外的步骤。 **用户故事：** 当按下一系列按钮时，以及当我亲自按下按钮时，我都会听到与每个按钮相对应的声音。 **用户故事：** 如果我按下了错误的按钮，我会收到通知，告知我已经这样做了，然后再按一系列按钮开始提醒我模式，这样我就可以再试一次。 **用户故事：** 我可以看到当前按钮按下的步数。 **用户故事：** 如果我想重新启动，我可以点击一个按钮来执行此操作，游戏将返回一个步骤。 **用户故事：** 我可以在严格的模式下玩，如果我按下按钮错误，它会通知我我已经这样做了，并且游戏重新开始按下一系列按钮。 **用户故事：** 我可以通过一系列正确的20个步骤来赢得游戏。我被告知我的胜利，然后比赛重新开始。 **提示：** 在这里**，**您可以使用每个按钮的MP3： `https://s3.amazonaws.com/freecodecamp/simonSound1.mp3` ， `https://s3.amazonaws.com/freecodecamp/simonSound2.mp3` ， `https://s3.amazonaws.com/freecodecamp/simonSound3.mp3` ， `https://s3.amazonaws.com/freecodecamp/simonSound4.mp3` 。如果卡住，请记得使用[Read-Search-Ask](https://forum.freecodecamp.org/t/how-to-get-help-when-you-are-stuck-coding/19514) 。完成后，单击“我已完成此挑战”按钮并包含指向CodePen的链接。您可以通过Facebook上的朋友分享您的项目反馈。
|
||||
**Objective:** Build a [CodePen.io](https://codepen.io) app that is functionally similar to this: [https://codepen.io/freeCodeCamp/full/obYBjE](https://codepen.io/Em-Ant/full/QbRyqq/).
|
||||
|
||||
Fulfill the below [user stories](https://en.wikipedia.org/wiki/User_story). Use whichever libraries or APIs you need. Give it your own personal style.
|
||||
|
||||
**User Story:** I am presented with a random series of button presses.
|
||||
|
||||
**User Story:** Each time I input a series of button presses correctly, I see the same series of button presses but with an additional step.
|
||||
|
||||
**User Story:** I hear a sound that corresponds to each button both when the series of button presses plays, and when I personally press a button.
|
||||
|
||||
**User Story:** If I press the wrong button, I am notified that I have done so, and that series of button presses starts again to remind me of the pattern so I can try again.
|
||||
|
||||
**User Story:** I can see how many steps are in the current series of button presses.
|
||||
|
||||
**User Story:** If I want to restart, I can hit a button to do so, and the game will return to a single step.
|
||||
|
||||
**User Story:** I can play in strict mode where if I get a button press wrong, it notifies me that I have done so, and the game restarts at a new random series of button presses.
|
||||
|
||||
**User Story:** I can win the game by getting a series of 20 steps correct. I am notified of my victory, then the game starts over.
|
||||
|
||||
**Hint:** Here are mp3s you can use for each button: `https://s3.amazonaws.com/freecodecamp/simonSound1.mp3`, `https://s3.amazonaws.com/freecodecamp/simonSound2.mp3`, `https://s3.amazonaws.com/freecodecamp/simonSound3.mp3`, `https://s3.amazonaws.com/freecodecamp/simonSound4.mp3`.
|
||||
|
||||
When you are finished, include a link to your project on CodePen and click the "I've completed this challenge" button.
|
||||
|
||||
You can get feedback on your project by sharing it on the [freeCodeCamp forum](https://forum.freecodecamp.org/c/project-feedback/409).
|
||||
|
||||
# --solutions--
|
||||
|
||||
|
||||
@ -1,14 +1,26 @@
|
||||
---
|
||||
id: bd7158d8c442eedfaeb5bd1c
|
||||
title: 建立一个Tic Tac Toe游戏
|
||||
title: Build a Tic Tac Toe Game
|
||||
challengeType: 3
|
||||
videoUrl: ''
|
||||
forumTopicId: 302358
|
||||
dashedName: build-a-tic-tac-toe-game
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
**目标：** 构建一个功能类似于此的[CodePen.io](https://codepen.io)应用程序： [https](https://codepen.io/freeCodeCamp/full/KzXQgy/) **：** [//codepen.io/freeCodeCamp/full/KzXQgy/](https://codepen.io) 。完成以下[用户故事](https://en.wikipedia.org/wiki/User_story) 。使用您需要的任何库或API。给它你自己的个人风格。 **用户故事：** 我可以用电脑玩Tic Tac Toe游戏。 **用户故事：** 我的游戏一旦结束就会重置，所以我可以再玩一次。 **用户故事：** 我可以选择是否要播放为X或O.如果卡住，请记得使用[Read-Search-Ask](https://forum.freecodecamp.org/t/how-to-get-help-when-you-are-stuck-coding/19514) 。完成后，单击“我已完成此挑战”按钮并包含指向CodePen的链接。您可以通过Facebook上的朋友分享您的项目反馈。
|
||||
**Objective:** Build a [CodePen.io](https://codepen.io) app that is functionally similar to this: <https://codepen.io/freeCodeCamp/full/KzXQgy/>.
|
||||
|
||||
Fulfill the below [user stories](https://en.wikipedia.org/wiki/User_story). Use whichever libraries or APIs you need. Give it your own personal style.
|
||||
|
||||
**User Story:** I can play a game of Tic Tac Toe with the computer.
|
||||
|
||||
**User Story:** My game will reset as soon as it's over so I can play again.
|
||||
|
||||
**User Story:** I can choose whether I want to play as X or O.
|
||||
|
||||
When you are finished, include a link to your project on CodePen and click the "I've completed this challenge" button.
|
||||
|
||||
You can get feedback on your project by sharing it on the [freeCodeCamp forum](https://forum.freecodecamp.org/c/project-feedback/409).
|
||||
|
||||
# --solutions--
|
||||
|
||||
|
||||
@ -1,14 +1,34 @@
|
||||
---
|
||||
id: bd7158d8c443eddfaeb5bdef
|
||||
title: 建立一个投票应用程序
|
||||
title: Build a Voting App
|
||||
challengeType: 4
|
||||
videoUrl: ''
|
||||
forumTopicId: 302359
|
||||
dashedName: build-a-voting-app
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
**目标：** 构建一个功能类似于此的完整堆栈JavaScript应用程序： [https](https://fcc-voting-arthow4n.herokuapp.com/) ： [//fcc-voting-arthow4n.herokuapp.com/](https://fcc-voting-arthow4n.herokuapp.com/)并将其部署到Heroku。请注意，对于每个项目，您应该创建一个新的GitHub存储库和一个新的Heroku项目。如果您不记得如何执行此操作，请重新访问[https://freecodecamp.com/challenges/get-set-for-our-dynamic-web-application-projects](/challenges/get-set-for-our-dynamic-web-application-projects) 。以下是您应该为此项目实现的特定用户故事： **用户故事：** 作为经过身份验证的用户，我可以保留我的民意调查，然后再回来访问它们。 **用户故事：** 作为经过身份验证的用户，我可以与朋友分享我的民意调查。 **用户故事：** 作为经过身份验证的用户，我可以看到我的民意调查的汇总结果。 **用户故事：** 作为经过身份验证的用户，我可以删除我认为不再需要的民意调查。 **用户故事：** 作为经过身份验证的用户，我可以创建包含任意数量项目的民意调查。 **用户故事：** 作为未经身份验证或经过身份验证的用户，我可以查看并对每个人的民意调查进行投票。 **用户故事：** 作为未经身份验证或经过身份验证的用户，我可以以图表形式查看民意调查的结果。 （这可以使用Chart.js或Google Charts实现。） **用户故事：** 作为经过身份验证的用户，如果我不喜欢民意调查中的选项，我可以创建一个新选项。完成这些用户故事的实现后，单击“我已完成此挑战”按钮，然后输入GitHub存储库和在Heroku上运行的实时应用程序的URL。您可以通过Facebook上的朋友分享您的项目反馈。
|
||||
Build a full stack JavaScript app that is functionally similar to this: <https://voting-app.freecodecamp.rocks/>. Use a site builder of your choice to complete the project.
|
||||
|
||||
Here are the specific user stories you should implement for this project:
|
||||
|
||||
**User Story:** As an authenticated user, you can keep my polls and come back later to access them.
|
||||
|
||||
**User Story:** As an authenticated user, you can share my polls with my friends.
|
||||
|
||||
**User Story:** As an authenticated user, you can see the aggregate results of my polls.
|
||||
|
||||
**User Story:** As an authenticated user, you can delete polls that I decide I don't want anymore.
|
||||
|
||||
**User Story:** As an authenticated user, you can create a poll with any number of possible items.
|
||||
|
||||
**User Story:** As an unauthenticated or authenticated user, you can see and vote on everyone's polls.
|
||||
|
||||
**User Story:** As an unauthenticated or authenticated user, you can see the results of polls in chart form. (This could be implemented using Chart.js or Google Charts.)
|
||||
|
||||
**User Story:** As an authenticated user, if you don't like the options on a poll, you can create a new option.
|
||||
|
||||
When you are done, make sure a working demo of your project is hosted somewhere public. Then submit the URL to it in the `Solution Link` field. Optionally, also submit a link to your project's source code in the `GitHub Link` field.
|
||||
|
||||
# --solutions--
|
||||
|
||||
|
||||
@ -1,14 +1,30 @@
|
||||
---
|
||||
id: bd7158d8c442eddfaeb5bd19
|
||||
title: 构建Wikipedia查看器
|
||||
title: Build a Wikipedia Viewer
|
||||
challengeType: 3
|
||||
videoUrl: ''
|
||||
forumTopicId: 302360
|
||||
dashedName: build-a-wikipedia-viewer
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
**目标：** 构建一个功能类似于此的[CodePen.io](https://codepen.io)应用程序： [https](https://codepen.io/freeCodeCamp/full/wGqEga/) **：** [//codepen.io/freeCodeCamp/full/wGqEga/](https://codepen.io) 。完成以下[用户故事](https://en.wikipedia.org/wiki/User_story) 。使用您需要的任何库或API。给它你自己的个人风格。 **用户故事：** 我可以在搜索框中搜索维基百科条目，并查看生成的维基百科条目。 **用户故事：** 我可以单击按钮查看随机的Wikipedia条目。 提示＃1：这是一个可用于获取随机维基百科文章的URL： `https://en.wikipedia.org/wiki/Special:Random` ： `https://en.wikipedia.org/wiki/Special:Random` :Random。 提示＃2：这是使用维基百科API的条目： `https://www.mediawiki.org/wiki/API:Main_page` ： `https://www.mediawiki.org/wiki/API:Main_page` ： `https://www.mediawiki.org/wiki/API:Main_page` 。 提示＃3：使用此[链接](https://en.wikipedia.org/wiki/Special:ApiSandbox#action=query&titles=Main%20Page&prop=revisions&rvprop=content&format=jsonfm)试验维基百科的API。如果卡住，请记得使用[Read-Search-Ask](https://forum.freecodecamp.org/t/how-to-get-help-when-you-are-stuck-coding/19514) 。完成后，单击“我已完成此挑战”按钮并包含指向CodePen的链接。您可以通过Facebook上的朋友分享您的项目反馈。
|
||||
**Objective:** Build a [CodePen.io](https://codepen.io) app that is functionally similar to this: <https://codepen.io/freeCodeCamp/full/wGqEga/>.
|
||||
|
||||
Fulfill the below [user stories](https://en.wikipedia.org/wiki/User_story). Use whichever libraries or APIs you need. Give it your own personal style.
|
||||
|
||||
**User Story:** I can search Wikipedia entries in a search box and see the resulting Wikipedia entries.
|
||||
|
||||
**User Story:** I can click a button to see a random Wikipedia entry.
|
||||
|
||||
Hint #1: Here's a URL you can use to get a random Wikipedia article: `https://en.wikipedia.org/wiki/Special:Random`.
|
||||
|
||||
Hint #2: Here's an entry on using Wikipedia's API: `https://www.mediawiki.org/wiki/API:Main_page`.
|
||||
|
||||
Hint #3: Use this [link](https://en.wikipedia.org/wiki/Special:ApiSandbox#action=query&titles=Main%20Page&prop=revisions&rvprop=content&format=jsonfm) to experiment with Wikipedia's API.
|
||||
|
||||
When you are finished, include a link to your project on CodePen and click the "I've completed this challenge" button.
|
||||
|
||||
You can get feedback on your project by sharing it on the [freeCodeCamp forum](https://forum.freecodecamp.org/c/project-feedback/409).
|
||||
|
||||
# --solutions--
|
||||
|
||||
|
||||
@ -1,14 +1,24 @@
|
||||
---
|
||||
id: bd7158d8c443edefaeb5bdee
|
||||
title: 构建图像搜索抽象层
|
||||
title: Build an Image Search Abstraction Layer
|
||||
challengeType: 4
|
||||
videoUrl: ''
|
||||
forumTopicId: 302361
|
||||
dashedName: build-an-image-search-abstraction-layer
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
**目标：** 构建一个完整的堆栈JavaScript应用程序，允许您搜索如下图像： [https](https://cryptic-ridge-9197.herokuapp.com/api/imagesearch/lolcats%20funny?offset=10) ： [//cryptic-ridge-9197.herokuapp.com/api/imagesearch/lolcats%20funny？offset = 10](https://cryptic-ridge-9197.herokuapp.com/api/imagesearch/lolcats%20funny?offset=10)并浏览此类最近的搜索查询： [https](https://cryptic-ridge-9197.herokuapp.com/api/latest/imagesearch/) ： [//cryptic-ridge-9197.herokuapp.com/api/latest/imagesearch/](https://cryptic-ridge-9197.herokuapp.com/api/latest/imagesearch/) 。然后将其部署到Glitch。请注意，对于每个项目，您应该创建一个新的GitHub存储库和一个新的Glitch项目。如果您不记得如何执行此操作，请重新访问[https://freecodecamp.org/challenges/get-set-for-our-api-development-projects](/challenges/get-set-for-our-api-development-projects) 。以下是您应该为此项目实现的特定用户故事： **用户故事：** 我可以获取与给定搜索字符串相关的一组图像的图像URL，替代文本和页面URL。 **用户故事：** 我可以通过在URL中添加？offset = 2参数来对响应进行分页。 **用户故事：** 我可以获得最近提交的搜索字符串列表。完成这些用户故事的实现后，单击“我已完成此挑战”按钮，然后输入GitHub存储库和在Glitch上运行的实时应用程序的URL。您可以通过Facebook上的朋友分享您的项目反馈。
|
||||
Build a full stack JavaScript app that allows you to search for images like this: <https://image-search-abstraction-layer.freecodecamp.rocks/query/lolcats%20funny?page=10> and browse recent search queries like this: <https://image-search-abstraction-layer.freecodecamp.rocks/recent/>. Use a site builder of your choice to complete the project.
|
||||
|
||||
Here are the specific user stories you should implement for this project:
|
||||
|
||||
**User Story:** You can get the image URLs, description and page URLs for a set of images relating to a given search string.
|
||||
|
||||
**User Story:** You can paginate through the responses by adding a `?page=2` parameter to the URL.
|
||||
|
||||
**User Story:** You can get a list of the most recently submitted search strings.
|
||||
|
||||
When you are done, make sure a working demo of your project is hosted somewhere public. Then submit the URL to it in the `Solution Link` field. Optionally, also submit a link to your project's source code in the `GitHub Link` field.
|
||||
|
||||
# --solutions--
|
||||
|
||||
|
||||
@ -1,14 +1,36 @@
|
||||
---
|
||||
id: bd7154d8c242eddfaeb5bd13
|
||||
title: 打造生命游戏
|
||||
title: Build the Game of Life
|
||||
challengeType: 3
|
||||
videoUrl: ''
|
||||
forumTopicId: 302362
|
||||
dashedName: build-the-game-of-life
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
**目标：** 构建一个功能类似于此的[CodePen.io](https://codepen.io)应用程序： [https](https://codepen.io/freeCodeCamp/full/BpwMZv/) **：** [//codepen.io/freeCodeCamp/full/BpwMZv/](https://codepen.io) 。完成以下[用户故事](https://en.wikipedia.org/wiki/User_story) 。使用您需要的任何库或API。给它你自己的个人风格。 **用户故事：** 当我第一次到达游戏时，它将随机生成一个棋盘并开始播放。 **用户故事：** 我可以开始和停止董事会。 **用户故事：** 我可以设置电路板。 **用户故事：** 我可以清除董事会。 **用户故事：** 当我按下开始时，游戏将播出。 **用户故事：** 每次董事会改变，我都能看到已经过了多少代。 **提示：** 以下是对Conway的生命游戏的解释，来自John Conway本人： [https](https://www.youtube.com/watch?v=E8kUJL04ELA) ： [//www.youtube.com/watch？v =](https://www.youtube.com/watch?v=E8kUJL04ELA) **E8kUJL04ELA提示：** 这里是Conway生命游戏的概述，规则供您参考： [https：// en.wikipedia.org/wiki/Conway%27s_Game_of_Life](https://en.wikipedia.org/wiki/Conway%27s_Game_of_Life)如果卡住，请记得使用[Read-Search-Ask](//github.com/FreeCodeCamp/freecodecamp/wiki/FreeCodeCamp-Get-Help) 。完成后，单击“我已完成此挑战”按钮并包含指向CodePen的链接。您可以通过Facebook上的朋友分享您的项目反馈。
|
||||
**Objective:** Build a [CodePen.io](https://codepen.io) app that is functionally similar to this: <https://codepen.io/freeCodeCamp/full/BpwMZv/>.
|
||||
|
||||
Fulfill the below [user stories](https://en.wikipedia.org/wiki/User_story). Use whichever libraries or APIs you need. Give it your own personal style.
|
||||
|
||||
**User Story:** When I first arrive at the game, it will randomly generate a board and start playing.
|
||||
|
||||
**User Story:** I can start and stop the board.
|
||||
|
||||
**User Story:** I can set up the board.
|
||||
|
||||
**User Story:** I can clear the board.
|
||||
|
||||
**User Story:** When I press start, the game will play out.
|
||||
|
||||
**User Story:** Each time the board changes, I can see how many generations have gone by.
|
||||
|
||||
**Hint:** Here's an explanation of Conway's Game of Life from John Conway himself: <https://www.youtube.com/watch?v=E8kUJL04ELA>
|
||||
|
||||
**Hint:** Here's an overview of Conway's Game of Life with rules for your reference: [https://en.wikipedia.org/wiki/Conway%27s_Game_of_Life](https://en.wikipedia.org/wiki/Conway%27s_Game_of_Life)
|
||||
|
||||
When you are finished, include a link to your project on CodePen and click the "I've completed this challenge" button.
|
||||
|
||||
You can get feedback on your project by sharing it on the [freeCodeCamp forum](https://forum.freecodecamp.org/c/project-feedback/409).
|
||||
|
||||
# --solutions--
|
||||
|
||||
|
||||
@ -1,14 +1,26 @@
|
||||
---
|
||||
id: bd7158d8c443eddfaeb5bd0e
|
||||
title: 图表股市
|
||||
title: Chart the Stock Market
|
||||
challengeType: 4
|
||||
videoUrl: ''
|
||||
forumTopicId: 302363
|
||||
dashedName: chart-the-stock-market
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
**目标：** 构建一个功能类似于此的完整堆栈JavaScript应用程序： [http](http://watchstocks.herokuapp.com/) ： [//watchstocks.herokuapp.com/](http://watchstocks.herokuapp.com/)并将其部署到Heroku。请注意，对于每个项目，您应该创建一个新的GitHub存储库和一个新的Heroku项目。如果您不记得如何执行此操作，请重新访问[https://freecodecamp.com/challenges/get-set-for-our-dynamic-web-application-projects](/challenges/get-set-for-our-dynamic-web-application-projects) 。以下是您应为此项目实施的特定用户故事： **用户故事：** 我可以查看显示每个添加的股票的最近趋势线的图表。 **用户故事：** 我可以按符号名称添加新股票。 **用户故事：** 我可以删除股票。 **用户故事：** 当任何其他用户添加或删除股票时，我可以实时看到变化。为此，您需要使用Web套接字。完成这些用户故事的实现后，单击“我已完成此挑战”按钮，然后输入GitHub存储库和在Heroku上运行的实时应用程序的URL。您可以通过Facebook上的朋友分享您的项目反馈。
|
||||
Build a full stack JavaScript app that is functionally similar to this: <https://chart-the-stock-market.freecodecamp.rocks/>. Use a site builder of your choice to complete the project.
|
||||
|
||||
Here are the specific user stories you should implement for this project:
|
||||
|
||||
**User Story:** You can view a graph displaying the recent trend lines for each added stock.
|
||||
|
||||
**User Story:** You can add new stocks by their symbol name.
|
||||
|
||||
**User Story:** You can remove stocks.
|
||||
|
||||
**User Story:** You can see changes in real-time when any other user adds or removes a stock. For this you will need to use Web Sockets.
|
||||
|
||||
When you are done, make sure a working demo of your project is hosted somewhere public. Then submit the URL to it in the `Solution Link` field. Optionally, also submit a link to your project's source code in the `GitHub Link` field.
|
||||
|
||||
# --solutions--
|
||||
|
||||
|
||||
@ -1,14 +1,28 @@
|
||||
---
|
||||
id: bd7158d8c443eddfaeb5bd0f
|
||||
title: 管理图书交易俱乐部
|
||||
title: Manage a Book Trading Club
|
||||
challengeType: 4
|
||||
videoUrl: ''
|
||||
forumTopicId: 302364
|
||||
dashedName: manage-a-book-trading-club
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
**目标：** 构建一个功能类似于此的[Glitch](https://glitch.com)应用程序： [https](<https://chrome-delivery.glitch.me/ />) ： [//chrome-delivery.glitch.me](<https://chrome-delivery.glitch.me/ />) 。完成以下[用户故事](https://en.wikipedia.org/wiki/User_story) 。使用您需要的任何库或API。给它你自己的个人风格。 **用户故事：** 我可以查看每个用户发布的所有图书。 **用户故事：** 我可以添加一本新书。 **用户故事：** 我可以更新我的设置以存储我的全名，城市和州。 **用户故事：** 我可以提议交易并等待其他用户接受交易。完成这些用户故事的实现后，单击“我已完成此挑战”按钮，然后输入GitHub存储库和在Heroku上运行的实时应用程序的URL。您可以通过Facebook上的朋友分享您的项目反馈。
|
||||
**Objective:** Build a [Repl.it](https://repl.it/) app that is functionally similar to this: <https://manage-a-book-trading-club.freecodecamp.rocks/>.
|
||||
|
||||
Fulfill the below [user stories](https://en.wikipedia.org/wiki/User_story). Use whichever libraries or APIs you need. Give it your own personal style.
|
||||
|
||||
**User Story:** I can view all books posted by every user.
|
||||
|
||||
**User Story:** I can add a new book.
|
||||
|
||||
**User Story:** I can update my settings to store my full name, city, and state.
|
||||
|
||||
**User Story:** I can propose a trade and wait for the other user to accept the trade.
|
||||
|
||||
Once you've finished implementing these user stories, enter the URL to your live app and, optionally, your GitHub repository. Then click the "I've completed this challenge" button.
|
||||
|
||||
You can get feedback on your project by sharing it on the [freeCodeCamp forum](https://forum.freecodecamp.org/c/project-feedback/409).
|
||||
|
||||
# --solutions--
|
||||
|
||||
|
||||
@ -1,14 +1,28 @@
|
||||
---
|
||||
id: bd7108d8c242eddfaeb5bd13
|
||||
title: 全球地图数据
|
||||
title: Map Data Across the Globe
|
||||
challengeType: 3
|
||||
videoUrl: ''
|
||||
forumTopicId: 302365
|
||||
dashedName: map-data-across-the-globe
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
**目标：** 构建一个功能类似于此的[CodePen.io](https://codepen.io)应用程序： [https](https://codepen.io/freeCodeCamp/full/mVEJag) **：** [//codepen.io/freeCodeCamp/full/mVEJag](https://codepen.io) 。完成以下[用户故事](https://en.wikipedia.org/wiki/User_story) 。使用您需要的任何库或API。给它你自己的个人风格。 **用户故事：** 我可以看到所有陨石落在世界地图上的位置。 **用户故事：** 我可以通过查看陨石在地图上的表示方式来判断陨石的相对大小。 **用户故事：** 我可以将鼠标悬停在陨石的数据点上以获取更多数据。 **提示：** 这是一个可用于构建此数据集的数据集： [https](https://raw.githubusercontent.com/freeCodeCamp/ProjectReferenceData/master/meteorite-strike-data.json) ： [//raw.githubusercontent.com/freeCodeCamp/ProjectReferenceData/master/meteorite-strike-data.json](https://raw.githubusercontent.com/freeCodeCamp/ProjectReferenceData/master/meteorite-strike-data.json)如果卡住，请记住使用[Read-Search-Ask](https://forum.freecodecamp.org/t/how-to-get-help-when-you-are-stuck-coding/19514) 。完成后，单击“我已完成此挑战”按钮并包含指向CodePen的链接。您可以通过Facebook上的朋友分享您的项目反馈。
|
||||
**Objective:** Build a [CodePen.io](https://codepen.io) app that is functionally similar to this: <https://codepen.io/freeCodeCamp/full/mVEJag>.
|
||||
|
||||
Fulfill the following [user stories](https://en.wikipedia.org/wiki/User_story). Use whichever libraries or APIs you need. Give it your own personal style.
|
||||
|
||||
**User Story:** I can see where all Meteorites landed on a world map.
|
||||
|
||||
**User Story:** I can tell the relative size of the meteorite, just by looking at the way it's represented on the map.
|
||||
|
||||
**User Story:** I can mouse over the meteorite's data point for additional data.
|
||||
|
||||
**Hint:** Here's a dataset you can use to build this: <https://raw.githubusercontent.com/freeCodeCamp/ProjectReferenceData/master/meteorite-strike-data.json>
|
||||
|
||||
When you are finished, include a link to your project on CodePen and click the "I've completed this challenge" button.
|
||||
|
||||
You can get feedback on your project by sharing it on the [freeCodeCamp forum](https://forum.freecodecamp.org/c/project-feedback/409).
|
||||
|
||||
# --solutions--
|
||||
|
||||
|
||||
@ -1,14 +1,38 @@
|
||||
---
|
||||
id: bd7150d8c442eddfafb5bd1c
|
||||
title: P2P视频聊天应用
|
||||
challengeType: 3
|
||||
videoUrl: ''
|
||||
title: P2P Video Chat Application
|
||||
challengeType: 4
|
||||
forumTopicId: 302366
|
||||
dashedName: p2p-video-chat-application
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
**目标：** 构建一个功能类似于此的[Glitch](https://glitch.com)应用程序： [https](https://grove-voice.glitch.me/) ： [//grove-voice.glitch.me](https://grove-voice.glitch.me/) 。完成以下[用户故事](https://en.wikipedia.org/wiki/User_story) 。使用您需要的任何库或API。给它你自己的个人风格。 **用户故事：** 到达后，浏览器将提示我访问我的相机和麦克风。 **用户故事：** 在我给予许可后，系统会提示我输入房间名称。 **用户故事：** 输入房间名称后，如果之前没有该房间的房间，则会创建房间。 **用户故事：我的** 一个朋友可以随后访问同一个网站，输入我输入的同一个房间，然后加入同一个房间，然后与我进行视频聊天。 **用户故事：** 如果我输入房间名称，并且该房间已经有两个人，我会收到房间已满的通知。 **用户故事：** 任何人都可以创建或加入任何房间。并且可以有任意数量的房间，但所有房间都必须具有唯一的名称。 **用户故事：** 我可以选择不允许该网站访问我的麦克风和网络摄像头。如果我选择不这样做，如果出现其他一些驱动程序问题，我会看到一条错误消息，说明这些是必需的。 **用户故事：** 当我选择取消房间名称输入步骤，或者如果我没有输入姓名或仅输入空格时，它应该再次要求我输入有效的房间名称。 **用户故事：** 如果房间中的两个人中的一个断开连接，他们可以重新连接到同一个房间并继续聊天。如果卡住，请记得使用[Read-Search-Ask](https://forum.freecodecamp.org/t/how-to-get-help-when-you-are-stuck-coding/19514) 。完成后，单击“我已完成此挑战”按钮，并包含指向您的Glitch应用程序的链接。您可以通过Facebook上的朋友分享您的项目反馈。
|
||||
**Objective:** Build a [Repl.it](https://repl.it/) app that is functionally similar to this: <https://p2p-video-chat-application.freecodecamp.rocks/>.
|
||||
|
||||
Fulfill the below [user stories](https://en.wikipedia.org/wiki/User_story). Use whichever libraries or APIs you need. Give it your own personal style.
|
||||
|
||||
**User Story:** Upon arriving, the browser will prompt me to access my camera and microphone.
|
||||
|
||||
**User Story:** After I give it permission, I am prompted to type in a room name.
|
||||
|
||||
**User Story:** Once I type in the room name, a room will be created if no room of that name existed before.
|
||||
|
||||
**User Story:** A friend of mine can subsequently go to the same website, type in the same room I entered, and join the same room, then enter into a video chat with me.
|
||||
|
||||
**User Story:** If I type in a room name, and there are already two people in that room, I get a notification that the room is full.
|
||||
|
||||
**User Story:** Anyone can create or join any room. And there can be any number of rooms, but all of them must have unique names.
|
||||
|
||||
**User Story:** I can choose to not permit the site to access my microphone and webcam. If I choose not to do this, or if some other driver problem occurs, I see an error message saying these are required.
|
||||
|
||||
**User Story:** When I choose to cancel the room name input step, or if I type in no name, or just spaces, it should again ask me again to type in a valid room name.
|
||||
|
||||
**User Story:** If one of the two people in the room get disconnected, they can reconnect to the same room and continue chatting.
|
||||
|
||||
Once you've finished implementing these user stories, enter the URL to your live app and, optionally, your GitHub repository. Then click the "I've completed this challenge" button.
|
||||
|
||||
You can get feedback on your project by sharing it on the [freeCodeCamp forum](https://forum.freecodecamp.org/c/project-feedback/409).
|
||||
|
||||
# --solutions--
|
||||
|
||||
|
||||
@ -1,14 +1,28 @@
|
||||
---
|
||||
id: bd7198d8c242eddfaeb5bd13
|
||||
title: 用力导向图显示全国连续性
|
||||
title: Show National Contiguity with a Force Directed Graph
|
||||
challengeType: 3
|
||||
videoUrl: ''
|
||||
forumTopicId: 302367
|
||||
dashedName: show-national-contiguity-with-a-force-directed-graph
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
**目标：** 构建一个功能类似于此的[CodePen.io](https://codepen.io)应用程序： [https](https://codepen.io/freeCodeCamp/full/xVopBo) **：** [//codepen.io/freeCodeCamp/full/xVopBo](https://codepen.io) 。完成以下[用户故事](https://en.wikipedia.org/wiki/User_story) 。使用您需要的任何库或API。给它你自己的个人风格。 **用户故事：** 我可以看到一个强制导向图，显示哪些国家/地区共享边界。 **用户故事：** 我可以在其节点上看到每个国家/地区的旗帜。 **提示：** 这是一个可用于构建此数据集的数据集： [https](https://raw.githubusercontent.com/DealPete/forceDirected/master/countries.json) **：** //raw.githubusercontent.com/DealPete/forceDirected/master/countries.json **提示：** 您可以在[https：//www.flag-](https://www.flag-sprites.com)创建国旗的spritesheet [sprites.com](https://www.flag-sprites.com) 。如果卡住，请记得使用[Read-Search-Ask](https://forum.freecodecamp.org/t/how-to-get-help-when-you-are-stuck-coding/19514) 。完成后，单击“我已完成此挑战”按钮并包含指向CodePen的链接。您可以通过Facebook上的朋友分享您的项目反馈。
|
||||
**Objective:** Build a [CodePen.io](https://codepen.io) app that is functionally similar to this: <https://codepen.io/freeCodeCamp/full/xVopBo>.
|
||||
|
||||
Fulfill the following [user stories](https://en.wikipedia.org/wiki/User_story). Use whichever libraries or APIs you need. Give it your own personal style.
|
||||
|
||||
**User Story:** I can see a Force-directed Graph that shows which countries share borders.
|
||||
|
||||
**User Story:** I can see each country's flag on its node.
|
||||
|
||||
**Hint:** Here's a dataset you can use to build this: <https://raw.githubusercontent.com/DealPete/forceDirected/master/countries.json>
|
||||
|
||||
**Hint:** You can create a spritesheet of national flags at <https://www.flag-sprites.com>.
|
||||
|
||||
When you are finished, include a link to your project on CodePen and click the "I've completed this challenge" button.
|
||||
|
||||
You can get feedback on your project by sharing it on the [freeCodeCamp forum](https://forum.freecodecamp.org/c/project-feedback/409).
|
||||
|
||||
# --solutions--
|
||||
|
||||
|
||||
@ -1,14 +1,30 @@
|
||||
---
|
||||
id: bd7158d8c442eddfaeb5bd10
|
||||
title: 显示当地天气
|
||||
title: Show the Local Weather
|
||||
challengeType: 3
|
||||
videoUrl: ''
|
||||
forumTopicId: 302368
|
||||
dashedName: show-the-local-weather
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
**目标：** 构建一个功能类似于此的[CodePen.io](https://codepen.io)应用程序： [https](https://codepen.io/freeCodeCamp/full/bELRjV) **：** [//codepen.io/freeCodeCamp/full/bELRjV](https://codepen.io) 。 **规则＃1：** 不要查看示例项目的代码。自己搞清楚。 **规则＃2：** 完成以下[用户故事](https://en.wikipedia.org/wiki/User_story) 。使用您需要的任何库或API。给它你自己的个人风格。 **用户故事：** 我可以在当前位置看到天气。 **用户故事：** 根据天气情况，我可以看到不同的图标或背景图像（例如雪山，炎热的沙漠）。 **用户故事：** 我可以按一个按钮在华氏温度和摄氏温度之间切换。 **注意：** 许多Internet浏览器现在需要HTTP Secure（ `https://` ）连接才能通过HTML5 Geolocation获取用户的语言环境。因此，我们建议使用HTML5 Geolocation获取用户位置，然后使用freeCodeCamp Weather API <https://fcc-weather-api.glitch.me> ，该API使用HTTP安全连接进行天气预报。此外，请务必通过`https://`连接到[CodePen.io](https://codepen.io) 。如果卡住，请记得使用[Read-Search-Ask](https://forum.freecodecamp.org/t/how-to-get-help-when-you-are-stuck-coding/19514) 。完成后，单击“我已完成此挑战”按钮并包含指向CodePen的链接。您可以通过Facebook上的朋友分享您的项目反馈。
|
||||
**Objective:** Build a [CodePen.io](https://codepen.io) app that is functionally similar to this: <https://codepen.io/freeCodeCamp/full/bELRjV>.
|
||||
|
||||
**Rule #1:** Don't look at the example project's code. Figure it out for yourself.
|
||||
|
||||
**Rule #2:** Fulfill the below [user stories](https://en.wikipedia.org/wiki/User_story). Use whichever libraries or APIs you need. Give it your own personal style.
|
||||
|
||||
**User Story:** I can see the weather in my current location.
|
||||
|
||||
**User Story:** I can see a different icon or background image (e.g. snowy mountain, hot desert) depending on the weather.
|
||||
|
||||
**User Story:** I can push a button to toggle between Fahrenheit and Celsius.
|
||||
|
||||
**Note:** Many internet browsers now require an HTTP Secure (`https://`) connection to obtain a user's locale via HTML5 Geolocation. For this reason, we recommend using HTML5 Geolocation to get user location and then use the freeCodeCamp Weather API <https://weather-proxy.freecodecamp.rocks/> which uses an HTTP Secure connection for the weather. Also, be sure to connect to [CodePen.io](https://codepen.io) via `https://`.
|
||||
|
||||
When you are finished, include a link to your project on CodePen and click the "I've completed this challenge" button.
|
||||
|
||||
You can get feedback on your project by sharing it on the [freeCodeCamp forum](https://forum.freecodecamp.org/c/project-feedback/409).
|
||||
|
||||
# --solutions--
|
||||
|
||||
|
||||
@ -1,14 +1,32 @@
|
||||
---
|
||||
id: bd7158d8c442eddfaeb5bd1f
|
||||
title: 使用Twitch JSON API
|
||||
title: Use the Twitch JSON API
|
||||
challengeType: 3
|
||||
videoUrl: ''
|
||||
forumTopicId: 19541
|
||||
dashedName: use-the-twitch-json-api
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
**目标：** 构建一个功能类似于此的[CodePen.io](https://codepen.io)应用程序： [https](https://codepen.io/freeCodeCamp/full/Myvqmo/) **：** [//codepen.io/freeCodeCamp/full/Myvqmo/](https://codepen.io) 。完成以下[用户故事](https://en.wikipedia.org/wiki/User_story) 。使用您需要的任何库或API。给它你自己的个人风格。 **用户故事：** 我可以看到freeCodeCamp当前是否在Twitch.tv上流式传输。 **用户故事：** 我可以点击状态输出并直接发送到freeCodeCamp的Twitch.tv频道。 **用户故事：** 如果Twitch用户当前正在播放，我可以看到有关他们正在播放的内容的其他详细信息。 **提示：** 请参阅[http://forum.freecodecamp.org/t/use-the-twitchtv-json-api/19541上](http://forum.freecodecamp.org/t/use-the-twitchtv-json-api/19541)对Twitch.tv的JSONP API的示例调用。 **提示：** 有关此API调用的相关文档位于： [https](https://dev.twitch.tv/docs/v5/reference/streams/#get-stream-by-user) ： [//dev.twitch.tv/docs/v5/reference/streams/#get-stream-by-user](https://dev.twitch.tv/docs/v5/reference/streams/#get-stream-by-user) 。 **提示：** 这是定期传输的人的Twitch.tv用户名数组： `["ESL_SC2", "OgamingSC2", "cretetion", "freecodecamp", "storbeck", "habathcx", "RobotCaleb", "noobs2ninjas"]` **更新：** 由于[此处](https://blog.twitch.tv/client-id-required-for-kraken-api-calls-afbb8e95f843#.f8hipkht1)解释的API使用条件发生变化，Twitch.tv现在需要API密钥，但我们已经构建了一种解决方法。使用[https://wind-bow.glitch.me/twitch-api](https://wind-bow.glitch.me)而不是twitch的API基本URL（即`https://api.twitch.tv/kraken），您仍然可以获取帐户信息，而无需注册API密钥。如果卡住，请记得使用`[Read-Search-Ask](https://forum.freecodecamp.org/t/how-to-get-help-when-you-are-stuck-coding/19514) 。完成后，单击“我已完成此挑战”按钮并包含指向CodePen的链接。您可以通过Facebook上的朋友分享您的项目反馈。
|
||||
**Objective:** Build a [CodePen.io](https://codepen.io) app that is functionally similar to this: <https://codepen.io/freeCodeCamp/full/Myvqmo/>.
|
||||
|
||||
Fulfill the below [user stories](https://en.wikipedia.org/wiki/User_story). Use whichever libraries or APIs you need. Give it your own personal style.
|
||||
|
||||
**User Story:** I can see whether freeCodeCamp is currently streaming on Twitch.tv.
|
||||
|
||||
**User Story:** I can click the status output and be sent directly to the freeCodeCamp's Twitch.tv channel.
|
||||
|
||||
**User Story:** if a Twitch user is currently streaming, I can see additional details about what they are streaming.
|
||||
|
||||
**Hint:** The relevant documentation about Twitch.tv's JSON API is here: <https://dev.twitch.tv/docs/api/reference/#get-streams>.
|
||||
|
||||
**Hint:** Here's an array of the Twitch.tv usernames of people who regularly stream: `["ESL_SC2", "OgamingSC2", "cretetion", "freecodecamp", "storbeck", "habathcx", "RobotCaleb", "noobs2ninjas"]`
|
||||
|
||||
**UPDATE:** Due to a change in conditions on API usage, Twitch.tv requires an API key, but we've built a workaround. Use <https://twitch-proxy.freecodecamp.rocks/> instead of Twitch's API base URL (i.e. `https://api.twitch.tv/helix` ) and you'll still be able to get account information, without needing to sign up for an API key.
|
||||
|
||||
When you are finished, include a link to your project on CodePen and click the "I've completed this challenge" button.
|
||||
|
||||
You can get feedback on your project by sharing it on the [freeCodeCamp forum](https://forum.freecodecamp.org/c/project-feedback/409).
|
||||
|
||||
# --solutions--
|
||||
|
||||
|
||||
Reference in New Issue
Block a user