Unit Price Calculator — Compare Cost Per Unit for Best Value

<div class="wrap">
  <h2>Best Value Calculator</h2>
  <p class="sub">Compare products with different sizes and prices to find the cheapest per unit.</p>

  <div class="items" id="items"></div>

  <button id="add-item">+ Add product</button>

  <div class="winner" id="winner"></div>
</div>

* { box-sizing: border-box; margin: 0; padding: 0; }
body { font-family: system-ui, -apple-system, sans-serif; background: #f8fafc; min-height: 100vh; padding: 28px 20px; }

.wrap { max-width: 560px; margin: 0 auto; background: #fff; border: 1px solid #e2e8f0; border-radius: 18px; padding: 24px; }
h2 { font-size: 17px; font-weight: 800; color: #1e293b; }
.sub { font-size: 12.5px; color: #94a3b8; margin: 4px 0 18px; }

.items { display: flex; flex-direction: column; gap: 10px; margin-bottom: 12px; }

.item-row {
  display: grid; grid-template-columns: 1.4fr 1fr 1fr 1fr auto; gap: 8px; align-items: end;
  background: #f8fafc; border: 1.5px solid #eef2f7; border-radius: 12px; padding: 12px;
  transition: border-color 0.15s, background 0.15s;
}
.item-row.best { border-color: #4ade80; background: #f0fdf4; }

.item-row .field { display: flex; flex-direction: column; gap: 4px; }
.item-row label { font-size: 9.5px; font-weight: 700; color: #94a3b8; text-transform: uppercase; letter-spacing: 0.03em; }
.item-row input { padding: 7px 8px; border: 1.5px solid #e2e8f0; border-radius: 7px; font-size: 12.5px; font-family: inherit; color: #1e293b; width: 100%; }
.item-row input:focus { outline: none; border-color: #6366f1; }

.unit-price-cell { text-align: center; }
.unit-price-cell .up { font-size: 13.5px; font-weight: 800; color: #1e293b; }
.unit-price-cell .up.best-price { color: #16a34a; }
.unit-price-cell .lbl { font-size: 8.5px; color: #94a3b8; font-weight: 700; }

.remove-btn { width: 28px; height: 28px; border-radius: 7px; border: 1px solid #fecaca; background: #fef2f2; color: #dc2626; font-size: 14px; cursor: pointer; align-self: end; }
.remove-btn:hover { background: #fee2e2; }

#add-item { width: 100%; padding: 10px; border-radius: 10px; border: 1.5px dashed #c7d2fe; background: #eef2ff; color: #4f46e5; font-weight: 700; font-size: 12.5px; cursor: pointer; margin-bottom: 16px; }
#add-item:hover { background: #e0e7ff; }

.winner { text-align: center; font-size: 13px; font-weight: 700; color: #16a34a; min-height: 18px; }

const itemsEl = document.getElementById('items');
const addItemBtn = document.getElementById('add-item');
const winnerEl = document.getElementById('winner');

let items = [
  { name: 'Store Brand (24 oz)', price: '4.29', qty: '24' },
  { name: 'Name Brand (16 oz)', price: '3.49', qty: '16' },
  { name: 'Bulk Pack (48 oz)', price: '7.99', qty: '48' },
];

function computeUnitPrice(item) {
  const price = parseFloat(item.price);
  const qty = parseFloat(item.qty);
  if (!Number.isFinite(price) || !Number.isFinite(qty) || qty <= 0 || price < 0) return null;
  return price / qty;
}

function render() {
  const unitPrices = items.map(computeUnitPrice);
  const validPrices = unitPrices.filter(p => p !== null);
  const minPrice = validPrices.length ? Math.min(...validPrices) : null;

  itemsEl.innerHTML = items.map((item, i) => {
    const up = unitPrices[i];
    const isBest = up !== null && minPrice !== null && Math.abs(up - minPrice) < 1e-9;
    const upText = up === null ? '—' : '$' + up.toFixed(4);
    return '<div class="item-row' + (isBest ? ' best' : '') + '">' +
      '<div class="field"><label>Name</label><input data-idx="' + i + '" data-field="name" value="' + escapeAttr(item.name) + '" /></div>' +
      '<div class="field"><label>Price ($)</label><input data-idx="' + i + '" data-field="price" value="' + escapeAttr(item.price) + '" inputmode="decimal" /></div>' +
      '<div class="field"><label>Quantity</label><input data-idx="' + i + '" data-field="qty" value="' + escapeAttr(item.qty) + '" inputmode="decimal" /></div>' +
      '<div class="field unit-price-cell"><label class="lbl">Per unit</label><div class="up' + (isBest ? ' best-price' : '') + '">' + upText + '</div></div>' +
      '<button class="remove-btn" data-remove="' + i + '" title="Remove">\u00d7</button>' +
    '</div>';
  }).join('');

  if (minPrice !== null) {
    const bestIdx = unitPrices.findIndex(p => p !== null && Math.abs(p - minPrice) < 1e-9);
    const bestName = items[bestIdx].name || 'Item ' + (bestIdx + 1);
    winnerEl.textContent = 'Best value: ' + bestName + ' at $' + minPrice.toFixed(4) + ' per unit';
  } else {
    winnerEl.textContent = '';
  }
}

function escapeAttr(str) {
  return String(str).replace(/&/g, '&amp;').replace(/"/g, '&quot;');
}

itemsEl.addEventListener('input', (e) => {
  const idx = e.target.dataset.idx;
  const field = e.target.dataset.field;
  if (idx === undefined) return;
  items[idx][field] = e.target.value;
  render();
});

itemsEl.addEventListener('click', (e) => {
  const btn = e.target.closest('button[data-remove]');
  if (!btn) return;
  items.splice(parseInt(btn.dataset.remove, 10), 1);
  render();
});

addItemBtn.addEventListener('click', () => {
  items.push({ name: '', price: '', qty: '' });
  render();
  const lastInput = itemsEl.querySelector('.item-row:last-child input');
  if (lastInput) lastInput.focus();
});

render();