5 个小项目来提高您的前端开发技能！

大家好，

随着新技术和框架的不断涌现，前端开发也在不断发展。人们常说，掌握一个新框架的最佳方法是边学习边构建一些东西。虽然我们都知道这一点，但始终存在一个问题：构建什么？

大多数教程都是从待办事项应用或计数器开始的。这些例子在学习过程中涵盖了基础知识，但它们也非常重复。所以，让我们看看一些有趣且与现实生活相关的项目，来练习任何前端框架。在本文中，我分享了 5 个受现实生活用例启发的有趣项目，以巩固你的前端技能。

这些项目大多需要不同的组件来构建。但它们足够棘手，需要你理解框架的不同功能及其实现模式。

你可以在任何框架中构建这些项目。我还创建了一个GitHub 仓库来存储所有这些项目创意。如果你喜欢这些挑战，请为这个仓库点个星🌟，我将不胜感激。你也可以为这些挑战列表做出贡献，或者分享你的解决方案。我们也可以创建一个解决方案版块来存放这些链接！

以下是所有挑战的列表 -

1. 智能文本区域：类似 Twitter 的带字符计数的文本区域
2. 具有选择/多选功能的下拉组件- 类似于 React Select
3. 自动建议输入
4. 管理 Cookie 弹出窗口
5. 进度条

智能文本区域

Twitter 类似文本区域，带有字符计数

如果你用过 Twitter，你肯定知道你的推文字符数限制是 280 个字符。一旦超过这个字符数限制，Twitter 就会开始用红色背景标记你的字符数，你会看到字符数变成负值！就是这样，这就是任务。你可以创建一个相同的文本区域，并自定义字符数限制。

其中包括的功能 -

1. 创建一个简单的文本区域并添加必要的样式。
2. 您的文本区域应该有一个可自定义的字符数限制。
3. 在文本区域下方显示此限制。改进 - 您可以添加显示计数的进度圈。
4. 如果字符超出限制，则突出显示它们，将计数减少为负值并禁用提交按钮。
5. 您还可以在仅剩 10% 字符限制时添加警告。
6. 如果用户添加诸如此类的符号@或#将其作为具有相关 href 的链接。
7. 在提交按钮之后，显示该段落。

下拉组件

具有选择/多选功能的组件，类似于React Select

下拉菜单是大多数应用程序的一部分，它们可以智能地实现组件。React Select是我非常信赖的库之一，可以用于我需要的任何类型的下拉菜单。但是，在学习的过程中，如果我们能够创建一个简单的下拉菜单组件，那么它将比使用库有很多好处。

其中包括的功能 -

1. 下拉组件，单击下拉菜单时将打开列表。
2. 当再次单击下拉菜单、按下esc键、单击外部以及选择任何元素后，此列表应关闭。
3. 也启用多选选项。
4. 类型搜索功能将是一个奖励。

自动建议输入

我们都尝试过谷歌搜索输入。它根据你的输入内容显示一些建议，这很酷。我们需要创建完全一样的功能。设想一个搜索位置的功能，你需要在城市和国家/地区后面添加名称。实现一个包含城市和国家/地区列表的搜索功能，并根据用户输入的内容显示选项。

这是面试中最常见的问题之一。所以这是一个加分点。

其中包括的功能 -

1. 带有自动建议选项的搜索输入。
2. 启用去抖动功能以节省多余的 API 调用。
3. 使用任意 api 或 json 列表来显示建议

管理 Cookie 弹出窗口

您是否曾经打开网站时看到一个烦人的弹窗，要求您接受 Cookie 或管理您的偏好设置？我们需要开发一个这样的组件！一个用于在应用程序中创建和管理 Cookie 的自定义弹窗组件。

其中包括的功能 -

1. 加载页面后，会出现一个要求接受 cookie 的弹出窗口。
2. 用户应该有接受全部/部分或不接受 cookie 的偏好。
3. 相同的偏好应该适用于您的应用程序。
4. 10-15 秒后，弹出窗口将隐藏并恢复默认状态。

进度条

进度条是显示某事物进展的常见工具。您可以在这里开发三种类型的进度条

1. 进度条显示页面滚动进度，位于页面的最顶部。
2. 进度条按照传递的百分比值显示进度。
3. 相同进度条的圆形变体。

暂时就这些。别忘了去GitHub 仓库看看，我会在这个列表中添加更多挑战。如果你有更多类似的想法，请创建一个 Pull 请求；如果你已经创建了任何解决方案，我也会在挑战下方提供链接。

非常感谢你阅读这篇文章。欢迎留言告诉我你的想法。如果你喜欢我的文章，也可以在Twitter上联系我，或者请我喝杯咖啡。

快乐编码并继续学习🙌