Jumat, 17 Oktober 2014

Membuat Kalkulator Dengan HTML Dan CSS

MEMBUAT KALKULATOR SEDERHANA DENGAN HTML & JAVA SCRIPT

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.
Image
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=”styleku.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 Ku :)</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=”#00FFFF”width=”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=”#00FF1F”width=”300″><h3>Tulisan Terkini</h3>
<ul>
<li>Januari</li>
<ul>
<li>Catatan Kuliah</li>
<li>Travelling</li>
</ul>
</li>
<li>Desember</li>
<ul><li>Mengaji</li>
<li>Berenang</li>
<li>Bernyanyi</li>
</ul>
</td>
</tr>
<tr>
<td bgcolor=”#0011ff”colspan=”2″ >Di buat Oleh Denny Andika Pinem_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 – agan ingin melihat tampilan ini lebih menarik, agan – gana bisa mengopreknya sendiiri sabil belajar. :)

Diposting oleh di

Tidak ada komentar:

Posting Komentar

Langganan: Posting Komentar (Atom)