构建你的第一个真实项目：任务管理应用

是时候把我们学到的一切结合起来，从头开始构建一个完整的项目了。在本教程中，我们将构建一个简单但功能完整的任务管理应用。这是一个经典的"CRUD"（创建、读取、更新、删除）应用，是网络开发的基石。

项目仓库： 你可以在GitHub 这里找到这个项目的完整代码。（注意：这是一个占位符链接。你将创建你自己的仓库）。

步骤1：与AI一起规划

我们将从要求AI创建计划开始，就像在上一课中一样。

"我想使用HTML、CSS和JavaScript构建一个简单的任务管理应用。任务应该保存在浏览器的本地存储中。请为HTML结构、CSS样式和JavaScript逻辑创建一个计划。"

步骤2：HTML结构

基于AI的计划，我们将创建 index.html 文件。它将有一个新任务的输入字段、一个添加按钮和一个显示任务的列表。

<!DOCTYPE html>
<html>
<head>
    <title>任务管理器</title>
    <link rel="stylesheet" type="text/css" href="css/style.css">
</head>
<body>
    <div class="container">
        <h1>任务管理器</h1>
        <input type="text" id="task-input" placeholder="添加新任务...">
        <button id="add-task-btn">添加任务</button>
        <ul id="task-list"></ul>
    </div>
    <script src="js/main.js"></script>
</body>
</html>

步骤3：CSS样式

接下来，我们将请AI生成一些简单的CSS，使我们的应用看起来整洁。创建 css/style.css 文件。

"为任务管理HTML生成一些简单的CSS。让它看起来整洁和现代。"

步骤4：JavaScript逻辑（核心部分）

这是魔法发生的地方。在 js/main.js 中，我们将编写代码来处理CRUD操作。我们可以请AI帮助我们完成每一部分。

创建： 从输入字段获取值并将其添加到任务数组。
读取： 在 <ul> 元素中显示任务。将任务保存到 localStorage，以便它们在页面刷新时持久保存。
更新： 添加一个按钮来标记任务为完成（例如，通过添加 completed 类）。
删除： 添加一个删除按钮来从列表中删除任务。

这是一个让你开始的提示：

"为任务管理器编写JavaScript。它应该能够添加任务、显示它们并将它们保存到本地存储。当页面加载时，它应该从本地存储加载任务。"

步骤5：整合和测试

在网络浏览器中打开你的 index.html 文件。测试所有功能：

你能添加任务吗？
如果你刷新页面，任务会重新出现吗？
你能将任务标记为完成吗？
你能删除任务吗？

如果你遇到任何错误，请使用我们在之前课程中学到的调试技术。请AI帮助你！

轮到你了

按照这些步骤构建任务管理应用。这是你的第一个全栈（虽然是客户端）应用。完成后，将代码推送到GitHub上的新仓库。恭喜，你已经构建并发布了你的第一个真实项目！

步骤1：与AI一起规划​

步骤2：HTML结构​

步骤3：CSS样式​

步骤4：JavaScript逻辑（核心部分）​

步骤5：整合和测试​

轮到你了​