Anda di halaman 1dari 6

MEMBUAT KALKULATOR

SEDERHANA DENGAN HTML &


JAVA SCRIPT
Posted on Oktober 25, 2013 by putriaila

Postinngan saya kali ini adalah tentang membuat kalkulator dengan HTML,
Java Script daan CSS sebagai penghiasnya. Kalkulator merupakan sebuah
alat hitung, pada umumnya kalkulator standar atau yang sering teman
teman saya sebut sebagai kalkulator sayur hanya terdiri dari penambahan,
pengurangan, perkalian, serta pembagian. akan tetapi sebenarnya kalkuator
memilik berbagai macam jenis diantaranya da kalkulator sceintifc, kalkulator
programming dsb.Namun kali ini saya hanya akan membagi bagaimana
membuat kalkulator standar saja dengan HTML dan Java Script. Baiklah Disini
saya akan membagi ilmu yang saya dapatkan tentang bagaiamana membuat
kalkulator sederhana dengan HTML dan Java Script.

Gambar diatas merupakan hasil akhir dari pemrograman yanng dibuat


dengan HTML & Java Script serta CSS :)
1. Membuat File kalkulator.htm
<html>
<head>
<title>kalkulator</title>
<link rel=stylesheet href=style.css type=text/css>
</head>
<body bgcolor =#d3465d>
<script language=JavaScript type=text/javascript>

<!
function hitung(){
var myForm = document.form1;
var x=eval(myForm.x.value);
var y=eval(myForm.y.value);
var pil= myForm.opt.value;
if (pil == tambah) {
var z = x + y;
}else if (pil == kurang) {
var z = x y;
} else if (pil == kali) {
var z = x * y;
} else if (pil == bagi) {
var z = x / y;
}
myForm.hasil.value = z;
myForm.x.value = ;
myForm.y.value = ;
}
function resetForm(){
document.form1.reset();
}
</script>
<table width =900 border =1 class =badan>
<tr>
<td bgcolor =#01F10F colspan =2 class =header>
<center><h1>Selamat Datang di Website Putri :)</h1></center></td>
</tr>
<ul class =list-menu>
<li class =list-menuli><a href =home.html >Home</a></li>
<li class =list-menuli><a href =kal.html>Kalkulator</a></li>
<li class =list-menuli><a href =galeri.html>Galeri</a></li>
<li class =list-menuli><a href =tutorial.html >Tutorial</a></li>
<li class =list-menuli><a href =profil.html>Profil</a></li>
<li class =list-menuli><a href =kontak.html>Contact Us</a></li>
</ul>

</tr>
<tr>
<td bgcolor=#00FFFFwidth=488>
<center><h3>Kalkulator Sederhana</h3></center>
<div align=center class =content_li >
<form name=form1 action=# >
<p>bilangan 1 <input type=text name=x /></p>
<p>bilangan 2 <input type=text name=y /></p>
<p>Hasil :::::: <input type=text name=hasil disabled=true /></p>
<p>operator <select name=opt></p>
<option value=tambah> + (tambah)</option>
<option value=kurang> (kurang)</option>
<option value=kali> * (kali)</option>
<option value=bagi> / (bagi)</option>
</select>
<input type=button value== onClick=hitung() />
<input type=button value=CLEAR onClick=resetForm() />
</form>
</td>
<td bgcolor=#00FF1Fwidth=300><h3>Tulisan Terkini</h3>
<ul>
<li>Januari</li>
<ul>
<li>Catatan Kuliah</li>
<li>Travelling</li>
</ul>
</li>
<li>Februari</li>
<ul><li>Mengaji</li>
<li>Computing</li>
<li>Bernyanyi</li>
</ul>
</td>
</tr>
<tr>
<td bgcolor=#0011ffcolspan=2 >Dibuat oleh Putri

Rahayu_1165010<td>
</tr>
</table>
</body>
<html>
Keterangan : Di dalam file kal.html tidak hanya berisi tag tag HTML akan
tetapi di daam file tersebut juga terdapatJava Script serta CSS eksternal.
Tulisan yang saya beri warna merah merupakan sebuah tag CSS eksternal.
apa itu CSS eksternal ?? CSS eksternal adalah seluruh codingan CSS berada
di luar codingan HTML. kemudian untuk tulisan yang berwarna Hijau
merupakan Java Script dimana dengan java Script inilah kita akan membuat
kalkulator tersebut berfungsi sebagaimana mestinya. Kemudian kenapa kok
warna tulisan dan posisi menunya bisa di samping?? itu karena kita juga
menggunakan CSS untuk mempercantik tampilannya. :)
2. Buatlah sebuah file CSS dengan nama styleku.css
.badan{
margin: auto;
border:1px solid #999999;
}
.header{
background-color:#DFFFF9;
padding:5px;
height:100px;
font-family: Helvetica, Geneva, Arial,
SunSans-Regular, sans-serif;
color : #FFFF11;
text-shadow: 0 0 5px #000FFF;
}
.content{
background: #DFFFF9;
position: absolute;
top:7.5em;
left:24em;

width:35em;
}
.side {
background: white;
position: absolute;
top:7.5em;
left:60em;
width:10.5em;
}
.footer {
background: #DDDDFF;
position: absolute;
top:22em;
left:14.5em;
width:56em;
}
.list-menu{
padding-left:2.5em;
position: absolute;
top:6em;
left:12em;
width:9em;
}
.list-menuli{
background: white;
margin: 0.5em 0;
padding: 0.3em;
border-right: 1em solid blue }
.list-menuli{
display:block;
list-style-type:none;
}
.list-menuli:hover{
background-color: #FFFF00;

}
.list-menuli a{
text-decoration:none;
}
a:link {
color: Blue }
a:visited {
color: red }
Keterangan : Dengan CSS kita bisa merubah tampilan website kita sesuka
hatinya kita, kita bisa memodifikasinya semenarik mungkin. d gambar
tersebut ada tulisan seperti bayang bayang biru, itu menggunakan
efek shadow , dengan CSS juga kita bisa merubah posisinya sesuka hati. jika
agan aagan ingin melihat tampilan ini lebih menarik, agan gana bisa
mengopreknya sendiiri sabil belajar. :)