Product Price Calculator

<!DOCTYPE html>
<html>
<head>
  <title>Product Price Calculator</title>
</head>
<body>

  <h2>Product Price Calculator</h2>

  <input id="productName" placeholder="Enter product name">
  <input id="priceInput" placeholder="Enter price">
  <input id="quantityInput" placeholder="Enter quantity">
  <br><br>

  <button id="product1">Add Product 1</button>
  <p id="display1"></p>

  <button id="product2">Add Product 2</button>
  <p id="display2"></p>

  <button id="product3">Add Product 3</button>
  <p id="display3"></p>

  <script>
    // Arrays to store names and totals
    let products = [];
    let totals = [];

    // Product 1
    document.getElementById("product1").onclick = function() {
      let name = document.getElementById("productName").value;
      let price = Number(document.getElementById("priceInput").value);
      let qty = Number(document.getElementById("quantityInput").value);
      let total = price * qty;

      products[0] = name;
      totals[0] = total;

      console.log(products[0], totals[0]);
      document.getElementById("display1").textContent = name + " total: $" + total;
    };

    // Product 2
    document.getElementById("product2").onclick = function() {
      let name = document.getElementById("productName").value;
      let price = Number(document.getElementById("priceInput").value);
      let qty = Number(document.getElementById("quantityInput").value);
      let total = price * qty;

      products[1] = name;
      totals[1] = total;

      console.log(products[1], totals[1]);
      document.getElementById("display2").textContent = name + " total: $" + total;
    };

    // Product 3
    document.getElementById("product3").onclick = function() {
      let name = document.getElementById("productName").value;
      let price = Number(document.getElementById("priceInput").value);
      let qty = Number(document.getElementById("quantityInput").value);
      let total = price * qty;

      products[2] = name;
      totals[2] = total;

      console.log(products[2], totals[2]);
      document.getElementById("display3").textContent = name + " total: $" + total;
    };
  </script>

</body>
</html>

body {
  background-color: #064420;
  color: white;
}

// Add your code here