JavaScriptで つくる！
お買かい物ものレジスター 🍎

商品しょうひんボタンと、合計ごうけい金額きんがくを表示ひょうじする場所ばしょを作つくろう。
HTML の中なかに、下したのコードを書かいてね。

    <div class="register-box">
        <h2>プチタスーパー 🛒</h2>
        
        <!-- 合計を表示する場所 -->
        <div class="display">
            合計： <span id="price">0</span> 円
        </div>

        <!-- 商品ボタン -->
        <button onclick="addApple()" class="item-btn apple">🍎 りんご (100円)</button>
        <button onclick="addOrange()" class="item-btn orange">🍊 みかん (50円)</button>
        
        <hr> <!-- 線の区切り -->
        
        <button onclick="reset()" class="reset-btn">お会計 (リセット)</button>
    </div>

レジの画面がめんっぽく デザインしよう。
CSS の中なかに 追加ついかしてね。

        body {
            text-align: center;
            background-color: #f1f8e9;
            font-family: sans-serif;
        }
        .register-box {
            background-color: #fff;
            width: 300px;
            margin: 20px auto;
            padding: 20px;
            border: 5px solid #4caf50;
            border-radius: 10px;
        }
        .display {
            background-color: #333;
            color: #00ff00; /* 電光掲示板っぽい色 */
            font-size: 30px;
            padding: 10px;
            margin-bottom: 20px;
            font-family: monospace;
        }
        .item-btn {
            display: block;
            width: 100%;
            padding: 10px;
            margin: 5px 0;
            font-size: 18px;
            cursor: pointer;
        }
        .apple { background-color: #ffcdd2; }
        .orange { background-color: #ffe0b2; }

金額きんがくを保存ほぞんする変数へんすうと、表示ひょうじする場所ばしょを用意よういしよう。
JS の中なかに 書かいてね。

    // 合計金額の入れ物 (最初は 0)
    let total = 0;

    // 表示する場所をつかまえる
    const monitor = document.getElementById("price");

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

    // りんご (100円) をたす
    function addApple() {
        total = total + 100;
        monitor.innerHTML = total;
    }

    // みかん (50円) をたす
    function addOrange() {
        total = total + 50;
        monitor.innerHTML = total;
    }

さいごに、合計ごうけいを 0 に戻もどす「リセット」を作つくるよ。
「ありがとうございました！」と アラートも 出だしてみよう。

    // お会計 (リセット)
    function reset() {
        alert(total + "円 になります。まいどあり！");
        
        total = 0;
        monitor.innerHTML = total;
    }