CARA MEMBUAT APLIKASI KASIR SEDERHANA
DENGAN HTML
Hai semua! kali ini saya akan membagikan tutorial cara membuat program kasir sederhana menggunakan HTML, CSS dan JAVASCRIPT
Contoh:
 |
| Contoh Program Kasir Sederhana |
https://codepen.io/pen?template=qBpQZMa
1. Buat lah Tablenya menggunakan html
CONTOH :
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Program Kasir</title>
</head>
<body>
<h1>Program Kasir</h1>
<table>
<tr>
<td><label for="">Pilih Barang</label></td>
<td><select onclick="jalankan()" name="" id="pilih-barang">
<option value="sepatu">Sepatu</option>
<option value="baju">Baju</option>
<option value="celana">Celana</option>
</select></td>
</tr>
<tr>
<td> <label for="#">Jumlah Barang</label></td>
<td><input type="number" name="#" id="jumlah-barang"></td>
</tr>
</table>
<h1>===Cetak===</h1>
<table>
<tr>
<td><label for="">Harga Barang</label></td>
<td><input type="number" id="harga-barang" disabled=""></td>
</tr>
<tr>
<td><label for="">Total Harga</label></td>
<td><input type="number" id="total-harga" disabled=""></td>
</tr>
</table>
<button onclick="proses()">Proses</button>
<button onclick="reset()">Reset</button>
Ini Codingan Javascriptnya:
function jalankan() {
var pilih_barang = document.getElementById('pilih-barang').value;
var jumlah = document.getElementById('jumlah-barang').value;
if (pilih_barang === "sepatu"){
let harga = 20000;
let total = harga * jumlah;
document.getElementById('harga-barang').value = harga;
document.getElementById('total-harga').value = total;
}
if (pilih_barang === "baju"){
let harga = 10000;
let total = harga * jumlah;
document.getElementById('harga-barang').value = harga;
document.getElementById('total-harga').value = total;
}
if (pilih_barang === "celana"){
let harga = 5000;
let total = harga * jumlah;
document.getElementById('harga-barang').value = harga;
document.getElementById('total-harga').value = total;
}
}
function proses() {
var pilih_barang = document.getElementById('pilih-barang').value;
var jumlah = document.getElementById('jumlah-barang').value;
if (pilih_barang === "sepatu"){
let harga = 20000;
let total = harga * jumlah;
document.getElementById('total-harga').value = total;
}
if (pilih_barang === "baju"){
let harga = 10000;
let total = harga * jumlah;
document.getElementById('total-harga').value = total;
}
if (pilih_barang === "celana"){
let harga = 5000;
let total = harga * jumlah;
document.getElementById('total-harga').value = total;
}
}
function reset() {
document.getElementById('total-harga').value = "";
document.getElementById('harga-barang').value = "";
document.getElementById('jumlah-barang').value = "";
}
0 Komentar