Apr 052013
 

Tutorial Jquery Bagian 2 (Mini Calculator/Kalkulator)

Assalamu’ alaikum wr wb

Pada Tutorial sebelumnya Tutorial Jquery Bagian 1 (Mini Kalkulator) , Kita sudah belajar bagaimana membuat perhitungan sederhana dengan memanfaatkan JQuery dan javascript. Kita akan membuat kalkulator/Calculator seperti pada gambar di bawah ini:

kalkulator-1

Yang pertama kita lakukan adalah membuat desain tampilan seperti diatas. tulis script di bawah dalam tag body.

<div align="center">
 <table border="1">
 <tr>
 <td colspan="4"><input readOnly type="text" class="txtHasil" id="txtHasil" value="" /></td>
 </tr>
 <tr>
 <td> <input type="button" value="0" /> </td>
 <td> <input type="button" value="1" /> </td>
 <td> <input type="button" value="2" /> </td>
 <td> <input type="button" value="+" /> </td>
 </tr>
 <tr>
 <td> <input type="button" value="3" /> </td>
 <td> <input type="button" value="4" /> </td>
 <td> <input type="button" value="5" /> </td>
 <td> <input type="button" value="-" /> </td>
 </tr>
 <tr>
 <td> <input type="button" value="6" /> </td>
 <td> <input type="button" value="7" /> </td>
 <td> <input type="button" value="8" /> </td>
 <td> <input type="button" value="*" /> </td>
 </tr>
 <tr>
 <td> <input type="button" value="9" /> </td>
 <td> <input type="button" value="C" /> </td>
 <td> <input type="button" value="=" /> </td>
 <td> <input type="button" value="/" /> </td>
 </tr>
 </table>
</div>

Kode di atas akan menghasilkan tampilan untuk kalkulator kita, sekarang tinggal kita buat script jquery dan css nya, berikut adalah css desainnya. tulis script di blok tag head.

<style type="text/css">
 input.txtHasil{
 height: 40px;
 width: 100%;
 text-align: right;
 background-color: black;
 font-style: bold;
 color: white;
 font-size: 15px;
 }
 input[type=button]{
 height: 40px;
 width: 40px;
 font-size: 20px;
 }
</style>

Jangan lupa masukkan jquery dalam program kita.

<script type="text/javascript" src="jquery-1.8.2.js"></script>

Yang terakhir adalah source code untuk melakukan proses perhitungan , tulis di bawah load jQuery nya.

<script type="text/javascript">
 $(document).ready(function(){
 $('input[type=button]').click(function(){
 if($(this).val()=='='){
$('#txtHasil').val(eval($('#txtHasil').val()));
 }else if( $(this).val()=='C'){
 $('#txtHasil').val('');
 }else{
$('#txtHasil').val($('#txtHasil').val() + $(this).val());
 }
 });
 });
</script>

Oke selesai sudah program kita semoga dapat membantu.

Akirnya jadi sudah kalkulator kita

Wassalamu’ alaikum wr wb

Facebook Comments

  One Response to “Tutorial Jquery Bagian 2 (Mini Calculator/Kalkulator)”

  1. makasih gan tutorialnya.

 Leave a Reply

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code class="" title="" data-url=""> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong> <pre class="" title="" data-url=""> <span class="" title="" data-url="">

(required)

(required)