Home
JavaScript

Cara Membuat Kalkulator Sederhana dengan JavaScript

Sebenarnya postingan kali ini ada hubungannya dengan tugas kuliah yang saya miliki yakni dalam kuliah pemrograman web. 

Berhubung ada kesempatan saya pengen share ke sobat tentang bagaimana sih cara membuat sebuah kalkulator sederhana dengan menggunakan JavaScript.

Berikut ini adalah source code programnya:
<html> 
<head> 
<style> 
    body { 
        font-family: poppins; 
    } 

    input[type=button] { 
        width: 40px; 
        padding: 5px 10px; 
    } 

    input[type=text] { 
        padding: 5px 3px; 
    } 

    table { 
        text-align: center; 
    } 

    table td { 
        border: none 
    } 
</style> 

</head> 

<body> 
    <center> 
        <h1>KALKULATOR</h1> 

        <form name="Calc"> 
            <table border=1;> 
                <tr> 
                    <td colspan="4"><input type="text" name="Input" readonly=""></td> 
                </tr> 
                <tr>
                    <td><input type="button" name="one" value="1" OnClick="Calc.Input.value += '1'"></td> 
                    <td><input type="button" name="two" value="2" OnClick="Calc.Input.value += '2'"></td> 
                    <td><input type="button" name="three" value="3" OnClick="Calc.Input.value += '3'"></td> 
                    <td><input type="button" name="plus" value="+" OnClick="Calc.Input.value += '+'"></td> 
                </tr> 
                <tr> 
                    <td><input type="button" name="four" value="4" OnClick="Calc.Input.value += '4'"></td> 
                    <td><input type="button" name="five" value="5" OnClick="Calc.Input.value += '5'"></td> 
                    <td><input type="button" name="six" value="6" OnClick="Calc.Input.value += '6'"></td> 
                    <td><input type="button" name="minus" value="-" OnClick="Calc.Input.value += '-'"></td> 
                </tr> 
                <tr> 
                    <td><input type="button" name="seven" value="7" OnClick="Calc.Input.value += '7'"></td> 
                    <td><input type="button" name="eight" value="8" OnClick="Calc.Input.value += '8'"></td> 
                    <td><input type="button" name="nine" value="9" OnClick="Calc.Input.value += '9'"></td> 
                    <td><input type="button" name="div" value="/" OnClick="Calc.Input.value += '/'"></td> 
                </tr> 
                <tr> 
                    <td><input type="button" name="zero" value="0" OnClick="Calc.Input.value += '0'"></td> 
                    <td><input type="button" name="DoIt" value="=" OnClick="Calc.Input.value = eval(Calc.Input.value)"></td> 
                    <td><input type="button" name="clear" value="C" OnClick="Calc.Input.value = ''"></td> 
                    <td><input type="button" name="times" value="*" OnClick="Calc.Input.value += '*'"></td> 
                </tr> 
            </table> 
        </form> 
        <h5>Visit: junedalbughisy.blogspot.com</h5> 
    </center> 
</body> 

</html>

Untuk demonya silahkan nonton video yang telah saya buat di youtube di bawah ini.

Selamat mencoba dan selamat belajar :)

4 comments

  1. Ada gak yang gak pake fungsi eval gan...??
  2. @Salman Alfarisy Ada v belum saya posting gan hehehe
  3. Makasih sob, kebetulan saya lagi belajar javascript
    • Ok Sama-sama sob
  1. Komentar ini, diurutkan dari yang terlama
  2. Tinggalkan komentar sesuai topik tulisan
  3. Apabila ada pertanyaan diluar artikel silahkan kunjungi Out off topic
  4. Centang Beri tahu saya untuk mendapatkan notifikasi via Email ketika ada balasan
  5. Untuk menghapus komentar, hanya dapat dilakukan oleh admin.
Masukkan URL Gambar atau Potongan Kode, atau Quote, lalu klik tombol yang kamu inginkan untuk di-parse. Salin hasil parse lalu paste ke kolom komentar.