Senin, 07 Maret 2011

Program Kantin Online


Ini file kantin.js
function JumlahHarga(){
var harga;
var pesanan;
var total = 0;
for(i = 0; i < 12; i += 2){ harga = parseInt(document.kantin[i].value); pesanan = parseInt(document.kantin[i + 1].value); if(pesanan > 0){
total = total + (harga * pesanan);
}
document.kantin.total.value = total;
}
}

function Potongan(){
var total = parseInt(document.kantin.total.value);
var diskon;
if (total > 50000){
diskon = 10000;
}else{
diskon = 0;
}

document.kantin.diskon.value = diskon;
}

function TotalBayar(){
var total = parseInt(document.kantin.total.value);
var diskon = parseInt(document.kantin.diskon.value);
var bayar = total - diskon;
document.kantin.bayar.value = bayar;
}

function proses(){
JumlahHarga();
Potongan();
TotalBayar();
}

function reset(){
var elemen = document.kantin;
elemen.pesan1.value = "";
elemen.pesan2.value = "";
elemen.pesan3.value = "";
elemen.pesan4.value = "";
elemen.pesan5.value = "";
elemen.pesan6.value = "";
elemen.total.value = "";
elemen.diskon.value = "";
elemen.bayar.value = "";
}


Ini file kantinku.js
<!DOCTYPEhtml>
<html lang="en">
<head>
<title>Kantin Sederhana</title>
<script language="JavaScript" type="text/javascript" src="kantin.js"></script>

</head>
<body>
<hr width="650px" size="10" color="pink" align="left">
<font size="6" color="black" face="Tahoma" ><b>Kantin Sederhana</b></font>
<hr width="650px" size="10" color="pink" align="left">
<form name="kantin" action="#">
<table border="5">
<tr bgcolor="Pink">
<th>No</th>
<th>Makanan / Minuman</th>
<th>Harga</th>
<th>Pesan</th>
</tr>
<tr>
<td align="center">1</td>
<td>Tahu Telurbebek</td>
<td>@<input type="text" name="harga1" value="8000" onchange="proses()" /></td>
<td><input type="text" name="pesan1" onchange="proses()" /></td>
</tr>
<tr>
<td align="center">2</td>
<td>Nasi Cumi Semrawut</td>
<td>@<input type="text" name="harga2" value="12000" onchange="proses()" /></td>
<td><input type="text" name="pesan2" onchange="proses()" /></td>
</tr>
<tr>
<td align="center">3</td>
<td>Gado-Gado Maknyus</td>
<td>@<input type="text" name="harga3" value="5500" onchange="proses()" /></td>
<td><input type="text" name="pesan3" onchange="proses()" /></td>
</tr>
<tr>
<td align="center">4</td>
<td>Es Petir Seger</td>
<td>@<input type="text" name="harga4" value=4500" onchange="proses()" /></td>
<td><input type="text" name="pesan4" onchange="proses()" /></td>
</tr>
<tr>
<td align="center">5</td>
<td>Es Dawet Ayu</td>
<td>@<input type="text" name="harga5" value="3500" onchange="proses()" /></td>
<td><input type="text" name="pesan5" onchange="proses()" /></td>
</tr>

<tr>
<td colspan="3" align="center" bgcolor="Pink"><b>Jumlah Total</b></td>
<td><input type="text" name="total" readonly /></td>
</tr>
<tr>
<td colspan="3" align="center" bgcolor="Pink"><b>Diskon</b></td>
<td><input type="text" name="diskon" readonly /></td>
</tr>
<tr>
<td colspan="3" align="center" bgcolor="Pink"><b>Jumlah Dibayar</b></td>
<td><input type="text" name="bayar" readonly /></td>
</tr>
</table>
<br>
<input type="button" name="batal" value="Batal" onclick="reset()" />
</form><br>
<font size="2px">
<b>Promo :</b><br>
- Pembelian di atas Rp 50.000,00 akan dapatkan diskon sebesar Rp 10.000,00.<br>
- Selamat Menikmati Hidangan -<br>
<br>
<hr width="650px" size="10" color="pink" align="left">
</body>
</html>

Program Kalkulator Sederhana



Ini File calculator.js
function tambah()
{
var komponen = document.calculator;
var nilai1 = parseInt(komponen.nilai1.value);
var nilai2 = parseInt(komponen.nilai2.value);
var op = komponen.op.value;
var result;
result = nilai1 + nilai2;
komponen.result.value = result;
}

function kurang()
{
var komponen = document.calculator;
var nilai1 = parseInt(komponen.nilai1.value);
var nilai2 = parseInt(komponen.nilai2.value);
var op = komponen.op.value;
var result;
result = nilai1 - nilai2;
komponen.result.value = result;
}

function bagi()
{
var komponen = document.calculator;
var nilai1 = parseInt(komponen.nilai1.value);
var nilai2 = parseInt(komponen.nilai2.value);
var op = komponen.op.value;
var result;
result = nilai1 / nilai2;
komponen.result.value = result;
}

function kali()
{
var komponen = document.calculator;
var nilai1 = parseInt(komponen.nilai1.value);
var nilai2 = parseInt(komponen.nilai2.value);
var op = komponen.op.value;
var result;
result = nilai1 * nilai2;
komponen.result.value = result;
}

function reset()
{
var elemen = document.calculator;
elemen.nilai1.value = "";
elemen.nilai2.value = "";
elemen.result.value = "";
}


Ini file kalkulator.html
<!DOCTYPE html>
<html lang="en">
<head>
<title>Program Kalkulator</title>
<script language="JavaScript" type="text/javascript" src="calculator.js"></script>
</head>

<hr color="blue" width="500px" size="15px" align="left" />
<font size="5" color="blue" face="Calibri">Program Kalkulator Sederhana</font>

<hr color="blue" width="500px" size="15px" align="left" /><br>
<form name="calculator" action="#" >
<font face="Calibri">Masukkan Bilangan Pertama
<br>
<input type="text" size="20" name="nilai1" />
<br>
Masukkan Bilangan Kedua
<br>
<input type="text" size="20" name="nilai2" /></font><br>

<input name="op" type="button" value="+" onclick="tambah() " />
<input name="op" type="button" value="-" onclick="kurang() " />
<input name="op" type="button" value="x" onclick="kali() " />
<input name="op" type="button" value="/" onclick="bagi() " />

<br>
<br><font face="Comic Sans MS">Hasil
<br><input type="text" size="25" name="result" readonly /><br>
<br><input type="button" value="Hapus" onclick="reset()" /></br>

<br><hr color="blue" width="500px" size="15px" align="left"></hr>
<font size="2" color="black"><b>&copy; 2011, CopyRight by Intan Nur Varida</b></font>
<hr color="blue" width="500px" size="15px" align="left"></hr>
</body>
</html>