 |
| gambar 1 |
Buka text editor yang kalian pakai, notepad, notepad++, dreamweaver atau apalah. Ketik kode HTML berikut ini:
<html>
<head>
<title>C A L C U L A T O R</title>
</head>
<body>
<div id="calculator">
<center><h2>C A L C U L A T O R</h2></center>
<form name="kalkulator">
<table align="center">
<tr>
<td>
<input class="bil" type="text" name="bil1" placeholder="Bilangan 1">
</td>
<td rowspan="2">
<input class="hasil" disabled="true" type="text" name="hasil" placeholder="Hasil">
</td>
<tr>
<td>
<input class="bil" type="text" name="bil2" placeholder="Bilangan 2">
</td>
</tr>
<tr>
<td colspan="2"><br><center>
<input class="tombol" type="button" value="x" onClick="kali()">
<input class="tombol" type="button" value="/" onClick="bagi()">
<input class="tombol" type="button" value="+" onClick="tambah()">
<input class="tombol" type="button" value="-" onClick="kurang()">
<input class="tombol" type="button" value="HAPUS" onClick="hapus()"></center>
</td>
</tr>
</table>
</form>
</div>
</body>
</html>
Simpan koding di atas dengan nama “kalkulator.html”.
Lalu coba anda buka file “kalkulator.html” tersebut. Hasilnya terlihat seperti gambar berikut:
 | |
| gambar 2 |
Hasil dari koding diatas hanya berupa form dan belum berfungsi untuk hitung-hitungan. Sekarang kita masukkan ramuan javascript. Ketik koding berikut di atas tag “</head>”:
<script language="javascript">
function kali()
{
a = eval(kalkulator.bil1.value)
b = eval(kalkulator.bil2.value)
c = a * b
kalkulator.hasil.value = c
}
function bagi()
{
a = eval(kalkulator.bil1.value)
b = eval(kalkulator.bil2.value)
c = a / b
kalkulator.hasil.value = c
}
function tambah()
{
a = eval(kalkulator.bil1.value)
b = eval(kalkulator.bil2.value)
c = a + b
kalkulator.hasil.value = c
}
function kurang()
{
a = eval(kalkulator.bil1.value)
b = eval(kalkulator.bil2.value)
c = a - b
kalkulator.hasil.value = c
}
function hapus()
{
kalkulator.bil1.value = ""
kalkulator.bil2.value = ""
kalkulator.hasil.value = ""
}
</script>
Simpan. Lalu buka lagi “kalkulator.html”. Coba masukkan nilai pada bilangan 1 dan 2. Berhaslkah..?? Good JOB !!
Agar tampilan dari form terlihat lebih ca’em seperti gambar 1, tambahkan sedikit ramuan CSS berikut tepat diatas tag “</head>” atau dibawah tag “</script>”:
<style type="text/css">Simpan dan buka lagi “kalkulator.html”. lumayan kan.. hehe. Sekianlah tutorial membuat kalkulator sederhana dengan JAVASCRIPT. Sekiranya artikel ini bermanfaat silahkan say thank di kotak komentar atau like this post, OK.
#calculator {
background-color: #efefef;
padding: 10px;
margin: 0px auto;
width: 350px;
height: auto;
border: 2px dashed red;
}
input.hasil {
font-family: verdana;
font-size: 24px;
color: blue;
width: 200px;
height: 50px;
text-align: center;
}
input.bil {
width: 100px;
font-family: verdana;
font-size: 14px;
color: blue;
}
input.tombol {
font-family: verdana;
font-size: 18px;
padding: 13px;
}
</style>
Advertisement
