• ..


Salah satu komponen utama penyusun sebuah WEB adalah JavaScript. Disni kita akan mencoba membuat sebuah program kalkulator sederhana yang disusun menggunakan JavaScript, HTML dan CSS.
Tampilan kalkulator tersebut adalah sebagai berikut:
Untuk Kode HTML, CSS, dan JavaScriptnya, bisa dilihat dibawah ini:

Kode CSS:

body {
margin: 25px;
width: 300px;
height: 400px;
text-align:center;
}

header,section,footer {
display: block;
}

header {
height: 70px;
background-color: #2864c6;
text-align: center;
font-family: klavika bold;
font-size: 30px;
color: black;
font-weight: bold;
color: white;
}

section {
height: 280px;
background-color: #9bb5e0;
text-align: center;
padding: 20px;
}

footer {
clear: both;
height: 20px;
background-color: #2864c6;
text-align: center;
color: white;
}

Kode HTML dan JavaScript :

<!DOCTYPE html>
<html lang="en">
<html>
<head>
 <title>Kalkulator Sederhana</title>
 <link rel="stylesheet" href="kalkulator.css" type="text/css" />
</head>

<body>
 <script language="javascript" type="text/javascript">
  function tambah()
  {
   var myForm = document.form1;
   if(myForm.bil1.value=="")myForm.bil1.value=0;
   if(myForm.bil2.value=="")myForm.bil2.value=0;
   myForm.total.value = parseInt(myForm.bil1.value) + parseInt(myForm.bil2.value);
  }

  function kurang()
  {
   var myForm = document.form1;
   if(myForm.bil1.value=="")myForm.bil1.value=0;
   if(myForm.bil2.value=="")myForm.bil2.value=0;
   myForm.total.value = parseInt(myForm.bil1.value) - parseInt(myForm.bil2.value);
  }

  function kali()
  {
   var myForm = document.form1;
   if(myForm.bil1.value=="")myForm.bil1.value=0;
   if(myForm.bil2.value=="")myForm.bil2.value=0;
   myForm.total.value = parseInt(myForm.bil1.value) * parseInt(myForm.bil2.value);
  }

  function bagi()
  {
   var myForm = document.form1;
   if(myForm.bil1.value=="")myForm.bil1.value=0;
   if(myForm.bil2.value=="")myForm.bil2.value=0;
   myForm.total.value = parseInt(myForm.bil1.value) / parseInt(myForm.bil2.value);
  }
  
  function clean()
  {
   var myForm = document.form1;
   myForm.bil1.value="";
   myForm.bil2.value="";
   myForm.total.value="";
  }
 </script>
 
 <header>
  Kalkulator Sederhana Dengan JavaScript
 </header>
 
 <section>
  <form name=form1 action="#">
   Bilangan 1<br />
   <input type="text" name="bil1" /><br /><br />
   Bilangan 2<br />
   <input type="text" name="bil2" /><br /><br />
   Operator<br />
   <input type="button" value="+" onClick="tambah()" />
   <input type="button" value="-" onClick="kurang()" />
   <input type="button" value="*" onClick="kali()" />
   <input type="button" value="/" onClick="bagi()" /><br /><br />
   Hasil<br />
   <input type="text" name="total" readonly /><br /><br />
   <input type="button" value="Bersihkan" onClick="clean()" />
  </form>
 </section>
 
 <footer>&copy; haqiphoenix</footer>
</body>
</html>