夜雨聆风个人介绍网页主要训练“页面展示”。待办清单工具开始训练“用户交互”。
这个项目很适合小白，因为它的功能足够简单，但已经包含一个小应用的核心结构：输入、保存、显示、修改状态、删除。
你会看到一个重要变化：代码不再只是把内容展示出来，而是要根据用户操作改变页面。
这篇文章带你用 AI 做一个单文件待办清单工具。重点不是一次做得多完整，而是理解交互功能如何一步步搭起来。
一、这次实战要做什么
本次目标是做一个网页端待办清单工具。
第一版功能：
输入待办事项。
点击按钮新增到列表。
空内容不能新增。
点击事项切换完成状态。
点击删除按钮删除事项。
技术要求：
只使用 HTML、CSS、JavaScript。
所有代码放在一个 HTML 文件里。
不使用第三方库。
不需要后端和数据库。
可以直接用浏览器打开。
暂时不做：
登录注册。
多人协作。
分类标签。
截止日期。
云同步。
拖拽排序。
第一版只练习最基础的交互。
二、先理解待办工具的数据
待办清单看起来是页面，但核心其实是数据。
每条待办事项至少包含：
| 字段 | 说明 | 示例 |
|---|---|---|
| id | 唯一标识，用来区分每条事项 | 1 |
| text | 待办内容 | 买牛奶 |
| completed | 是否完成 | true 或 false |
对小白来说，可以先这样理解：
页面上看到的列表，是根据一组待办数据生成的。用户新增、完成、删除，其实都是在修改这组数据。数据变了，页面再重新显示。
这个思路非常重要。
后面很多应用都是类似逻辑：先有数据，再根据数据渲染页面。
三、先让 AI 拆功能流程
不要直接写代码。
先让 AI 拆流程：
我是 0 基础编程小白。我想做一个网页端待办清单工具。请先不要写代码。请帮我拆解用户操作流程。第一版功能：1. 输入待办事项。2. 点击按钮新增到列表。3. 空内容不能新增。4. 点击事项切换完成状态。5. 点击删除按钮删除事项。请输出：1. 用户会做哪些动作。2. 每个动作会改变什么数据。3. 页面应该发生什么变化。4. 每个功能的完成标准。
你要确认 AI 是否理解：
输入内容来自输入框。
新增后要出现在列表。
完成状态要有视觉变化。
删除只删除对应项。
流程确认后再让它写代码。
四、生成第一版代码的提示词
下面是可复制提示词：
我是 0 基础编程小白。请帮我生成一个单文件待办清单工具。功能要求：1. 输入框用于输入待办事项。2. 点击“添加”按钮后，把内容加入列表。3. 如果输入为空，不能添加，并显示提示。4. 点击某条待办事项，可以切换完成和未完成状态。5. 每条事项右侧有删除按钮，点击后删除对应事项。技术要求：1. 只使用 HTML、CSS、JavaScript。2. 所有代码放在一个 HTML 文件里。3. 不使用任何第三方库。4. 保存为 index.html 后可以直接用浏览器打开。代码要求：1. 用中文注释标出主要逻辑。2. 变量名尽量清晰。3. 不要实现我没有要求的复杂功能。输出要求：1. 先复述你理解的需求。2. 再给完整代码。3. 最后说明如何运行和测试。4. 告诉我如果要修改标题、按钮文字、提示文案，应该改哪里。
这段提示词会让 AI 生成一个最小可运行版本。
先不要要求本地保存。等基础功能稳定后再加。
五、运行后先检查 5 个核心功能
保存为 index.html 后，用浏览器打开。
测试清单：
| 测试 | 操作 | 预期结果 |
|---|---|---|
| 新增 | 输入“买牛奶”，点击添加 | 列表出现“买牛奶” |
| 空输入 | 不输入内容，点击添加 | 不新增，并出现提示 |
| 多条新增 | 连续添加 3 条 | 列表显示 3 条 |
| 完成状态 | 点击某条事项文字 | 该事项显示完成状态 |
| 删除 | 点击某条事项删除按钮 | 只删除对应事项 |
如果这些都通过，第一版就合格。
如果某项失败，不要让 AI 大改。只针对失败项提问。
例如：
新增功能正常，但删除功能有问题。点击删除按钮后，所有事项都消失了。请只修复删除逻辑，不要修改样式和新增逻辑。
六、让 AI 解释核心代码
功能能运行后，让 AI 讲解代码。
提示词：
我是 0 基础编程小白。请讲解这个待办清单代码。重点解释：1. todos 数组保存了什么。2. 添加按钮点击后发生什么。3. 为什么新增后列表会更新。4. 点击事项为什么能切换完成状态。5. 删除按钮如何删除对应事项。要求：1. 用小白能懂的话讲。2. 用箭头画出数据流。3. 标出可以安全修改的文案和样式。4. 标出不要乱改的核心逻辑。
你至少要理解一条数据流：
输入框文字 ↓点击添加按钮 ↓生成一条待办数据 ↓放进 todos 数组 ↓重新渲染列表 ↓页面显示新事项
能理解这条线，就掌握了待办清单的核心。
七、第一次迭代：增加本地保存
基础功能稳定后，可以加本地保存。
本地保存的意思是：刷新页面后，待办事项仍然存在。
提示词：
请在当前待办清单工具中增加本地保存功能。目标：刷新页面后，已添加的待办事项和完成状态仍然保留。技术要求：1. 使用浏览器 localStorage。2. 不使用后端和数据库。3. 不新增第三方库。修改限制：1. 不要改变现有页面结构。2. 不要修改新增、完成、删除的交互方式。3. 只在必要位置增加保存和读取逻辑。输出要求：1. 先说明需要修改哪几处。2. 再给最小修改方案。3. 说明 localStorage 在这里保存了什么。4. 给出测试步骤。
测试：
添加两条待办。
标记其中一条为完成。
刷新页面。
检查两条是否还在，完成状态是否保留。
八、第二次迭代：增加筛选
如果本地保存稳定，可以继续加筛选。
筛选功能包括：
全部。
未完成。
已完成。
提示词：
请给待办清单增加筛选功能。功能要求：1. 有三个筛选按钮：全部、未完成、已完成。2. 点击“全部”显示所有事项。3. 点击“未完成”只显示未完成事项。4. 点击“已完成”只显示已完成事项。限制：1. 不要修改已有数据结构，除非确实必要。2. 不要影响新增、删除、完成状态切换。3. 不要新增第三方库。4. 先给修改计划，再给代码。完成后给测试步骤。
注意：筛选只是改变显示，不应该删除原始数据。
如果点击“未完成”后已完成事项消失，这是正常显示；切回“全部”后它应该还在。
九、常见 bug 和排查方法
待办清单常见问题：
| 问题 | 可能原因 |
|---|---|
| 点击添加没反应 | 按钮事件没绑定，或选择器写错 |
| 空内容也能新增 | 没有做空值校验 |
| 删除错了事项 | id 或索引处理有误 |
| 完成状态不显示 | CSS 类名没加上，或渲染逻辑没处理 |
| 刷新后数据丢失 | localStorage 没保存或没读取 |
| 筛选后数据不见了 | 筛选时错误修改了原始数组 |
排查提示词：
我的待办清单出现 bug。现象：【描述具体问题】操作步骤：【写出触发步骤】预期结果：【应该发生什么】实际结果：【实际发生什么】相关代码：【粘贴相关代码】请先判断问题属于新增、渲染、删除、完成状态、本地保存还是筛选。然后给最小修复方案。不要修改无关功能。
先分类，再修复，效率更高。
十、这次实战的验收清单
基础验收：
1. 页面能直接用浏览器打开。2. 可以新增待办事项。3. 空输入不能新增。4. 可以切换完成状态。5. 可以删除指定事项。6. 每次操作后列表显示正确。
进阶验收：
1. 刷新页面后数据不丢失。2. 完成状态刷新后仍然保留。3. 可以按全部、未完成、已完成筛选。4. 筛选不会删除原始数据。
学习验收：
1. 你能说出 todos 数组负责什么。2. 你能说出新增、完成、删除分别改了什么数据。3. 你能说出 localStorage 的作用。4. 你知道哪些文案和样式可以安全修改。
不要跳过学习验收。实战的目标不是只拿到代码，而是能理解和继续改。
十一、下一步可以怎么扩展
待办清单可以继续扩展：
添加任务创建时间。
添加任务优先级。
添加清空已完成。
添加搜索。
添加分类标签。
添加截止日期。
适配手机。
推荐顺序：
先加创建时间。
再加清空已完成。
再加搜索。
最后考虑分类和截止日期。
每次只加一个功能，并要求 AI 说明数据结构是否需要变化。
这篇文章你需要记住什么
待办清单是小白理解交互逻辑的第一个好项目。
它让你看到：用户输入会变成数据，数据保存到数组里，页面根据数据重新渲染。新增、完成、删除，本质上都是在改变数据。
完成这个实战后，你就不只是会做静态页面，而是开始理解“小工具”的基本工作方式。