Membuat kalkulator sederhana dengan Javascript

Membuat kalkulator sederhana dengan Javascript

Hay sobat kak dolop bertemu lagi nih hehe, oke pada artikel kali ini kita akan belajar bagaimana cara membuat kalkulator sederhana dengan javascript. Oke gak perlu lama-lama kita langsung saja ke intinya Yang pertama silahkan sobat membuat file baru, beri nama index.html . Kemudian sobat pastekan kode dibawah ini ke file index.html tersebut.

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<link href="style.css" rel="stylesheet" type="text/css">
</head>
<body>
<div id="wrapper">
<div id="header">
</div>
<div id="isi">
<form name="formkalkulator">
<table>
<tbody>
<tr>
<td><input name="angka1" type="text" placeholder="Angka 1" /></td>
</tr>
<tr>
<td><input name="angka2" type="text" placeholder="Angka 2" /></td>
</tr>
<tr>
<td><input name="hasil" type="text" placeholder="Hasil" /></td>
</tr>
</tbody>
</table>
</form>
<!-- onclick aksi atau event ketika tombol button di klik , kemudian memanggil fungsi yang sudah kita buat -->
<button onclick="penjumlahan();"> + </button>
<button onclick="pengurangan();"> – </button>
<button onclick="perkalian();"> * </button>
<button onclick="pembagian();"> / </button>
</div>
</div>
<script>
// membuat fungsi penjumlahan
function penjumlahan(){
// parseFloat / parseInt untuk konversi tipe data dari string ke decimal atau bulat
var angka1 = parseFloat(document.formkalkulator.angka1.value); // mengambil nilai dari textbox 1
var angka2 = parseFloat(document.formkalkulator.angka2.value); // menngmbil nilai dari textbox 2
var hasil = angka1 + angka2; // menjumlahkan nilai dari textbox 1 dan textbox 2
document.formkalkulator.hasil.value = hasil; //menampilkan hasil penjumlahan tersebut di textbox 3
}
// membuat fungsi pengurangan
function pengurangan(){
var angka1 = parseFloat(document.formkalkulator.angka1.value);
var angka2 = parseFloat(document.formkalkulator.angka2.value);
var hasil = angka1 - angka2;
document.formkalkulator.hasil.value = hasil;
}
//membuat fungsi perkalian
function perkalian(){
var angka1 = parseFloat(document.formkalkulator.angka1.value);
var angka2 = parseFloat(document.formkalkulator.angka2.value);
var hasil = angka1 * angka2;
document.formkalkulator.hasil.value = hasil;
} //membuat fungsi pembagian
function pembagian(){
var angka1 = parseFloat(document.formkalkulator.angka1.value);
var angka2 = parseFloat(document.formkalkulator.angka2.value);
var hasil = angka1 / angka2;
document.formkalkulator.hasil.value = hasil;
} </script>
</body>
</html>
Kemudian save lalu reload dan buka browser anda dan lihat jika berhasil maka akan tampil seperti ini:

membuat kalkulator dengan javascript

Nah silahkan sobat coba masukkan angka terserah lalu klik tombol tambah, kurang, kali, ataupun bagi jika berhasil maka akan sesuai dengan hasil yang kita pilih :D. Nah tapi coba lihat tampilan kalkulator masih jelek sekali kan :v, ya karena kita belum menambahkan css. untuk itu silahkan buat satu file lagi kemudian beri nama style.css lalu copy kode dibawah ini.

#wrapper{
margin: 100px auto;
width: 560px;
background-color: #3FF04B;
}
#header{
text-align: center;
background-color: #5EA5DB;
padding: 1px;
color: white;
font-weight: bold;
}
#isi{
padding: 20px;
margin-left: 100px;
}
#isi input{
width: 250px;
height: 30px;
}
#isi button{
padding: 10px;
width: 60px;
border: none;
margin-top: 5px;
font-weight: bold;
font-size: 20px;
background-color: rgba(219 , 18, 80, 0.8);
}
#isi button:hover{
background-color: rgb(219 , 18, 80);
cursor: pointer;
}

Dan jika berhasil maka tampilan kalkulator sederhana pun akan semakin cantik seperti ini:
membuat kalkulator dengan javascript

Untuk penjelasannya sendiri sudah saya tulis di dalam source kode tersebut.
Download full source codenya disini [klik disini] .

Related Posts:

0 Response to "Membuat kalkulator sederhana dengan Javascript"

Post a Comment

1. Dilarang menggunakan kata-kata kasar atau pornografi.
2. Dilarang menggunakan live link ataupun link biasa.
3. Berkomentarlah dengan komentar yang relevan