Tugas kasir sederhana
KASIR SEDERHANA
Contoh codingan di html
<!doctype html>
<html lang="id">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width,initial-scale=1" />
<title>Kasir Sederhana — Very Simple</title>
<style>
body{font-family:Arial, Helvetica, sans-serif; padding:16px; background:#f7f7f8}
.box{background:#fff;padding:12px;border-radius:8px;max-width:420px;margin:0 auto;box-shadow:0 2px 6px rgba(0,0,0,0.06)}
input, button {padding:8px;margin:6px 0;width:100%;box-sizing:border-box}
table{width:100%;border-collapse:collapse;margin-top:8px}
th,td{padding:6px;border-bottom:1px solid #eee;text-align:left}
.row{display:flex;gap:8px}
.row input{flex:1}
.right{text-align:right}
</style>
</head>
<body>
<div class="box">
<h3>Cihuyy storee</h3>
<div>
<input id="name" placeholder="Nama produk (contoh: Kopi)" />
<div class="row">
<input id="price" type="number" placeholder="Harga (Rp)" min="0" />
<input id="qty" type="number" placeholder="Qty" min="1" value="1" />
</div>
<button id="add">Tambah</button>
</div>
<table aria-live="polite">
<thead><tr><th>Produk</th><th>Qty</th><th class="right">Subtotal</th></tr></thead>
<tbody id="tb"><tr><td colspan="3" class="right">Belum ada item</td></tr></tbody>
</table>
<div style="margin-top:8px">
<div>Jumlah: <span id="totalText">Rp 0</span></div>
<input id="pay" type="number" placeholder="Jumlah dibayar (Rp)" min="0" />
<div>Kembalian: <strong id="changeText">Rp 0</strong></div>
<button id="payBtn">Hitung Kembalian</button>
<button id="clear" style="margin-top:8px">Bersihkan</button>
</div>
</div>
<script>
// model sederhana
const cart = [];
const tb = document.getElementById('tb');
const totalText = document.getElementById('totalText');
const changeText = document.getElementById('changeText');
const fmt = n => 'Rp ' + Number(n || 0).toLocaleString('id-ID');
function renderCart(){
if(cart.length === 0){
tb.innerHTML = '<tr><td colspan="3" class="right">Belum ada item</td></tr>';
totalText.textContent = fmt(0);
return;
}
tb.innerHTML = '';
let total = 0;
cart.forEach((it, i) => {
const sub = Number(it.price) * Number(it.qty);
total += sub;
const tr = document.createElement('tr');
tr.innerHTML = `<td>${escapeHtml(it.name)}</td>
<td>${Number(it.qty)}</td>
<td class="right">${fmt(sub)}</td>`;
tb.appendChild(tr);
});
totalText.textContent = fmt(total);
}
function escapeHtml(s){
return String(s).replace(/&/g,'&').replace(/</g,'<').replace(/>/g,'>');
}
document.getElementById('add').addEventListener('click', () => {
const name = document.getElementById('name').value.trim();
const price = Number(document.getElementById('price').value);
const qty = Number(document.getElementById('qty').value) || 1;
if(!name || !isFinite(price) || price < 0 || qty <= 0){
alert('Isi nama, harga >=0, qty >=1');
return;
}
cart.push({name, price: Math.round(price), qty: Math.round(qty)});
document.getElementById('name').value = '';
document.getElementById('price').value = '';
document.getElementById('qty').value = '1';
renderCart();
});
document.getElementById('payBtn').addEventListener('click', () => {
// hitung total dari tampilan (bukan input user)
const totalStr = totalText.textContent.replace(/[^0-9\-]+/g,'');
const total = Number(totalStr) || 0;
const pay = Number(document.getElementById('pay').value) || 0;
const change = Math.max(pay - total, 0);
changeText.textContent = fmt(change);
if(pay < total) alert('Pembayaran kurang.');
});
document.getElementById('clear').addEventListener('click', () => {
cart.length = 0;
document.getElementById('pay').value = '';
changeText.textContent = fmt(0);
renderCart();
});
// initial
renderCart();
</script>
</body>
</html>
Komentar
Posting Komentar