JavaScriptで つくる！
秘密ひみつの合言葉あいことばドア 🚪

文字もじをいれる input と、ドアになる div を 作つくろう。
HTMLに 書かいてね。

    <div class="gate-room">
        <!-- ドアの見た目 (id="door" をつけたよ) -->
        <div id="door" class="closed">🚪</div>

        <p>あいことば を いれてね：</p>
        <!-- 合言葉を書きこむボックス -->
        <input type="text" id="pw-input">
        
        <!-- 押すとJavaScriptが動くボタン -->
        <button onclick="checkPassword()">あけ！</button>
    </div>

ドアの形かたちや、開あいたときのキラキラ感を 決めよう。
CSS の中なかに 書かいてね。

        body { 
            text-align: center;      /* 文字をまんなかにする */
            background-color: #333; /* 部屋をくらくする(背景色) */
            color: white;           /* 文字を白くする */
        }
        
        #door {
            font-size: 100px;        /* 絵文字を大きくする */
            width: 150px;           /* ドアのよこはば */
            height: 200px;          /* ドアのたかさ */
            margin: 50px auto;      /* ドアをまんなかに置く */
            border: 5px solid #fff; /* 白いワク線をつける */
            border-radius: 10px;    /* かどを丸くする */
            transition: 0.5s;       /* 色や大きさがふわっと変わる時間 */

            /* --- 👇 絵文字をドアのど真ん中に置く「まほう」 --- */
            display: flex;          /* 自由に並べられるモードにする */
            justify-content: center; /* よこの まんなかに置く */
            align-items: center;     /* たての まんなかに置く */
        }

        /* 閉まっているとき(茶色のドア) */
        .closed { background-color: #8d6e63; }

        /* 開いたとき(黄金に光るドア！) */
        .open {
            background-color: #ffeb3b; /* 背景を黄色にする */
            box-shadow: 0 0 50px #fff9c4; /* まわりを光らせる */
            
            /* --- 👇 ドアを少しだけ大きくする「まほう」 --- */
            transform: scale(1.1);    /* もとの大きさの1.1倍にする */
        }

ボタンを 押おしたときに、「ひらけごま」と 書かかれているか 調しらべるよ。
JS の中なかに 書かいてね。

    function checkPassword() {
        // ① 入力ボックスに書かれた「文字」をゲットして、変数 input にいれる
        let input = document.getElementById("pw-input").value;
        
        // ② ドアの場所(HTML)をつかまえて、変数 door にいれる
        const door = document.getElementById("door");

        // ③ もし(if) 入力された文字(input)が "ひらけごま" とおなじなら...
        if (input == "ひらけごま") {
            
            // ドアのクラスを "open" に書きかえる(CSSの.openが動くよ！)
            door.className = "open";
            
            // ドアの中の絵文字を ✨ に書きかえる
            door.innerHTML = "✨";
            
            // メッセージを出す
            alert("ドアが 開いた！ おめでとう！");

        } else {
            // そうじゃなかったら(まちがいなら)
            alert("合言葉が ちがうみたいだ...");
        }
    }