Scribd
Upload
2 views16 pages

Function

The document outlines a web application for calculating shopping totals, featuring an HTML interface with input fields for absence number, item name, price, and quantity. It includes CSS for styling and JavaScript functions to handle input validation, total calculations, and row management in a table. The application alerts users for invalid inputs and allows for the addition and removal of items in the shopping list.

Uploaded by

unsolve90
Copyright
© All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as DOCX, PDF, TXT or read online on Scribd
2 views16 pages

Function

The document outlines a web application for calculating shopping totals, featuring an HTML interface with input fields for absence number, item name, price, and quantity. It includes CSS for styling and JavaScript functions to handle input validation, total calculations, and row management in a table. The application alerts users for invalid inputs and allows for the addition and removal of items in the shopping list.

Uploaded by

unsolve90
Copyright
© All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as DOCX, PDF, TXT or read online on Scribd

MengInput nomor absen | nama barang | harga barang | jumlah barang

Jika Input tidak sesuai/valid

Output
Code
[Link]
<!DOCTYPE html>
<html lang="id">
<head>
<meta charset="UTF-8">
<title>Hitung Total Belanja</title>
<link rel="stylesheet" href="[Link]">
</head>
<body>
<div class="container">
<h1>Program Hitung Belanja</h1>

<table id="hasil">
<thead>
<tr>
<th>Nomor Absen</th>
<th>Nama Barang</th>
<th>Harga Barang</th>
<th>Jumlah Barang</th>
<th>Diskon</th>
<th>Total Bayar</th>
<th>Aksi</th>
</tr>
</thead>
<tbody>
<!-- Input row -->
<tr>
<td><input type="number" id="nomorAbsen" placeholder="Nomor
Absen"></td>
<td><input type="text" id="namaBarang" placeholder="Nama
Barang"></td>
<td><input type="number" id="hargaBarang" placeholder="Harga"></td>
<td><input type="number" id="jumlahBarang" placeholder="Jumlah"></td>
<td colspan="2"></td>
<td><button onclick="hitungBelanja()">Tambah</button></td>
</tr>
</tbody>
</table>
</div>

<script src="[Link]"></script>
</body>
</html>
[Link]
body {
font-family: Arial, sans-serif;
background-color: #f9f9f9;
margin: 0;
padding: 0;
}

.container {
display: flex;
flex-direction: column;
align-items: center;
justify-content: flex-start;
border: 1px solid #ddd;
border-radius: 10px;
padding: 30px;
margin: 30px auto;
width: 100%;
max-width: 800px;
background-color: #fff;
box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
}

h1 {
margin-bottom: 20px;
font-size: 28px;
color: #333;
}

button {
background-color: #4CAF50;
color: white;
border: none;
padding: 10px 20px;
margin-bottom: 20px;
font-size: 16px;
border-radius: 6px;
cursor: pointer;
transition: background 0.3s ease;
}

button:hover {
background-color: #45a049;
}

table {
border-collapse: collapse;
width: 100%;
margin-top: 10px;
border-radius: 6px;
overflow: hidden;
}

th, td {
border: 1px solid #ddd;
padding: 12px;
text-align: center;
}

th {
background-color: #4CAF50;
color: white;
font-weight: bold;
}

tr:nth-child(even) {
background-color: #f9f9f9;
}

tr:hover {
background-color: #f1f1f1;
}
table input {
width: 95%;
padding: 8px;
border: 1px solid #ccc;
border-radius: 6px;
font-size: 14px;
outline: none;
transition: border 0.3s ease, box-shadow 0.3s ease;
}

table input:focus {
border-color: #4CAF50;
box-shadow: 0 0 6px rgba(76, 175, 80, 0.4);
}

table button {
background-color: #4CAF50;
color: white;
border: none;
padding: 8px 14px;
border-radius: 6px;
cursor: pointer;
font-size: 14px;
transition: background 0.3s ease;
}

table button:hover {
background-color: #45a049;
}

table td button {
background-color: #e74c3c;
}

table td button:hover {
background-color: #c0392b;
}
[Link]
function formatRupiah(angka) {
return "Rp." + [Link]("id-ID");
}

function hitungBelanja() {

// Ambil nilai dari input


let nomorAbsen = parseInt([Link]("nomorAbsen").value);
let namaBarang = [Link]("namaBarang").value;
let hargaBarang =
parseFloat([Link]("hargaBarang").value);
let jumlahBarang =
parseInt([Link]("jumlahBarang").value);

if (!namaBarang || isNaN(hargaBarang) || isNaN(jumlahBarang)) {


alert("Input tidak valid!");
return;
}

// Hitung total dan diskon


let totalBelanja = hargaBarang * jumlahBarang;
let diskon = jumlahBarang > 100 ? (nomorAbsen / 100) * totalBelanja : 0;
let totalSetelahDiskon = totalBelanja - diskon;

// Tambahkan baris baru ke tabel (di bawah input row)


let tbody = [Link]("#hasil tbody");
let row = [Link]("tr");

[Link] = `
<td>${nomorAbsen}</td>
<td>${namaBarang}</td>
<td>${formatRupiah(hargaBarang)}</td>
<td>${jumlahBarang}</td>
<td>${formatRupiah(diskon)}</td>
<td>${formatRupiah(totalSetelahDiskon)}</td>
<td><button onclick="hapusRow(this)">Hapus</button></td>
`;

[Link](row);

// Reset input
[Link]("namaBarang").value = "";
[Link]("hargaBarang").value = "";
[Link]("jumlahBarang").value = "";
}
function hapusRow(button) {
let row = [Link];
[Link]();
}

You might also like