Build a Simple POS Billing Page with HTML, CSS and JavaScript

In a small retail shop, a fast billing screen beats a heavy app. Here is a minimal point-of-sale billing page you can run in any browser — no frameworks needed.

1. The layout

Two columns: product buttons on the left, the running bill on the right.

<div class="pos">
  <div class="products">
    <button data-name="Milk" data-price="120">Milk — 120</button>
    <button data-name="Bread" data-price="90">Bread — 90</button>
    <button data-name="Eggs" data-price="250">Eggs — 250</button>
  </div>
  <div class="bill">
    <h2>Bill</h2>
    <ul id="items"></ul>
    <p>Total: <strong id="total">0</strong></p>
    <button onclick="window.print()">Print receipt</button>
  </div>
</div>

2. Adding items with JavaScript

const items = document.getElementById('items');
const totalEl = document.getElementById('total');
let total = 0;

document.querySelectorAll('.products button').forEach(btn => {
  btn.addEventListener('click', () => {
    const li = document.createElement('li');
    li.textContent = `${btn.dataset.name} — ${btn.dataset.price}`;
    items.appendChild(li);
    total += Number(btn.dataset.price);
    totalEl.textContent = total;
  });
});

3. Why this pattern works

• Every sale is one click — cashiers never touch a keyboard.
• The bill is plain DOM, so window.print() gives you a receipt with zero dependencies.
• Prices live in data-* attributes, so the same page works for any product list you render server-side.

4. Going further

A production version adds a product database, discount and tax rules, offline support, and end-of-day sales reports.

At ZahrionTech we build exactly that kind of custom POS software for retail stores, restaurants and salons — this demo is the same idea, production-hardened. More at https://zahriontech.com/