Kasir sederhana beserta hasil laporan
Kasir dan laporan penjualan
<!DOCTYPE html>
<html lang="id">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Kasir & Laporan Penjualan</title>
<style>
body {
font-family: Arial, sans-serif;
background-color: #f4f6f7;
margin: 0;
padding: 20px;
}
.container {
max-width: 700px;
margin: auto;
background: #fff;
padding: 20px;
border-radius: 10px;
box-shadow: 0 0 10px rgba(0,0,0,0.1);
}
h1, h2 {
text-align: center;
color: #333;
}
input {
width: 100%;
padding: 10px;
margin: 5px 0;
border: 1px solid #ccc;
border-radius: 6px;
font-size: 14px;
}
button {
width: 100%;
padding: 10px;
margin-top: 10px;
border: none;
background-color: #28a745;
color: white;
font-size: 16px;
border-radius: 6px;
cursor: pointer;
}
button:hover {
background-color: #218838;
}
table {
width: 100%;
margin-top: 15px;
border-collapse: collapse;
}
th, td {
border: 1px solid #ccc;
padding: 8px;
text-align: center;
}
th {
background-color: #007bff;
color: white;
}
.laporan {
margin-top: 20px;
background-color: #f9f9f9;
padding: 10px;
border-radius: 6px;
border: 1px solid #ddd;
}
.laporan p {
margin: 5px 0;
font-size: 15px;
}
</style>
</head>
<body>
<div class="container">
<h1> Kasir doang</h1>
<label>Nama Barang:</label>
<input type="text" id="nama" placeholder="Contoh: Indomie">
<label>Harga Barang (Rp):</label>
<input type="number" id="harga" placeholder="Contoh: 3000">
<label>Jumlah Barang:</label>
<input type="number" id="jumlah" placeholder="Contoh: 2">
<button onclick="tambahBarang()">Tambah Penjualan</button>
<h2>📋 Daftar Penjualan</h2>
<table id="tabelPenjualan">
<thead>
<tr>
<th>No</th>
<th>Nama Barang</th>
<th>Harga</th>
<th>Jumlah</th>
<th>Subtotal</th>
</tr>
</thead>
<tbody></tbody>
</table>
<div class="laporan">
<h2>📊 Laporan Hasil Penjualan</h2>
<p id="totalBarang">Total Barang Terjual: 0</p>
<p id="totalPendapatan">Total Pendapatan: Rp 0</p>
<p id="rataHarga">Rata-rata Harga Barang: Rp 0</p>
</div>
</div>
<script>
let daftar = [];
let totalPendapatan = 0;
let totalBarang = 0;
function tambahBarang() {
const nama = document.getElementById("nama").value;
const harga = parseInt(document.getElementById("harga").value);
const jumlah = parseInt(document.getElementById("jumlah").value);
if (!nama || !harga || !jumlah) {
alert("Harap isi semua kolom!");
return;
}
const subtotal = harga * jumlah;
daftar.push({ nama, harga, jumlah, subtotal });
totalPendapatan += subtotal;
totalBarang += jumlah;
tampilkanData();
hitungLaporan();
// Reset input
document.getElementById("nama").value = "";
document.getElementById("harga").value = "";
document.getElementById("jumlah").value = "";
}
function tampilkanData() {
const tbody = document.querySelector("#tabelPenjualan tbody");
tbody.innerHTML = "";
daftar.forEach((item, index) => {
const row = `
<tr>
<td>${index + 1}</td>
<td>${item.nama}</td>
<td>Rp ${item.harga.toLocaleString()}</td>
<td>${item.jumlah}</td>
<td>Rp ${item.subtotal.toLocaleString()}</td>
</tr>
`;
tbody.innerHTML += row;
});
}
function hitungLaporan() {
let rata = daftar.length > 0 ? totalPendapatan / totalBarang : 0;
document.getElementById("totalBarang").innerText =
"Total Barang Terjual: " + totalBarang + " pcs";
document.getElementById("totalPendapatan").innerText =
"Total Pendapatan: Rp " + totalPendapatan.toLocaleString();
document.getElementById("rataHarga").innerText =
"Rata-rata Harga Barang: Rp " + rata.toFixed(0).toLocaleString();
}
</script>
</body>
</html>
Komentar
Posting Komentar