大挑战：让整个网站活起来

你的任务

这次没有新内容。你会拿到任务清单，需要的知识你都已经会了。这就是真正开发者的工作：拿到需求，用已知的东西拼起来。

必做部分 🎯

过一遍网站，确保这一级的五个法术都在上面：

每个页面都连了脚本，控制台没有错误（F12——不应该有红字）。
深色模式——每个页面页眉有开关，选择会被记住。
互动按钮或计数器——至少一个带变量和条件的法术。
带 lightbox 的照片画廊——点击照片会变大。
测验或带验证的表单——至少有一个。两个都做更好！

可选扩展 🌟

至少选一个（或自己发明）：

按时间问候

网站早上和晚上问候不同：

<p id="day-greeting"></p>

const dayGreeting = document.getElementById("day-greeting");
const hour = new Date().getHours();

if (hour < 9) {
  dayGreeting.textContent = "Good morning! ☀️";
} else if (hour < 18) {
  dayGreeting.textContent = "Hi there, have a nice day!";
} else {
  dayGreeting.textContent = "Good evening! 🌙";
}

new Date() 返回当前日期时间，.getHours() 取出小时。

点击随机消息

每次不同的笑话、旅行想法或球队口号：

const messages = [
  "Practice makes perfect!",
  "Let's go, Eagles! 🦅",
  "You miss every shot you don't take.",
  "Fans are the twelfth player.",
];

const messageButton = document.getElementById("message-button");
const messageEl = document.getElementById("message");

messageButton.addEventListener("click", () => {
  const random = Math.floor(Math.random() * messages.length);
  messageEl.textContent = messages[random];
});

Math.random() 返回 0 到 1 之间的随机数，后面那行把它变成数组里的随机位置。

访问计数（只给你看）

你打开网站多少次？存进 localStorage：

let visits = Number(localStorage.getItem("visits") ?? 0);
visits++;
localStorage.setItem("visits", visits);
console.log("You've opened this page " + visits + " times now");

Number(...) 把记忆里的文字转成数字，?? 0 意思是”如果没有，从零开始。”

可折叠区块（手风琴）

把长菜单或名单藏在可点击标题下：

const sectionHeading = document.getElementById("expand-heading");
const sectionContent = document.getElementById("expand-content");

sectionHeading.addEventListener("click", () => {
  sectionContent.classList.toggle("hidden");
});

画廊课里已有 .hidden { display: none !important; } class。

把新版本上传到互联网

GitHub Pages 上的网站还是第 1 级的旧版！上传新的：

在 github.com 打开你的仓库，
Add file → Upload files，
拖入改过的文件（主要是 script.js、style.css 和所有 .html 文件），点击 Commit changes。

一分钟后，你的法术全世界都能看到了。

✅

恭喜，魔法师！🪄 你的网站不再只是好看——它活了。对点击有反应、记住选择、提问并回答。而且你知道每一行怎么工作。在第 3 级——大师，你会学像专业人士那样建网站：React、组件和你自己的服务器。

这一级别你要记住

JavaScript：变量、条件、函数、数组、对象、循环——所有编程的基础。
法术公式：找元素 → 监听事件 → 采取行动。
localStorage 用来记住东西，querySelectorAll + forEach 处理元素组，检查表单输入。