Membuat Kalkulator Online Sederhana Menggunakan JQuery

31 August 2020
Membuat Kalkulator Online Sederhana Menggunakan JQuery

Membuat Kalkulator Online Sederhana Menggunakan JQuery. 

Sebelumnya kami mengucapkan terima kasih kepada para pengunjung teknologi[dot]visitklaten[dot]com yang telah meluangkan waktunya untuk mengunjungi website kami yang masih banyak kekurangan ini.

Kami menerima segala masukkan dan kritikan agar web dan diri kami menjadi lebih baik lagi. Semoga para pengunjung tidak jenuh mengunjungin website kami ini.

Seperti judulnya, dalam kesempatan kali ini kami akan berbagi cara membuat kalkulator online sederhana menggunakan Jquery di wordpress. Kalkulator ini online jadi bisa langsung diisi dan akan keluar hasilnya.

Dan mengapa menggunakan Jquery?. Karena nanti hasilnya bisa langsung keluar tanpa perlu proses reload halaman dan hasilnya bisa langsung bisa dilihat. Sehingga ringan dan fleksible.

Fitur kalkulator ini sangat sederhana dan baru dasar tapi selanjutnya bisa dikombinasikan menjadi lebih komplek untuk perhitungan belanja, laporan keuangan, perhitungan kredit, dll.

Yuk langsung saja berikut Cara Membuat Kalkulator Online Sederhana Menggunakan JQuery tanpa plugin.

 

Membuat Kalkulator Online Versi 1

Dalam versi ini hasil tidak bisa langsung proses atau terlihat namun harus mengklik tombol terlebih dulu baru hasilnya akan terlihat.

Pertama, kita buat dulu form,nya dan bisa melihat contoh dibawah ini.

<form>
<div class="row m-0 align-items-center">    
  <div class="form-group col-sm-3 p-1">
    <input type="number" class="form-control" id="number1" placeholder="Masukkan Angka">
  </div>
  <div class="form-group col-sm-1 p-1 text-center">
      <select id="pilihan">
          <option value="+">+</option>
          <option value="-">-</option>
          <option value="x">x</option>
          <option value="/">:</option>
      </select>
  </div>
  <div class="form-group col-sm-3 p-1">
    <input type="number" class="form-control" id="number2" placeholder="Masukkan Angka">
  </div>
<div class="form-group col-sm-1 p-1 text-center">
<div class="btn btn-primary pointer" onclick="kalkulator()">=</div>
</div>
  <div class="form-group col-sm-4 p-1">
    <input type="number" class="form-control" id="total" value="total" placeholder="Hasil" readonly>
  </div>
</div>  
</form>

 

Kedua, kita buat javascriptnya dan sobat bisa melihat contohnya dibawah ini

function kalkulator() {
	var number1 = parseInt(document.getElementById("number1").value);

	var number2 = parseInt(document.getElementById("number2").value);

	var pilihan = document.getElementById("pilihan").value;

	var hasil = document.getElementById("total");

	var total;

if(isNaN(number1) || isNaN(number2)) {
	alert('isi form dengan angka!')
		
} else {

if(pilihan=="+") {
	total = number1+number2;
}
else if(pilihan=="-") {
	total = number1-number2;
}
else if(pilihan=="x") {
	total = number1*number2;
}
else {
	total = number1/number2;
}
}

hasil.value = total;
}

 

Untuk tampilan versi 1 bisa dilihat dibawah ini

Silakan isi field yang telah disediakan kemudian klik tombol “=” untuk melihat hasilnya

=

 

Kalkulator Sederhana Versi 2

Dalam versi ini hasil  bisa langsung proses atau terlihat tanpa perlu mengklik tombol. Tinggal mengganti angkanya atau pilihannya yang berupa penjumlahan, pengurangan, perkalian, atau pembagian.

Pertama, kita buat dulu form,nya dan bisa melihat contoh dibawah ini.

<form>
<div class="row m-0 align-items-center">    
  <div class="form-group col-sm-3 p-1">
    <input type="number" class="form-control" id="ynumber1" placeholder="Masukkan Angka">
  </div>
  <div class="form-group col-sm-1 p-1 text-center">
      <select id="opsi">
          <option value="+">+</option>
          <option value="-">-</option>
          <option value="x">x</option>
          <option value="/">:</option>
      </select>
  </div>
  <div class="form-group col-sm-3 p-1">
    <input type="number" class="form-control" id="ynumber2" placeholder="Masukkan Angka">
  </div>
<div class="form-group col-sm-1 p-1 text-center">=</div>
  <div class="form-group col-sm-4 p-1">
    <input type="number" class="form-control" id="ytotal" value="ytotal" placeholder="Hasil" readonly>
  </div>
</div>  
</form>

 

Kedua, kita buat javascriptnya dan sobat bisa melihat contohnya dibawah ini

jQuery(document).ready(function($){
$('#ynumber1').on('keyup',function(){
 var ynumber1 = parseInt($(this).val());
 var ynumber2 = parseInt($('#ynumber2').val());
 var opsi = $('#opsi').val();

if(opsi=="+") {
	total = ynumber1+ynumber2;
}
else if(opsi=="-") {
	total = ynumber1-ynumber2;
}
else if(opsi=="x") {
	total = ynumber1*ynumber2;
}
else {
	total = ynumber1/ynumber2;
}

 $("#ytotal").val(total);
});

$('#ynumber2').on('keyup',function(){
 var ynumber1 = parseInt($('#ynumber1').val());
 var ynumber2 = parseInt($(this).val());
 var opsi = $('#opsi').val();

if(opsi=="+") {
	total = ynumber1+ynumber2;
}
else if(opsi=="-") {
	total = ynumber1-ynumber2;
}
else if(opsi=="x") {
	total = ynumber1*ynumber2;
}
else {
	total = ynumber1/ynumber2;
}

 $("#ytotal").val(total);
});

$('#opsi').on('change',function(){
 var ynumber1 = parseInt($('#ynumber1').val());
 var ynumber2 = parseInt($('#ynumber2').val());
 var opsi = $(this).val();
if(opsi=="+") {
	total = ynumber1+ynumber2;
}
else if(opsi=="-") {
	total = ynumber1-ynumber2;
}
else if(opsi=="x") {
	total = ynumber1*ynumber2;
}
else {
	total = ynumber1/ynumber2;
}

 $("#ytotal").val(total);
});

});

 

Untuk tampilan versi 2 bisa dilihat dibawah ini

Silakan isi atau pilih field yang telah disediakan.

=

 

Terima kasih telah mengunjungi website kami.

Share jika bermanfaat, jika ada kritik, tambahan, pertanyaan atau saran silakan hubungi kami atau silakan isi di kolom komentar.

Postingan Terkait

Komentar

Leave a Comment

Your email address will not be published. Required fields are marked *

This site is protected by reCAPTCHA and the Google Privacy Policy and Terms of Service apply.

Scroll to Top