大チャレンジ：サイト全体を生き返らせよう

レベル2の最終ミッション。すべての呪文を一度に——さらに新しいアイデアも。

ミッション

今回は新しい教材なし。タスクリストが渡され、必要なことは全部知ってる。本物の開発者の仕事そのもの：要件をもらって、知ってることを組み立てる。

必須パート 🎯

サイトを見直して、このレベルの5つの呪文が全部生きてるか確認：

全ページにスクリプト接続、コンソールにエラーなし（F12——赤いものが出ない）。
ダークモード – 全ページのヘッダーにスイッチ、選択は記憶される。
インタラクティブなボタンかカウンター – 変数と条件付きの呪文が1つ以上。
lightbox 付きフォトギャラリー – クリックで写真が大きくなる。
クイズかバリデーション付きフォーム – どちらか1つ以上。両方でもOK！

オプション拡張 🌟

少なくとも1つ選ぶ（または自分で考える）：

時間帯による挨拶

朝と夜で違う挨拶：

<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; } クラスはもう持ってる。

新バージョンをインターネットにアップロード

GitHub Pages のサイトはまだレベル1の古い版！新しいのをアップロード：

github.com でリポジトリを開く、
Add file → Upload files、
変えたファイル（主に script.js、style.css、すべての .html）をドラッグして Commit changes。

1分以内に、みんなが呪文を見られる。

✅

おめでとう、魔法使い！ 🪄 サイトはもうきれいだけじゃない——生きてる。クリックに反応し、選択を覚え、質問して答える。各行がどう動くか分かってる。レベル3 – マスターではプロみたいに作る：React、コンポーネント、自分のサーバー。

このレベルのまとめ

JavaScript：変数、条件、関数、配列、オブジェクト、ループ——すべてのプログラミングの基礎。
呪文の公式：要素を見つける → イベントを待つ → アクションを取る。
記憶は localStorage、要素グループは querySelectorAll + forEach、フォーム入力のチェック。