JavaScript 项目40+ JavaScript 项目供您参考 [附视频！]

这个故事最初发表在《The Smart Coder》上。

说实话，无论你读了多少编程书籍、看了多少视频、听了多少播客，如果你想成为一名更优秀的开发者，你就必须不断练习。

在前端领域，有很多框架：React、Angular、Vue，等等。它们每一个都非常棒，如果没有它们，前端开发就不会有现在的水平。但这些框架除了彼此之间存在差异之外，还有一个共同点，那就是它们都基于 JavaScript。没错，就是经典的 JS！

毫无疑问，JavaScript 是当今 Web 的运行引擎。对于每一位前端开发人员来说，无论是经验丰富的开发人员还是刚刚起步的新手，都必须掌握 JavaScript、HTML 和 CSS 的基础知识。

框架来来去去，但 JavaScript 永存！那么，练习 JavaScript 的最佳方法是什么呢？我能给出的最佳答案就是构建项目！

JavaScript 项目

JavaScript 项目是指导教程或 JavaScript 项目构想，可帮助您通过构建真实的应用程序、网站、游戏、组件等来提高您的技能。有时您会发现项目构想只包含一个标题和几句话，说明您应该构建什么。

示例：使用 JavaScript 构建一个计数器，对到年底的小时数进行倒计时。

如果您已经有一些经验并且只是寻求一些输入，这种格式就很好。

适合初学者的 JavaScript 项目

但是，如果您是 Web 开发新手，最好寻找带有源代码的 JavaScript 项目示例或专门为初学者提供的 JavaScript 项目。这些示例通常包含一个正在运行的演示应用程序、一个包含源代码的 GitHub 仓库，以及有关如何构建项目的分步指南。

JavaScript 实践项目

为了帮助你练习，我列出了九个很棒的 JavaScript 项目创意，你可以尝试一下，刷新你的技能，学习 JavaScript 的新知识，并在未来保持竞争力。它们都基于纯 JavaScript、一些 HTML 和一些 CSS。你可以将它们添加到你的作品集，展示给招聘人员或潜在雇主，或者保存在你的 GitHub 中作为未来工作的参考。需要明确的是：这并非旨在教会你 JavaScript 的一切。AZ 有适合你的 JavaScript 课程。这是为了让你动手实践，锻炼你的肌肉记忆。

JavaScript 项目概述

• 构建冥想应用程序 JavaScript 项目
• 构建虚拟键盘 JavaScript 项目
• 构建电子商务购物车 JavaScript 项目
• 构建天气应用程序 JavaScript 项目
• 构建问题跟踪器 JavaScript 项目
• 构建 PIN Pad JavaScript 项目
• 构建登陆页面 JavaScript 项目
• 构建石头剪刀布游戏 JavaScript 项目
• 构建井字游戏 JavaScript 项目
• 奖励：构建 9 合 1 迷你 JavaScript 项目
• 奖励：JavaScript 初学者项目想法
• 奖励：JavaScript 中级项目想法
• 奖励：JavaScript 高级项目构想

为了让你有个好的开始，我为这些教程项目做了评分。但这只是我个人的看法，所以我强烈建议你亲自尝试一下，因为你更了解自己最好的学习方式以及你目前的水平。

1. 构建冥想应用程序 JavaScript 项目

您将构建什么

你将开发一个提供冥想环境音效的应用程序。用户可以选择不同的计时器和声音。

等级

本教程使用原生 JavaScript，这正是我们想要的。讲师的讲解清晰易懂。此外，您还将学习如何使用 JS 处理声音和视频。这是一个非常有趣的 JavaScript 项目，我非常喜欢。

5/5 星

2. 构建虚拟键盘 JavaScript 项目

您将构建什么

您将使用 Vanilla JS、HTML 和 CSS 从头开始​​构建一个可在浏览器中使用、响应迅速且支持触摸的虚拟键盘！

等级

我喜欢这个项目的原创性，这是一个很棒的 JavaScript 项目创意。我之前从未创建过虚拟键盘，所以仅用 JavaScript、HTML 和 CSS 来做这个项目对我来说真的是一次很棒的体验。老师的讲解很清晰，讲解得也很好。

5/5 星

3. 构建电子商务购物车 JavaScript 项目

您将构建什么

您将使用 Vanilla JS、HTML 和 CSS 构建一个可用于在线商店和电商网站的购物车。讲师将使用 Contentful，这是一个用于存储产品信息的无头 CMS。学习如何使用 Contentful 或无头 CMS 并非本教程的重点，但它是一项很棒的服务，所以您绝对不会后悔亲眼见证它的实际应用。

等级

这个教程的录音很长。一方面，这令人印象深刻，但另一方面也有点费劲。讲师的声音清晰易懂。有时跟不上他的节奏，但这可能是因为这个项目比较复杂。所以这是一个中级的 JS 项目。

4/5 星

4. 构建天气应用 JavaScript 项目

您将构建什么

这个项目将教你如何使用 Vanilla JS、HTML 和 CSS 构建一个天气应用程序。讲师将使用 Dark Sky API 获取天气信息，这是一个很好的机会，让你学习如何与 API 交互，这也是 JavaScript 的另一大优势。

等级

这可能很适合你的作品集。如果你已经做过项目1，你应该已经认识这位老师了，我可以告诉你，他又一次提供了高质量的课程。他似乎真的知道如何以一种通俗易懂、引人入胜的方式授课。

5/5 星

5. 构建问题跟踪器 JavaScript 项目

您将构建什么

在本教程中，你将使用 Vanilla JS、HTML 和 CSS 构建一个问题跟踪器，它可以在任何网站上用于创建问题（例如，针对软件产品）。这也可以作为你作品集的一个很好的补充，并且是一个优秀的 JavaScript 初学者项目！

等级

导师对于他想和你一起构建什么有着清晰的概念。他的讲解清晰易懂，而且这个项目是一个 JavaScript 初学者项目。

4/5 星

6. 构建 PIN Pad JavaScript 项目

您将构建什么

在这个 JavaScript 项目中，你将构建一个在浏览器中运行的 PIN 码键盘，并具备检查 PIN 码正确性的功能。本教程仅使用 Vanilla JS、HTML 和 CSS。对于初学者来说，这是一个非常棒的 JavaScript 项目创意，你绝对值得一试！

等级

我觉得这是一个非常有创意的教程项目，展示了原生 JavaScript 的功能。老师讲解得非常清晰易懂。这是一个很酷的 JavaScript 项目，我做起来非常开心。

4/5 星

7. 构建登陆页面 JavaScript 项目

您将构建什么

Brad 将向您演示如何构建一个显示时间和用户姓名的交互式登录页面。该应用程序使用本地存储来存储姓名，因此您可以观察一下。

等级

Brad 以其完整而出色的教程而闻名。这个教程相当简短，我甚至觉得它过于简单，但只使用了 JavaScript、HTML 和 CSS，因此对于初学者来说，这是一个非常棒的 JavaScript 练习项目。

4/5 星

8. 构建石头剪刀布游戏 JavaScript 项目

您将构建什么

开发游戏可以成为一种学习新知识的有趣方式。JavaScript 为创建基于浏览器的游戏提供了无限可能。在本教程项目中，你将使用 JavaScript 制作经典的石头剪刀布游戏。

等级

和项目 1 一样，老师的教程也做得不错。他讲解风趣幽默，很容易跟上。而且，这个项目基于原生 JavaScript，对初学者来说是个不错的 JavaScript 项目！

4/5 星

9. 构建井字游戏 JavaScript 项目

您将构建什么

在这个项目中，你将构建一个井字棋游戏。它既有趣又复杂，因为它使用了基本的 AI 和算法。除此之外，所有代码都只使用 Vanilla JS、HTML 和 CSS 编写。

等级

这个项目规模适中，结构清晰，搭建过程充满乐趣。导师的讲解清晰易懂，很容易跟上。讲解非常到位，最终你应该会感觉很棒。

5/5 星

奖励：构建 9 合 1 迷你 JavaScript 项目

您将构建什么

这是我准备送给你们的一个小福利：一个包含九个独立 JavaScript 项目的录音，可以用来练习 JavaScript、HTML 和 CSS 技能。或许你们可以把其中的一些代码片段用到自己的网站上？

等级

我喜欢在一段录音中包含多个小片段的想法。老师的声音可以更清晰一些，有时跟不上他的节奏。

3/5 星

更多 JavaScript 项目构想

毫无疑问，这些都是一些很棒的项目，值得一试。如果你想自己动手创建一些东西，而不是遵循循序渐进的教程，我还有一些关于 JavaScript 项目的想法，你可以参考：

JavaScript 初学者项目

1. 使用 JavaScript 的数据库应用程序
   任务：创建一个简单的应用程序，使用现代浏览器的 IndexedDB 来存储数据。

2. 使用 JavaScript 将 JSON 转换为 CSV 的
   任务：构建一个简单的应用程序，用户可以在其中粘贴 JSON 字符串或上传 JSON 文件。该应用程序应将输入转换为 CSV 并显示给用户。

3. 使用 JavaScript 的倒计时器
   任务：构建一个简单的功能，用户可以输入秒数，然后该功能就会开始倒计时。

4. 使用 JavaScript 的测验应用程序
   任务：构建一个简单的测验应用程序，用户可以在其中勾选正确的解决方案。

5. 使用 JavaScript 的秒表应用程序
   任务：构建一个简单的秒表功能，用户可以启动和停止计时器。

6. 带有 JavaScript 的笔记应用程序
   任务：创建一个用户可以记录和管理笔记的应用程序。

7. 使用 JavaScript 的美元到美分转换器
   任务：用户应该能够输入美元数，然后应用程序会以美分为他们显示相应的值。

8. 使用 JavaScript 任务的番茄工作法时钟
   ：构建一个应用程序，用户可以在其中创建工作计时器（25 分钟）、休息计时器（5 分钟）以及启动/停止/重置这些计时器的功能。

9. 使用 JavaScript 的食谱应用
   任务：创建一个应用程序，让用户可以找到不同类别的食谱。奖励：集成食谱 API。

10. 使用 JavaScript 的 Lorem Ipsum 生成器
    任务：创建一个应用程序或组件，根据用户想要的长度生成 Lorem Ipsum 文本。

JavaScript 中级项目

1. 使用 JavaScript 的货币转换器
   任务：构建一个应用程序将一种货币转换为另一种货币。

2. 使用 JavaScript 绘图应用程序
   任务：用户应该能够在浏览器窗口中绘制简单的形式和绘画。

3. 使用 JavaScript 的表情符号应用程序
   任务：构建一个应用程序，用户可以在其中搜索表情符号并将其复制到剪贴板中。

4. 使用 JavaScript 的 Meme 生成器
   任务：构建一个应用程序，用户可以在其中上传图像、添加文本以及保存和下载它们。

5. 使用 JavaScript
   任务的密码生成器：用户应该能够创建具有不同规则集（如长度、难度、字符等）的随机密码。

6. 使用 JavaScript 的图像扫描仪
   任务：构建一个读取和可视化上传图像元数据的应用程序。

7. 使用 JavaScript 的待办事项应用程序
   任务：创建一个用于管理待办事项的应用程序。

8. 使用 JavaScript 的投票应用程序
   任务：创建一个应用程序，用户可以在其中创建民意调查供其他人投票。

9. 使用 JavaScript 的抽认卡应用程序
   任务：构建一个应用程序，用户可以在其中创建抽认卡供其他人学习新知识。

10. 使用 JavaScript 的图书查找器应用程序
    任务：创建一个应用程序，用户可以使用不同的标准（如作者、年份、内容、推荐等）搜索图书。奖励：集成图书 API。

JavaScript 高级项目

1. 使用 JavaScript 的电影应用
   任务：用户应该能够浏览电影、查看评分、查找演员、获取推荐。奖励：集成电影 API。

2. 使用 JavaScript
   任务的调查应用程序：用户应该能够为其他人创建调查，然后其他人也可以参加调查。

3. 使用 JavaScript 的聊天应用程序
   任务：用户应该能够实时聊天。

4. 使用 JavaScript 克隆 Instagram
   任务：用户应该能够体验 Instagram 的类似功能。例如图片上传、标记、点赞等。

5. 使用 JavaScript 克隆 Twitter
   任务：用户应该能够体验与 Twitter 类似的功能。例如图片上传、标签、点赞等。

6. 使用 JavaScript 克隆 Pinterest
   任务：用户应该能够体验 Pinterest 的类似功能。例如图片上传、收藏、点赞等。

7. 使用 JavaScript 的股票交易应用程序
   任务：用户应该能够查看图表并购买股票（当然可以模拟）。奖励：集成股票 API。

8. 使用 JavaScript 的分析应用程序
   任务：创建一个应用程序来跟踪网站上的用户行为，例如访问量、跳出率等。

9. 使用 JavaScript 的视频应用程序
   任务：创建一个用户可以上传和观看视频的应用程序。

10. 带有 JavaScript 的文件共享应用程序
    任务：用户应该能够上传文件（无论是否注册）。

一个好主意是，当您构建项目时将其记录下来并与社区分享！

好了，暂时就这些。我相信你肯定迫不及待地想开始学习这些精彩的教程了。不过，我还要告诉你一件事。观看视频并跟着编程是学习和练习的好方法。然而，如果你能为项目增添自己的特色——增强、修改、组合、改进，你就能获得最大的收益。或者更好的是：自己做一个项目，并记录制作过程。你会学到很多东西，其他人也会因此而感激你的！

另外，别忘了在这里和Twitter上关注我，以获取更多即将发布的帖子！