HTML Code
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>document.ariaNotify shopping list</title>
  <style>
    body { font: 1rem/1.5 system-ui, sans-serif; max-width: 28rem; margin: 1.5rem auto; }
    form div { margin-bottom: 0.75rem; display: flex; gap: 0.5rem; align-items: center; }
    label { flex: 1; }
    input { flex: 2; padding: 0.35rem; }
    ul { padding-left: 1.25rem; }
  </style>
</head>
<body>
  <h1>Shopping list</h1>
  <form id="form">
    <div><label for="item">Item</label><input type="text" id="item" required></div>
    <div><label for="price">Price (£)</label><input type="number" id="price" step="0.01" required></div>
    <button type="submit">Add item</button>
  </form>
  <ul id="list"></ul>
  <p id="total">Total: £0.00</p>
  <pre id="out"></pre>
  <script>
    var form = document.getElementById("form");
    var itemInput = document.getElementById("item");
    var priceInput = document.getElementById("price");
    var list = document.getElementById("list");
    var totalOutput = document.getElementById("total");
    var out = document.getElementById("out");
    var total = 0;

    function updateTotal() {
      totalOutput.textContent = "Total: £" + total.toFixed(2);
    }

    form.addEventListener("submit", function (e) {
      e.preventDefault();
      var name = itemInput.value;
      var price = Number(priceInput.value);
      total += price;

      var li = document.createElement("li");
      li.textContent = name + ": £" + price.toFixed(2);
      list.appendChild(li);
      updateTotal();

      var msg = "Item " + name + ", price £" + price.toFixed(2) +
        ", added to list. Total is now £" + total.toFixed(2) + ".";
      if (typeof document.ariaNotify === "function") {
        document.ariaNotify(msg, { priority: "high" });
      }
      out.textContent = msg;

      itemInput.value = "";
      priceInput.value = "";
    });
  </script>
</body>
</html>
Lines: 0 | Characters: 0
Live Preview Auto-refresh on Run
Document.ariaNotify — shopping list (Try It)
