Style.css
width : 500px;
}
header{
padding-top : 10px;
height : 75px;
}
.title{
width : 450px;
font-style : italic;
background-color : rgba(255, 255, 255, 0.4);
border-bottom-right-radius : 30px;
border-top-left-radius : 30px;
}
section{
text-align : left;
}
footer{
color : white;
font-size : small;
height : 20px;
padding-top : 5px;
padding-bottom : 5px;
}
Pesan.Js
function Harto(){
var harga;
var pesen;
var total = 0;
for(i = 0; i < 10; i += 2){
harga = parseInt(document.pesan[i].value);
pesen = parseInt(document.pesan[i + 1].value);
if(pesen > 0){
total = total + (harga * pesen);
}
document.pesan.total.value = total;
}
}
function diskon(){
var total = parseInt(document.pesan.total.value);
var diskon = 0;
if(total >= 100000){
diskon = 20 / 100 * total;
}
else if(total >= 50000){
diskon = 10 / 100 * total;
}
else if(total >= 25000){
diskon = 5 / 100 * total;
}
document.pesan.diskon.value = diskon;
}
function jumlah(){
var total = parseInt(document.pesan.total.value);
var diskon = parseInt(document.pesan.diskon.value);
var bayar = total - diskon;
document.pesan.bayar.value = bayar;
}
function Hitung(){
Harto();
diskon();
jumlah();
}
function kosong(){
var elemen = document.pesan;
elemen.pesan1.value = "";
elemen.pesan2.value = "";
elemen.pesan3.value = "";
elemen.pesan4.value = "";
elemen.pesan5.value = "";
elemen.total.value = "";
elemen.diskon.value = "";
elemen.bayar.value = "";
}
Form Pemsanan.html
<!DOCTYPE html>
<html lang="en">
<head>
<title>Tugas Praktikum Mod.5</title>
<script language="JavaScript" type="text/javascript" src="pesan.js"></script>
<link rel="stylesheet" type="text/css" href="STYLE.css"/>
</head>
<body>
<center>
<header>
<div class="title"><h3>Form Pemesanan</h3></div>
</header>
<section>
<form name="pesan" action="#">
<table border="1">
<tr>
<th>No</th>
<th>Makanan / Minuman</th>
<th>Harga</th>
<th>Pesan</th>
</tr>
<tr>
<td>1</td>
<td>Bakso Istimewa</td>
<td>@<input type="text" name="harga1" value="12000" onchange="Hitung()"/></td>
<td><input type="text" name="pesan1" onchange="Hitung()"/></td>
</tr>
<tr>
<td>2</td>
<td>Soto Spesial</td>
<td>@<input type="text" name="harga2" value="10000" onchange="Hitung()"/></td>
<td><input type="text" name="pesan2" onchange="Hitung()"/></td>
</tr>
<tr>
<td>3</td>
<td>Mie Ayam Super</td>
<td>@<input type="text" name="harga3" value="15000" onchange="Hitung()"/></td>
<td><input type="text" name="pesan3" onchange="Hitung()"/></td>
</tr>
<tr>
<td>4</td>
<td>Es Degan</td>
<td>@<input type="text" name="harga4" value="5000" onchange="Hitung()"/></td>
<td><input type="text" name="pesan4" onchange="Hitung()"/></td>
</tr>
<tr>
<td>5</td>
<td>Es Campur</td>
<td>@<input type="text" name="harga5" value="7000" onchange="proses()"/></td>
<td><input type="text" name="pesan5" onchange="proses()"/></td>
</tr>
<tr>
<td colspan="3" align="right">Jumlah Total</td>
<td><input type="text" name="total" readonly /></td>
</tr>
<tr>
<td colspan="3" align="right">Diskon</td>
<td><input type="text" name="diskon" readonly /></td>
</tr>
<tr>
<td colspan="3" align="right">Jumlah Dibayar</td>
<td><input type="text" name="bayar" readonly /></td>
</tr>
</table>
<br>
<input type="button" name="batal" value="Batal" onclick="kosong()"/>
</form>
</section>
</center>
</body>
</html>
Hasil
saat tombol batal di klik
0 Response to "Tugas rumah modul 5"
Posting Komentar