Home » » Cara Membuat Kalkulator

Cara Membuat Kalkulator

Written By Nurul Watoni on Rabu, 19 Februari 2014 | 08.41


Dewasa ini hampir semua teknologi dalam dunia nyata telah dikonversi ke dalam dunia komputer, seperti ponsel virtual, ipad virtual, mobil, pesawat hingga kalkulator virtual.

Pada postingan kali ini saya akan mengajari anda cara membuat salah satu tools di atas, yaitu kalkulator. Mengapa kalkulator? karena kalkulator ini proses pembuatannya tidak serumit dan sesulit tools yang lain.
Kalkulator yang saya buat kali ini sangat sederhana, karena hanya ada 3 komponen, yaitu: input text yang berfungsi untuk memasukkan angka, tombol untuk menginputkan angka, dan tombol untuk operasi dasar matematika (tambah, kurang, etc).
Dan konsepnya pun sangat sederhana, karena hanya ada 4 proses yang perlu dijalankan, yaitu:

  1. Ambil value pertama (angka pertama) dari input text lalu convert ke dalam Integer (agar dapat melakukan operasi matematika) kemudian simpan ke dalam variabel.
  2. Ambil value kedua (prosesnya sama dengan langkah pertama).
  3. Operasikan angka pertama dan angka kedua.
  4. Tampilkan hasil operasi ke dalam input text.
  5. Selesai!

Ok, let's begin to the code.
Pertama buat terlebih dahulu kode HTML-nya.

index.html


Kalkulator Virtual BS


    
    
        

Kalkulator Virtual BS

Kalkulator Virtual by belajar-scripting.blogspot.com
<

pada kode di atas, tombolnya dibagi menjadi dua bagian utama, pertama tombol untuk angka dan yang kedua tombol untuk operasi dasar matematika.
setelah htmlnya selesai, selanjutnya kita buat file cssnya yang berfungsi untuk mengatur tampilan dan tata letak widget kita kali ini.

style.css
* {
margin:0;
padding:0;
}

body {
background:#f0fff0;
}

header {
height:60px;
background:#2f4f4f;
color:white;
}

header h1 {
text-align:center;
padding-top:5px;
}

#kembali {
width:60px;
height:60px;
position:fixed;
right:10px;
bottom:10px;
border-radius:30px;
background:#2f4f4f;
}

#kembali:hover {
background:#7cfc00;
}

#kembali:hover #icon{
color:#4b0082;
}

#icon {
color:#7cfc00;
font-size:50px;
margin-left:10px;
}

#a {
width:250px;
height:30px;
border-radius:5px;
border:1px solid gray;
}

#b {
width:40px;
height:40px;
}

#kalkulator {
width:270px;
height:300px;
background:#708090;
margin-top:110px;
border-radius:10px;
}

#isi {
padding-top:5px;
}

#tombol {
margin-top:10px;
}

marquee {
padding-top:10px;
}

.angka {
color:red;
}

.operasi {
color:blue;
}

.angka,.operasi {
width:40px;
height:40px;
}

.angka:hover {
color:blue;
}

.operasi:hover {
color:red;
}

.angka:hover,.operasi:hover {
font-weight:bold;
width:40px;
height:40px;
cursor:pointer;
}


<code></css>

kalkulator ini sudah selesai dibuat, namun hanya berfungsi sebagai hiasan tanpa dapat digunakan, untuk itu digunakanlah javascript agar kalkulator kita kali ini dapat menyala.

script.js
a=0;
u=1;


function satu()
{
document.getElementById('a').value=document.getElementById('a').value+1;
}

function dua()
{
document.getElementById('a').value=document.getElementById('a').value+2;
}

function tiga()
{
document.getElementById('a').value=document.getElementById('a').value+3;
}

function empat()
{
document.getElementById('a').value=document.getElementById('a').value+4;
}

function lima()
{
document.getElementById('a').value=document.getElementById('a').value+5;
}

function enam()
{
document.getElementById('a').value=document.getElementById('a').value+6;
}

function tujuh()
{
document.getElementById('a').value=document.getElementById('a').value+7;
}

function delapan()
{
document.getElementById('a').value=document.getElementById('a').value+8;
}

function sembilan()
{
document.getElementById('a').value=document.getElementById('a').value+9;
}

function kosong()
{
document.getElementById('a').value=document.getElementById('a').value+0;
}

function satu()
{
document.getElementById('a').value=document.getElementById('a').value+1;
}


function tambah()
{
b=document.getElementById('a').value;
c=parseFloat(b);
d=a+c;
document.getElementById('a').value='';
z=1;
}

function kurang()
{
b=document.getElementById('a').value;
c=parseFloat(b);
d=a+c;
document.getElementById('a').value='';
z=2;
}

function kali()
{
b=document.getElementById('a').value;
c=parseFloat(b);
d=a+c;
document.getElementById('a').value='';
z=3;
}

function bagi()
{
b=document.getElementById('a').value;
c=parseFloat(b);
d=a+c;
document.getElementById('a').value='';
z=4;
}

function persen()
{
b=document.getElementById('a').value;
c=parseFloat(b);
d=a+c;
document.getElementById('a').value='';
z=5;
}

function pangkat()
{
b=document.getElementById('a').value;
c=parseFloat(b);
d=a+c;
document.getElementById('a').value='';
z=6;
}

function sqrt()
{
b=document.getElementById('a').value;
c=parseFloat(b);
d=a+c;
document.getElementById('a').value=Math.sqrt(d);
}

function bagix()
{
b=document.getElementById('a').value;
c=parseFloat(b);
d=a+c;
document.getElementById('a').value=1/d;
}




function koma()
{
b=document.getElementById('a').value;
c=parseFloat(b);
d=a+c;
document.getElementById('a').value=d+".";
}


function plusmin()
{
b=document.getElementById('a').value;
c=parseFloat(b);
d=a+c;
if(u==1){
document.getElementById('a').value="-"+d;
u=2;
}
else
{
document.getElementById('a').value=d;
u=1;
}
}

function hasil()
{
b=document.getElementById('a').value;
c=parseFloat(b);
e=a+c;


if(z==1)
{
document.getElementById('a').value=d+e;
}

else if(z==2)
{
document.getElementById('a').value=d-e;
}

else if(z==3)
{
document.getElementById('a').value=d*e;
}

else if(z==4)
{
document.getElementById('a').value=d/e;
}

else if(z==5)
{
document.getElementById('a').value=d%e;
}

else if(z==6)
{
document.getElementById('a').value=Math.pow(d,e);
}
}


Ya, kali ini kalkulatornya benar-benar sudah selesai, dan tentunya dapat digunakan untuk melakukan operasi dasar matematika. Namun kalkulator ini masih memiliki banyak bug
yang belum dapat saya fix (perbaiki). untuk itu, anda sebagai pengunjung yang baik dapat mencari bug pada kode ini, setelah itu beritahu saya jika anda bisa memperbaikinya!
Thank You!

2 komentar: