综合实战：个人主页与待办清单

第 10 章 · 综合实战：个人主页与待办清单

本章目标：综合运用 HTML、CSS、JavaScript，在 academy-demo 仓库中完成两个可展示、可验收的小项目：个人主页（Portfolio） 与 待办清单（Todo），为后续 ES6+ 与工程化章节打基础。

前置：第 1～9 章；建议用时 6～8 小时。

10.1 项目总览

academy-demo/
├── portfolio/
│   ├── index.html
│   ├── css/
│   │   ├── theme.css      # 颜色、字体、CSS 变量
│   │   └── layout.css     # Flex / Grid 布局
│   ├── js/
│   │   └── main.js        # 平滑滚动、主题（可选）
│   └── assets/
│       └── avatar.jpg
└── todo/
    ├── index.html
    ├── css/
    │   └── app.css
    └── js/
        └── app.js         # 增删改查 + 持久化

10.2 项目一：个人主页

10.2.1 功能清单

10.2.2 关键 HTML 结构

<header class="hero" id="top">
  <img class="avatar" src="assets/avatar.jpg" alt="张三的头像" width="120" height="120">
  <h1>张三</h1>
  <p class="tagline">前端学习者 · 贤紫技术学院 academy-demo</p>
  <nav aria-label="页内导航"><a href="#about">关于</a><a href="#projects">项目</a></nav>
</header>
<main>
  <section id="about"><h2>关于我</h2><div class="skills"><span class="tag">HTML</span>...</div></section>
  <section id="projects"><h2>项目展示</h2><article class="card"><a href="../todo/">Todo 演示</a></article></section>
</main>

10.2.3 CSS 变量与响应式

/* theme.css */
:root {
  --color-primary: #c2185b;
  --color-bg: #fafafa;
  --color-text: #212121;
  --space-md: 1rem;
  --radius: 8px;
}

@media (prefers-color-scheme: dark) {
  :root {
    --color-bg: #121212;
    --color-text: #e0e0e0;
  }
}

/* layout.css */
.project-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: var(--space-md);
}

.hero nav {
  display: flex;
  gap: 1rem;
  flex-wrap: wrap;
  justify-content: center;
}

10.2.4 可选 JS 增强

// portfolio/js/main.js
document.querySelectorAll('a[href^="#"]').forEach(link => {
  link.addEventListener('click', (e) => {
    const id = link.getAttribute('href');
    if (id === '#') return;
    const target = document.querySelector(id);
    if (!target) return;
    e.preventDefault();
    target.scrollIntoView({ behavior: 'smooth', block: 'start' });
  });
});

10.3 项目二：待办清单（Todo）

10.3.1 功能清单

10.3.2 数据模型

/**
 * @typedef {{ id: number, text: string, done: boolean }} Todo
 */

const STORAGE_KEY = 'academy-demo:todos';
let todos = /** @type {Todo[]} */ ([]);
let filter = 'all'; // 'all' | 'active' | 'completed'

10.3.3 核心逻辑