从零做第一个小项目

练习目标

做一个“学习清单”页面：可以输入标题、添加项目、标记完成、删除项目，并在浏览器刷新后保留内容。它足够小，但会练到结构、样式、事件、数组、浏览器存储和错误提示。

1. 建立目录

learning-list/
  index.html
  style.css
  app.js

不要先安装框架。先理解三个文件如何协作，之后再把同一个功能迁移到 React、Vue 或其他框架。

2. 写出 HTML 结构

<main class="container">
  <h1>学习清单</h1>
  <form id="item-form">
    <label for="item-input">新增内容</label>
    <input id="item-input" name="item" required />
    <button type="submit">添加</button>
  </form>
  <p id="status" role="status"></p>
  <ul id="item-list"></ul>
</main>

先打开页面确认内容和表单结构，再做样式和交互。label、标题层级和 role="status" 会帮助键盘和读屏用户理解页面。

3. 加 CSS 布局

先解决宽度、间距、文字和按钮状态，再考虑阴影、动画和装饰。移动端使用单列布局，确保按钮和输入框不会超出屏幕。

.container {
  width: min(100% - 2rem, 42rem);
  margin: 3rem auto;
}

form {
  display: flex;
  gap: .5rem;
}

@media (max-width: 40rem) {
  form { flex-direction: column; }
}

4. 用 JavaScript 管理状态

先用一个数组保存项目，再监听表单提交和列表点击。每次状态改变都重新渲染列表，最后再加入 localStorage。

const items = [];
const form = document.querySelector('#item-form');
const input = document.querySelector('#item-input');
const list = document.querySelector('#item-list');

function render() {
  list.replaceChildren(...items.map((item, index) => {
    const li = document.createElement('li');
    li.textContent = item;
    li.dataset.index = index;
    return li;
  }));
}

form.addEventListener('submit', (event) => {
  event.preventDefault();
  const value = input.value.trim();
  if (!value) return;
  items.push(value);
  input.value = '';
  render();
});

这是教学用的最小版本。完成后再添加完成状态、删除按钮、持久化和输入长度限制，每次只增加一个行为。

5. 本地运行和检查

在项目目录执行：

python3 -m http.server 8000

打开 http://127.0.0.1:8000，检查：

• 空输入是否不会创建项目；
• 添加、完成和删除是否有清楚反馈；
• 刷新后数据是否符合预期；
• 390px 手机宽度是否没有横向滚动；
• Tab 键能否完成主要操作；
• Console 是否没有错误。

6. 让 AI 分阶段协助

我正在做一个纯 HTML/CSS/JavaScript 学习清单，不使用框架。
请先阅读这三个文件并解释数据流，不要修改。
接下来一次只实现一个功能：先添加完成状态，再添加删除和 localStorage。
每次修改前列出计划，完成后说明改了什么、如何在 390px 和桌面宽度验证。

完成后怎么升级

1. 把项目改成 TypeScript，给项目对象加类型；
2. 使用 Vite 管理开发和构建；
3. 把组件迁移到 React、Vue 或 Svelte；
4. 增加 Node/Python API 和数据库；
5. 用 Git 提交并部署到静态托管。

每次升级都保留一个能运行的版本，比较“框架带来了什么”和“新增了哪些复杂度”。