第六章：动手做项目
做一个待办清单
进阶约 15 分钟实践 · 项目
做一个待办清单
比静态网页更进一步——做一个能交互的待办清单。
核心功能
告诉 AI 你需要这些功能：
- 输入框 + 添加按钮，输入任务后添加到列表
- 点击任务标记为完成（加删除线）
- 点击删除按钮移除任务
- 显示还有多少任务未完成
- 数据保存在浏览器本地（刷新不丢失）
推荐的 Prompt
帮我做一个待办清单网页，要求：
- 顶部输入框和添加按钮
- 列表显示所有任务
- 点击任务可以标记完成（文字加删除线，颜色变灰）
- 每个任务右边有删除按钮
- 底部显示"还有 X 项未完成"
- 使用 localStorage 保存数据，刷新页面数据还在
- 简洁现代的设计风格
- 所有代码放在一个 HTML 文件中
学到的技能
做完这个项目，你会掌握：
- 表单输入处理
- 列表的动态增删
- 数据持久化（ localStorage）
- 状态管理的基本概念
进阶挑战
如果基础版做完了，试试增加这些功能：
- 双击任务可以编辑文字
- 添加任务分类标签
- 按完成状态筛选（全部/进行中/已完成）
- 添加截止日期功能
常见误区
"越做越复杂，最后卡住了。"——建议先把基础功能做好，再逐步加功能。每次只加一个功能，确认能用后再加下一个。
要点总结
- 从基础功能开始，逐步迭代
- localStorage 让数据持久化存储
- 每次只加一个新功能
Prompt Playground
Prompt Playground
例如："帮我做一个番茄钟"