Membuat Kalkulator Simpel Menggunakan JavaScript

Mesin hitung atau Kalkulator adalah alat untuk menghitung dari perhitungan sederhana seperti penjumlahan, pengurangan, perkalian dan pembagian sampai kepada kalkulator sains yang dapat menghitung rumus matematika tertentu. Pada perkembangannya sekarang ini, kalkulator sering dimasukkan sebagai fungsi tambahan daripada komputer, handphone, bahkan sampai jam tangan.

https://id.wikipedia.org/wiki/Mesin_hitung

Tapi kali ini saya akan membuat kalkulator menggunakan javascript, sebelumnya saya di beri tugas oleh dosen untuk membuat sistem atau aplikasi apa saja yang berbau javascript jadi saya memilih membuat kalkulator, dan saya juga ingin membagikan sedikit pengetahuan saya kepada kalian dan tinggal kalian amati, tiru, dan modifikasi, yang paling penting dalam membuat kalkulator mengggunakan javascript ini adalah

  1. Editor
  2. Browser

EDITOR

yang paling penting dalam membuat kalkulator ini adalah editor yang sudah terinstall di laptop anda, contoh editor

Yang umum dan sering  digunakan adalah seperti editor diatas sublime text, dreamweaver dan notepad++. tapi kali ini saya akan menggunakan sublime text, kenapa saya menggunakan sublime text karna menurut saya sangat membuantu penulisan lebih cepat dan mudah.

BROWSER

ini tidak kalah penting dalam membuat kalkulator menggunakan javascript yaitu browser karna browser ini untuk menampilkan hasil dari kodingan atau dari isi didalam editor, contoh browser

Diatas adalah contoh gambar browser pasti kalian juga sudah tau dan sudah umum dikalangan masyarakat. explore, mozila, chrom, safari dan opera tapi saya menggunakan chrom kenapa saya menggunakan chrom ga kenapa- kenapa sih hehe semua browser sama saja fungsinya untuk  menampilkan.

Dan bila semua sudah terinstall ini adalah kodingan yang sudah saya buat dan tinggal kalian copy untuk kebutuhan anda masing-masing

<html>
<title> Tugas Pembuatan Project </title>

<head>

<SCRIPT LANGUAGE=”JavaScript”>
function tambah()
{
a=eval(form.a.value)
b=eval(form.b.value)
c=a+b
form.hasil.value = c
}
function kurang()
{
a=eval(form.a.value)
b=eval(form.b.value)
c=a-b
form.hasil.value=c
}
function kali()
{
a=eval(form.a.value)
b=eval(form.b.value)
c=a*b
form.hasil.value=c
}
function bagi()
{
a=eval(form.a.value)
b=eval(form.b.value)
c=a/b
form.hasil.value = c
}
function pangkat()
{
a=eval(form.a.value)
b=eval(form.b.value)
c=Math.pow(a, b)
form.hasil.value = c
}
function kosong()
{
form.a.focus()
form.a.value=””
form.b.value=””
form.hasil.value=””
}

</SCRIPT>
</head>
<body onload=kosong() background-color=”blue”>
<CENTER>
<font size=”6″>Tugas Pembuatan Project </font>
<div class=”container”>
<div class=”panel panel-default”>
<div class=”panel-heading”>Simple Calculator</div>
<div class=”panel-body”>
<FORM name=”form”>

<div class=”form-inline” role=”form”>
<label for=”angka1″>Angka 1 </label>
<input type=”text” name=”a” class=”form-control”></br>

</div>
<div class=”form-inline” role=”form”>
<label for=”angka1″>Angka 2 </label>
<input type=”text” name=”b” class=”form-control”></br>

</div><br>
<div class=”form-inline” role=”form”>
Hasil <input type “text” name=”hasil” disabled=”true” class=”form-control”></br></br>
</div>

<input type=”button” class=”btn btn-info” value=” + ” onClick=”tambah()”>
<input type=”button” class=”btn btn-info” value=” – ” onClick=”kurang()”>
<input type=”button” class=”btn btn-info” value=” x ” onClick=”kali()”>
<input type=”button” class=”btn btn-info” value=” / ” onClick=”bagi()”>
<input type=”button” class=”btn btn-info” value=” ^ ” onClick=”pangkat()”>
<input type=”button” class=”btn btn-danger” value=” Hapus ” onClick=”kosong()”>

<br>

</FORM>
</div>
</div>
</div>

</CENTER>
<pre>
<p align=”center”>Creat By Dian Triyanjaya</p>
</pre>

</body>
</html>

Maka hasilnya akan seperti ini

tamiplan ini masih biasa dan bila anda ingin memperindah tinggal tambahakan script css ini

<link rel=”stylesheet” href=”http://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css”>
<script src=”https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js”></script>
<script src=”http://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.min.js”></script>

Sebelum mengguakan scrpit css

dan tingggal anda tambahkan script css yang sudah saya berikan tadi seperti dibawah ini

maka hasilnya akan seperti ini

taraaaa….

selesai kini anda sudah bisa mengoperasikannya selamat mencoba dan terimakasih sudah melihat artikel saya..

 

 

 

 

Leave a Reply

You must be logged in to post a comment.