JavaScriptで つくる！
着(き)せ替(か)えカラーパレット 🎨

まずは、「あさ」「ゆうがた」「よる」の 3つのボタンを作つくろう。
HTML の中なかに、下したのコードを書かいてね。

    <div class="wrapper">
        <!-- メッセージを表示する場所 -->
        <h1 id="msg">おはよう！</h1>

        <!-- 色を変える 3つのボタン -->
        <div class="btn-area">
            <button onclick="morning()">☀️ あさ</button>
            <button onclick="evening()">🌇 ゆうがた</button>
            <button onclick="night()">🌙 よる</button>
        </div>
    </div>

ボタンを真まん中なかに寄よせて、かっこよく デザインしよう。
CSS の中なかに 追加ついかしてね。

        body {
            text-align: center;
            font-family: sans-serif;
            /* ふわっと色がかわる魔法 (アニメーション) */
            transition: background-color 0.5s, color 0.5s;
        }
        .wrapper {
            margin-top: 100px;
        }
        button {
            font-size: 20px;
            padding: 10px 20px;
            margin: 10px;
            border: 2px solid white;
            background-color: rgba(255,255,255,0.3);
            border-radius: 30px;
            cursor: pointer;
        }
        button:hover {
            background-color: white;
        }

まずは、「あさ」ボタンを押おしたときの morning 関数かんすうを作つくろう。
JS の中なかに 書かいてね。

    // メッセージの場所をつかまえておく
    const text = document.getElementById("msg");

    // 「あさ」にする関数
    function morning() {
        // ① 背景を 水色にする
        document.body.style.backgroundColor = "#81d4fa";
        
        // ② 文字を 黒にする
        document.body.style.color = "#333";

        // ③ メッセージを変える
        text.innerHTML = "おはよう！";
    }

残のこりの 2つの関数かんすうも 作つくろう！
色コード（#...）を変かえるのが コツだよ。

    // 「ゆうがた」にする関数
    function evening() {
        document.body.style.backgroundColor = "#ff9800"; /* オレンジ */
        document.body.style.color = "#fff";
        text.innerHTML = "さようなら！";
    }

    // 「よる」にする関数
    function night() {
        document.body.style.backgroundColor = "#1a237e"; /* 濃い紺色 */
        document.body.style.color = "#fff"; /* 白文字 */
        text.innerHTML = "おやすみなさい...";
    }