JavaScriptで つくる！
無限むげんカウンター 🔢

まずは、数字すうじを表示ひょうじする場所ばしょと、押おすためのボタンを作つくろう。
HTML の中なかに、下したのコードを書かいてね。

    <div class="game-box">
        <!-- 数字を表示するところ (id="counter" をつけたよ) -->
        <h1 id="counter">0</h1>

        <!-- クリックすると動くボタン -->
        <button onclick="countUp()" class="btn-push">ふやす！</button>
        <button onclick="reset()" class="btn-reset">リセット</button>
    </div>

数字すうじを大おおきくして、ボタンを押おしやすくしよう。
CSS の中なかに 追加ついかしてね。

        body {
            text-align: center;
            background-color: #e0f7fa;
            font-family: sans-serif;
        }
        h1 {
            font-size: 100px;  /* 数字をデカく！ */
            margin: 20px 0;
            color: #00bcd4;
        }
        button {
            font-size: 24px;   /* ボタンの文字も大きく */
            padding: 10px 40px;
            border: none;
            border-radius: 50px;
            cursor: pointer;
            margin: 10px;
        }
        .btn-push {
            background-color: #ff4081;
            color: white;
            box-shadow: 0 5px #c60055; /* 立体的に */
        }
        .btn-push:active {
            transform: translateY(3px); /* 押したときにへこむ */
            box-shadow: 0 2px #c60055;
        }

ここからがプログラミングの本番ほんばん！
数かずを数かぞえるための「変数へんすう (入いれ物もの)」を用意よういしよう。
JS の中なかに 書かいてね。

    // 数の入れ物 (最初は 0)
    let count = 0;

    // 画面の書き換えたい場所をつかまえる
    const target = document.getElementById("counter");

ボタンを押おしたときに動うごく countUp 関数かんすうを作つくろう。
さっきのコードの下したに 続つづけて書かいてね。

    function countUp() {
        // ① 数を 1 ふやす (今の数 + 1)
        count = count + 1;

        // ② 画面の文字を 書き換える
        target.innerHTML = count;
    }

さいごに、0に戻もどす機能きのうも作つくろう。
count = 0 を代入だいにゅうするのが コツだよ。

    function reset() {
        // 数を 0 に戻す
        count = 0;

        // 画面も更新する
        target.innerHTML = count;
    }