htmlで簡単な自動販売機を作る

# 初めに
今回は、htmlで簡単な自動販売機を作成します。
# ファイル構成
今回は、htmlファイル一つで作ります。
# コードを張り付ける。
それでは、以下のコードをコピペしてください。(アニメーションはchatGPTにやってもらいました。)(まだアニメーションに少しバグがあります。)
```html:main.html
<!DOCTYPE html>
<html>
<head>
  <title>自動販売機</title>
  <style>
    .box {
      margin: 0 auto;
      width: 400px;
      height: 500px;
      border: 1px solid black;
      border-radius: 15px;
      margin-top: 100px;
      background-color: white;
      color: black;
      position: relative; /* 相対位置指定 */
    }

    .container {
      display: none; /* 初期状態で非表示 */
      position: absolute;
      top: 0;
      left: 200px; /* 成功メッセージを右から200pxの位置に配置 */
      width: 200px;
      height: 30px;
      display: flex;
      justify-content: center;
      align-items: center;
      border: 1px solid black;
      background-color: white;
      opacity: 0;
      transition: transform 1s, opacity 1s; /* アニメーションの設定 */
      transform: translateY(-50px); /* 追加 */
    }

    .container.animate {
      transform: translateY(0); /* 表示時のアニメーション */
      opacity: 1;
    }

    @keyframes translateOut {
      0% {
        transform: translateY(0);
        opacity: 1;
      }
      100% {
        transform: translateY(-50px);
        opacity: 0;
      }
    }

    body {
      background-color: skyblue;
    }

    .text {
      width: 100px;
      height: 30px;
      border-radius: 10px;
      border: 1px solid #9c9b9b;
    }

    .text:hover {
      background-color: rgb(93, 82, 255);
    }

    .select {
      width: 200px;
      height: 30px;
      border-radius: 5px;
      background-color: white;
      color: black;
    }

    .button {
      width: 100px;
      height: 30px;
      margin-top: 20px;
      background-color: skyblue;
      color: black;
      border: none;
      border-radius: 10px;
    }

    button:hover {
      background-color: #5a5de7;
    }

    .success-message {
      color: black;
      font-weight: bold;
    }

  </style>
</head>
<body>
  <center>
    <div id="errorContainer"></div> <!-- エラーメッセージ表示用のコンテナ -->
    <div class="container" id="successContainer">
      <p id="successMessage" class="success-message"></p>
    </div>
    <div class="box">
      <h1>自動販売機</h1>
      <p>自動販売機のサンプルプログラムです</p>
      <select id="name" class="select" onchange="price()">
        <option value="Select drinks to purchase" selected>Select drinks to purchase</option>
        <option value="coca cola">coca cola</option>
        <option value="cocoa">cocoa</option>
        <option value="soda">soda</option>
      </select>
      <p id="price"></p>
      <p>値段を入力</p>
      <input type="number" id="enterprice" class="text">
      <br><button onclick="buyDrinks()" class="button" type="button">商品を購入</button>
      <p id="paymentTotal">支払い合計: 0円</p>
    </div>
  </center>
</body>
<script>
  let drink = "";
  let text = document.getElementById("price");
  let drinkprice = 0;
  let paymentTotal = 0; // paymentTotal の初期化
  let successContainer = document.getElementById("successContainer");
  let successMessage = document.getElementById("successMessage");

  function price() {
    drink = document.getElementById('name').value;
    switch(drink) {
      case "coca cola":
        drinkprice = 100;
        break;
      case "cocoa":
        drinkprice = 120;
        break;
      case "soda":
        drinkprice = 98;
        break;
      default:
        alert("プログラムに新しいコードが追加されたようです。新たにswitch文に処理を追加するか、ほかの商品を選択してください。\nEnglish...It appears that new code has been added to the program. Please add a new switch statement or select another drink.")
        drinkprice = 0; 
        break;
    }
    showdisplay();
  }

  function showdisplay() {
    text.textContent = `${drink}の値段は${drinkprice}円です`;
  }

  function buyDrinks() {
  let enterprice = document.getElementById("enterprice").value;
  if (enterprice >= drinkprice) {
    paymentTotal += parseInt(enterprice); // 購入金額を支払い合計に追加
    document.getElementById("paymentTotal").textContent = `支払い合計: ${paymentTotal}円`;

    // 成功メッセージを表示
    successContainer.style.display = "flex";
    successContainer.classList.remove("animate"); // アニメーションをリセット
    successMessage.textContent = "購入が成功しました";

    // アニメーションの適用後にクラスを再度追加してアニメーションを再生する
    setTimeout(function() {
      successContainer.classList.add("animate");
    }, 100); // 短い遅延を挿入してアニメーションを再生する

    // 成功メッセージを削除した後にcontainerを非表示にする
    setTimeout(function() {
      successContainer.style.transform = "translateY(-50px)"; // translateYアニメーションを適用
      successContainer.style.opacity = 0; // opacityを0にすることでフェードアウト効果を追加
      setTimeout(function() {
        successContainer.style.display = "none"; // container を非表示にする
        successContainer.style.transform = "translateY(0)"; // アニメーション完了後にtransformを元に戻す
        successContainer.style.opacity = 1; // アニメーション完了後にopacityを元に戻す
      }, 1000); // アニメーション時間の後に非表示にする
    }, 2000); // 2秒後にアニメーションを開始する
  } else {
    let errorContainer = document.getElementById("errorContainer");
    errorContainer.textContent = "支払い金額が不足しています";

    setTimeout(function() {
      errorContainer.textContent = ""; // エラーメッセージを削除
    }, 2000);
  }
}

</script>
</html>
```
貼り付けて実行したら以下のような画面になると思います。

![8i3Ki1aoVEsvXnQ1712461431_1712461469.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3746059/2a57a7b6-10ea-3801-a586-ec0dcc9a44f5.png)

これで、自動販売機のプログラムが完成しました。
# プログラムの仕組み
1,商品を選択(select属性)すると、price()が呼び出されて、選択した商品の値段を指定します。（coca colaなら100円,cocoaなら120円,sodaなら98円に、それ以外の場合はエラーメッセージになります。）
2,購入金額を入力して商品を購入ボタンをクリックすると、buyDrinks()が呼び出されます。
Buydrinksの処理内容　｛
htmlのenterprice上にある[enterprice]idを読み取ります。
もしenterpriceの金額が商品の値段より高いなら成功メッセージのアニメーションを表示し、商品の値段より少ない場合は、エラーメッセージを表示します。
# 最後に
今回は、htmlで簡単な自動販売機のプログラムを書きました。
でも、まだアニメーションにバグが残っているので、間違っているところを教えてくれたらうれしいです。
それでは、またお会いしましょう。