前端动手做项目完整教程（待办清单、天气查询、简易商城）#

学编程最容易犯的错：学了很多语法，却做不出东西。这一篇我们用前面学的所有知识，从零做三个完整项目。每个项目都给出全部代码，复制就能跑。动手敲一遍，比看十遍教程都有用。

项目一：待办清单 App（Todo List）#

功能： 添加任务、勾选完成、删除任务、数据刷新后不丢失。

技术点： DOM 操作、事件监听、数组操作、localStorage 本地存储。

1
<!DOCTYPE html>
2
<html lang="zh-CN">
3
<head>
4
  <meta charset="UTF-8">
5
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
6
  <title>待办清单</title>
7
  <style>
8
    * { box-sizing: border-box; margin: 0; padding: 0; }
9
    body {
10
      font-family: system-ui, "PingFang SC", sans-serif;
11
      background: #f0f2f5;
12
      display: flex;
13
      justify-content: center;
14
      padding-top: 60px;
15
    }
16
    .app { width: 360px; background: white; border-radius: 16px; padding: 24px; box-shadow: 0 8px 24px rgba(0,0,0,0.1); }
17
    h1 { font-size: 24px; margin-bottom: 16px; }
18
    .input-row { display: flex; gap: 8px; margin-bottom: 16px; }
19
    input {
20
      flex: 1; padding: 10px; border: 1px solid #ddd; border-radius: 8px; font-size: 14px;
21
    }
22
    button {
23
      padding: 10px 16px; border: none; border-radius: 8px; background: #4a90d9;
24
      color: white; font-size: 14px; cursor: pointer;
25
    }
26
    button:hover { background: #357abd; }
27
    ul { list-style: none; }
28
    li {
29
      display: flex; align-items: center; gap: 8px;
30
      padding: 10px 0; border-bottom: 1px solid #eee;
31
    }
32
    li input[type="checkbox"] { width: 18px; height: 18px; }
33
    .text { flex: 1; font-size: 15px; }
34
    .done .text { text-decoration: line-through; color: #aaa; }
35
    .del { background: #e74c3c; padding: 6px 10px; font-size: 13px; }
36
    .del:hover { background: #c0392b; }
37
  </style>
38
</head>
39
<body>
40
  <div class="app">
41
    <h1>📝 待办清单</h1>
42
    <div class="input-row">
43
      <input id="todoInput" placeholder="输入新任务，按回车添加">
44
      <button id="addBtn">添加</button>
45
    </div>
46
    <ul id="list"></ul>
47
  </div>
48

49
  <script>
50
    // 1. 数据：从 localStorage 读，没有就给空数组
51
    //    localStorage 可以把数据存到浏览器里，刷新不丢
52
    let todos = JSON.parse(localStorage.getItem("todos") || "[]");
53

54
    const input = document.getElementById("todoInput");
55
    const list = document.getElementById("list");
56

57
    // 2. 保存：每次数据变化都存到 localStorage
58
    function save() {
59
      localStorage.setItem("todos", JSON.stringify(todos));
60
    }
61

62
    // 3. 渲染：把 todos 数组画到页面上
63
    function render() {
64
      list.innerHTML = "";   // 先清空，再重新画
65

66
      todos.forEach((todo, index) => {
67
        let li = document.createElement("li");
68
        if (todo.done) li.className = "done";
69

70
        // 勾选框
71
        let checkbox = document.createElement("input");
72
        checkbox.type = "checkbox";
73
        checkbox.checked = todo.done;
74
        checkbox.addEventListener("change", () => {
75
          todos[index].done = checkbox.checked;   // 切换完成状态
76
          save();
77
          render();
78
        });
79

80
        // 文字
81
        let span = document.createElement("span");
82
        span.className = "text";
83
        span.textContent = todo.text;
84

85
        // 删除按钮
86
        let delBtn = document.createElement("button");
87
        delBtn.className = "del";
88
        delBtn.textContent = "删除";
89
        delBtn.addEventListener("click", () => {
90
          todos.splice(index, 1);   // 从数组删除这一项
91
          save();
92
          render();
93
        });
94

95
        li.appendChild(checkbox);
96
        li.appendChild(span);
97
        li.appendChild(delBtn);
98
        list.appendChild(li);
99
      });
100
    }
101

102
    // 4. 添加任务
103
    function addTodo() {
104
      let text = input.value.trim();
105
      if (!text) return;               // 空内容不添加
106
      todos.push({ text: text, done: false });
107
      input.value = "";
108
      save();
109
      render();
110
    }
111

112
    // 5. 绑定事件：点击按钮、按回车都触发添加
113
    document.getElementById("addBtn").addEventListener("click", addTodo);
114
    input.addEventListener("keydown", (e) => {
115
      if (e.key === "Enter") addTodo();
116
    });
117

118
    // 6. 首次渲染
119
    render();
120
  </script>
121
</body>
122
</html>

核心流程回顾： 数据（todos 数组）→ 渲染（render 画页面）→ 交互（改数组）→ 保存（localStorage）→ 重新渲染。改数据 → 自动重画，这就是框架里”数据驱动”思想的原生版。

升级练习： 试着加上”剩余未完成数量”、“一键清空已完成”。

项目二：天气查询页（真实 API）#

功能： 输入城市名 → 查真实天气 → 显示温度风速，带加载状态和错误处理。

技术点： fetch、async/await、两次请求串联、错误处理、模板字符串渲染。

（代码和上一篇 fetch 教程里的天气页一样，这里做一个升级版：支持城市下拉快捷键、显示多个信息点。）

1
<!DOCTYPE html>
2
<html lang="zh-CN">
3
<head>
4
  <meta charset="UTF-8">
5
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
6
  <title>天气查询</title>
7
  <style>
8
    * { box-sizing: border-box; margin: 0; padding: 0; }
9
    body {
10
      font-family: system-ui, "PingFang SC", sans-serif;
11
      background: linear-gradient(135deg, #667eea, #764ba2);
12
      min-height: 100vh;
13
      display: flex; justify-content: center; align-items: center;
14
    }
15
    .card {
16
      width: 380px; background: white; border-radius: 20px;
17
      padding: 32px; box-shadow: 0 16px 40px rgba(0,0,0,0.2);
18
      text-align: center;
19
    }
20
    h1 { font-size: 26px; margin-bottom: 20px; }
21
    .input-row { display: flex; gap: 8px; margin-bottom: 24px; }
22
    input {
23
      flex: 1; padding: 12px; border: 1px solid #ddd;
24
      border-radius: 10px; font-size: 15px;
25
    }
26
    button {
27
      padding: 12px 20px; border: none; border-radius: 10px;
28
      background: #667eea; color: white; font-size: 15px; cursor: pointer;
29
    }
30
    button:hover { background: #5566d8; }
31
    .city { font-size: 24px; font-weight: 700; margin-bottom: 8px; }
32
    .temp { font-size: 56px; font-weight: 700; color: #667eea; margin: 12px 0; }
33
    .detail { display: flex; justify-content: space-around; color: #888; font-size: 14px; }
34
    .loading { color: #999; }
35
    .error { color: #e74c3c; }
36
  </style>
37
</head>
38
<body>
39
  <div class="card">
40
    <h1>🌤 天气查询</h1>
41
    <div class="input-row">
42
      <input id="city" placeholder="城市英文名，如 beijing、shanghai">
43
      <button id="search">查询</button>
44
    </div>
45
    <div id="result">
46
      <p class="loading">输入城市开始查询</p>
47
    </div>
48
  </div>
49

50
  <script>
51
    const input = document.getElementById("city");
52
    const btn = document.getElementById("search");
53
    const result = document.getElementById("result");
54

55
    btn.addEventListener("click", query);
56
    input.addEventListener("keydown", (e) => { if (e.key === "Enter") query(); });
57

58
    async function query() {
59
      let city = input.value.trim();
60
      if (!city) return;
61

62
      result.innerHTML = '<p class="loading">查询中...</p>';
63

64
      try {
65
        // 第一步：城市名 → 经纬度
66
        let geoRes = await fetch(
67
          `https://geocoding-api.open-meteo.com/v1/search?name=${city}&count=1`
68
        );
69
        let geoData = await geoRes.json();
70
        let place = geoData.results && geoData.results[0];
71

72
        if (!place) {
73
          throw new Error("找不到这个城市，试试英文名");
74
        }
75

76
        // 第二步：经纬度 → 天气
77
        let wRes = await fetch(
78
          `https://api.open-meteo.com/v1/forecast?latitude=${place.latitude}&longitude=${place.longitude}&current_weather=true`
79
        );
80
        let weather = await wRes.json();
81

82
        // 第三步：渲染结果
83
        let cur = weather.current_weather;
84
        result.innerHTML = `
85
          <div class="city">📍 ${place.name}${place.country ? "，" + place.country : ""}</div>
86
          <div class="temp">${cur.temperature}°C</div>
87
          <div class="detail">
88
            <span>💨 风速 ${cur.windspeed} km/h</span>
89
            <span>🧭 风向 ${cur.winddirection}°</span>
90
          </div>
91
          <p style="color:#aaa;font-size:12px;margin-top:12px">
92
            更新时间：${new Date(cur.time).toLocaleString()}
93
          </p>
94
        `;
95
      } catch (error) {
96
        result.innerHTML = `<p class="error">查询失败：${error.message}</p>`;
97
      }
98
    }
99
  </script>
100
</body>
101
</html>

为什么这个项目重要？ 它完整覆盖了真实前端开发的日常：请求数据、等待、成功渲染、失败提示、更新 UI。把这两步请求（先查坐标再查天气）理解透，以后接任何后端 API 都是一个套路。

项目三：简易商城（商品列表 + 购物车）#

功能： 展示商品列表、加入购物车、数量增减、计算总价。

技术点： 数组渲染、事件委托、对象数据、reduce 求和。

1
<!DOCTYPE html>
2
<html lang="zh-CN">
3
<head>
4
  <meta charset="UTF-8">
5
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
6
  <title>简易商城</title>
7
  <style>
8
    * { box-sizing: border-box; margin: 0; padding: 0; }
9
    body {
10
      font-family: system-ui, "PingFang SC", sans-serif;
11
      background: #f0f2f5; padding: 40px 20px;
12
    }
13
    .wrap { max-width: 720px; margin: 0 auto; }
14
    h1 { margin-bottom: 24px; }
15

16
    .goods-grid {
17
      display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px;
18
    }
19
    .card {
20
      background: white; border-radius: 14px; padding: 16px;
21
      box-shadow: 0 4px 12px rgba(0,0,0,0.06);
22
      display: flex; flex-direction: column; gap: 8px;
23
    }
24
    .card .emoji { font-size: 40px; text-align: center; }
25
    .card .name { font-weight: 700; text-align: center; }
26
    .card .price { color: #e74c3c; font-weight: 700; text-align: center; }
27
    .card button {
28
      padding: 8px; border: none; border-radius: 8px;
29
      background: #4a90d9; color: white; cursor: pointer;
30
    }
31
    .card button:hover { background: #357abd; }
32

33
    .cart {
34
      margin-top: 24px; background: white; border-radius: 14px; padding: 20px;
35
      box-shadow: 0 4px 12px rgba(0,0,0,0.06);
36
    }
37
    .cart h2 { font-size: 18px; margin-bottom: 12px; }
38
    .cart-item {
39
      display: flex; align-items: center; justify-content: space-between;
40
      padding: 8px 0; border-bottom: 1px solid #eee;
41
    }
42
    .qty-btn {
43
      width: 26px; height: 26px; border: 1px solid #ddd; border-radius: 6px;
44
      background: white; cursor: pointer;
45
    }
46
    .total { margin-top: 12px; font-size: 18px; font-weight: 700; text-align: right; }
47
    .total span { color: #e74c3c; }
48
  </style>
49
</head>
50
<body>
51
  <div class="wrap">
52
    <h1>🛒 简易商城</h1>
53

54
    <!-- 商品列表 -->
55
    <div class="goods-grid" id="goods"></div>
56

57
    <!-- 购物车 -->
58
    <div class="cart">
59
      <h2>购物车</h2>
60
      <div id="cartList"></div>
61
      <div class="total">合计：<span id="total">¥0</span></div>
62
    </div>
63
  </div>
64

65
  <script>
66
    // 1. 商品数据
67
    const goods = [
68
      { id: 1, name: "苹果", emoji: "🍎", price: 5 },
69
      { id: 2, name: "香蕉", emoji: "🍌", price: 3 },
70
      { id: 3, name: "橘子", emoji: "🍊", price: 4 },
71
      { id: 4, name: "西瓜", emoji: "🍉", price: 10 },
72
      { id: 5, name: "葡萄", emoji: "🍇", price: 8 },
73
      { id: 6, name: "草莓", emoji: "🍓", price: 15 }
74
    ];
75

76
    // 2. 购物车数据：{ 商品id: 数量 }
77
    const cart = {};
78

79
    // 3. 渲染商品列表
80
    function renderGoods() {
81
      let goodsEl = document.getElementById("goods");
82
      goodsEl.innerHTML = "";
83

84
      for (let item of goods) {
85
        let card = document.createElement("div");
86
        card.className = "card";
87
        card.innerHTML = `
88
          <div class="emoji">${item.emoji}</div>
89
          <div class="name">${item.name}</div>
90
          <div class="price">¥${item.price}</div>
91
        `;
92

93
        let btn = document.createElement("button");
94
        btn.textContent = "加入购物车";
95
        btn.addEventListener("click", () => {
96
          cart[item.id] = (cart[item.id] || 0) + 1;   // 数量加 1
97
          renderCart();
98
        });
99

100
        card.appendChild(btn);
101
        goodsEl.appendChild(card);
102
      }
103
    }
104

105
    // 4. 渲染购物车
106
    function renderCart() {
107
      let cartEl = document.getElementById("cartList");
108
      cartEl.innerHTML = "";
109
      let total = 0;
110

111
      for (let id in cart) {
112
        let qty = cart[id];             // 数量
113
        if (qty === 0) continue;
114
        let item = goods.find(g => g.id === Number(id));   // 找到商品信息
115
        let subtotal = item.price * qty;   // 小计
116
        total += subtotal;
117

118
        let row = document.createElement("div");
119
        row.className = "cart-item";
120
        row.innerHTML = `
121
          <span>${item.emoji} ${item.name}</span>
122
          <span>
123
            <button class="qty-btn" data-id="${item.id}" data-op="minus">-</button>
124
            <span style="margin:0 8px">${qty}</span>
125
            <button class="qty-btn" data-id="${item.id}" data-op="plus">+</button>
126
          </span>
127
          <span>¥${subtotal}</span>
128
        `;
129
        cartEl.appendChild(row);
130
      }
131

132
      // 空购物车提示
133
      if (cartEl.innerHTML === "") {
134
        cartEl.innerHTML = '<p style="color:#aaa">购物车是空的</p>';
135
      }
136

137
      document.getElementById("total").textContent = "¥" + total;
138
    }
139

140
    // 5. 事件委托：购物车里所有 +/- 按钮，统一由 cartList 监听
141
    document.getElementById("cartList").addEventListener("click", (e) => {
142
      let btn = e.target.closest(".qty-btn");
143
      if (!btn) return;
144

145
      let id = Number(btn.dataset.id);
146
      let op = btn.dataset.op;
147

148
      if (op === "plus") {
149
        cart[id] = (cart[id] || 0) + 1;
150
      } else {
151
        cart[id] = (cart[id] || 0) - 1;
152
        if (cart[id] <= 0) delete cart[id];   // 数量归零就移除
153
      }
154
      renderCart();
155
    });
156

157
    // 6. 初始化
158
    renderGoods();
159
    renderCart();
160
  </script>
161
</body>
162
</html>

这个项目的精华：

数据结构：商品数组 + 购物车对象（id 对应数量），真实项目也是这个思路
渲染函数：改数据 → 调 renderCart() → 页面更新
事件委托：给父元素绑一个监听，子元素的按钮都能触发，代码简洁
reduce 求和：虽然这里用了循环，你也可以试试改成 reduce 写法

升级练习： 把购物车数据也存进 localStorage（刷新不丢）、加”结算”按钮弹出总价。

做项目的三个心法#

先抄后改：拿到示例代码，先原样敲一遍跑起来，再改一个地方看效果。理解每一行是干嘛的
一次只加一个功能：先让它能跑，再加功能，坏了也知道是哪一步改的
完成比完美重要：第一个项目丑没关系，跑起来就是胜利。做出 3 个，你就不再是”零基础”了

总结#

这一篇我们从零完成了三个项目：

待办清单：数组数据 + 渲染 + localStorage 持久化
天气查询：fetch 两次请求串联 + 加载/错误状态
简易商城：商品列表 + 购物车 + 总价计算 + 事件委托

这三个项目覆盖了前端开发的核心套路：数据怎么存、怎么渲染、用户操作怎么处理、数据怎么持久化。把它们吃透，你已经具备独立开发简单网页应用的能力了。最后一篇，我们学 TypeScript——给 JavaScript 加上”类型检查”，让你写的代码更可靠。