Appearance
项目四：待办事项管理小工具（综合实战）
📌 学习目标：从零到一完成一个完整的 Web 应用开发
⏱️ 预计时长：30 分钟
🎯 学到的能力：需求拆解、任务规划、全流程协作
一、任务描述
用 Codex 做一个"待办事项管理"小工具，具备以下功能：
- 添加待办事项
- 标记已完成
- 删除事项
- 数据保存在本地浏览器中
二、操作步骤
步骤 1：用自然语言描述完整需求
帮我做一个待办事项管理网页，功能要求：
1. 可以添加新的待办事项
2. 每个事项前面有复选框，点击可以标记为已完成
3. 已完成的事项显示为灰色并加删除线
4. 可以删除事项
5. 数据保存在浏览器的 localStorage 中，刷新页面不丢失
6. 界面简洁美观，支持深色模式切换步骤 2：让 Codex 拆解任务并制定计划
在 Codex 生成代码之前，让它先给出计划：
在开始写代码之前，请先告诉我你的实现计划，包括：
1. 使用什么技术栈
2. 文件结构是怎样的
3. 各个功能的实现思路步骤 3：逐步实现
确认计划后，让 Codex 开始编码。Codex 会生成一个包含 HTML + CSS + JavaScript 的完整项目。
步骤 4：测试与修正
将生成的代码保存为项目文件，在浏览器中打开测试：
- 添加几个待办事项，检查是否能正常显示
- 点击复选框，检查是否能标记完成
- 删除一个事项，检查是否正确移除
- 刷新页面，检查数据是否保留
如果发现问题，告诉 Codex：
我发现一个问题：删除事项后，计数没有更新。请修复这个问题。步骤 5：验收成果
功能全部正常后，你可以：
- 添加更多功能（比如分类、优先级、搜索）
- 美化界面（添加动画、调整配色）
- 部署上线（部署到 GitHub Pages 或其他静态托管平台）
三、进阶扩展
添加分类功能
帮我给待办事项加上分类功能，可以按"工作""个人""学习"分类添加提醒功能
帮我添加一个提醒功能，可以设置每个事项的截止日期添加导出功能
帮我添加一个导出功能，可以把待办事项导出为 JSON 或 CSV 文件四、本节实操任务清单
请按顺序完成以下任务：
- [ ] 描述完整需求并让 Codex 制定计划
- [ ] 确认计划后让 Codex 开始编码
- [ ] 在浏览器中测试所有功能
- [ ] 发现并修复至少一个问题
- [ ] 尝试添加一个扩展功能
五、本节小结
| 学到的能力 | 具体说明 |
|---|---|
| 需求拆解 | 将复杂需求拆分成可执行的任务 |
| 任务规划 | 让 Codex 先给出实现计划 |
| 全流程协作 | 从需求到交付的完整开发流程 |
| 测试验证 | 发现问题并及时反馈修正 |