Hanya 5 Menit, Begini Cara Membuat Kalkulator Sederhana dengan Notepad

Membuat Kalkulator Sendiri
Renovasi Otak - Kalkulator? Ya benar, alat yang sering kita gunakan ini, dapat kita buat sendiri loh. Salah satunya dengan menggunakan HTML. Apa itu HTML? Jika belum memahami itu, baca dulu artikel tentang Pengertian dan Basic HTML

Daftar Isi:

Lanjut ke pembahasan utama, pada kesempatan kali ini admin akan membagikan cara membuat kalkulator dengan HTML. Tidak hanya itu saja, kali ini kita akan memadukan HTML dengan CSS dan JavaScript.

Dengan begitu kita bisa membuat kalkulator simple dengan tampilan yang elegan. Pastinya, tersebut akan menambah wawasan kita tentang dunia pemrogramman.

Mengapa Menggunakan HTML CSS dan JavaScript

Seperti yang kita ketahui, HTML akan kita gunakan untuk menampilkan kalkulator tersebut. CSS akan kita gunakan untuk mendesign tampilan dari kalkulator tersebut agar lebih elegan dan enak dilihat. JavaScript akan kita gunakan sebagai fungsi.

BACA JUGA: Cara Setting MikroTik di Android

Cara Membuat Kalkulator Sendiri dengan HTML CSS dan JavaScript.

Kita dapat memanfaatkan notepad untuk membuat kalkulator sederhana ini. Oke, langsung saja.

Untuk JavaScript perhatikan kode beikut:
function insert(num){
      document.form.textview.value = document.form.textview.value+num;
}
function equal(){
      var exp = document.form.textview.value;
      if(exp){
              document.form.textview.value = eval(exp)
}
}
function clean(){
      document.form.textview.value = "";
}
function back(){
      var exp = document.form.textview.value;
      document.form.textview.value = exp.substring(0,exp.length-1);
}

Kita bisa mempercantik tampilan kalkulator tersebut dengan menggunakan kode CSS berikut:
*{
 margin: 0%;
 padding: 0%;
}
.button{
       width:50;
       height:50;
       font-size:25;
       margin: 2;
       cursor: pointer;
       background: grey;
       border:none;
       color: white;
}
.textview{
         width:217;
         margin:5;
         font-size: 25;
         padding:5;
         border: none;
}
.main{
     position: absolute;
     top: 50%;
     left: 50%;
     transform: translateX(-50%) translateY(-50%);
}
.bg{
   background: linear-gradient(to right, rgb(17, 141, 212),rgb(20, 233, 169));
   height: 100%;
}
.button:active{
              background: rgb(54, 54, 54);
}

Langkah terakhir masukkan kode HTML berikut ini:
    <div class="bg"></div>
    <div class="main">
        <form name="form">
            <input class="textview" name="textview">
        </form>
        <table>
            <tr>
                <td><input class="button" type="button" value="C" onclick="clean()"></td>
                <td><input class="button" type="button" value="Del" onclick="back()"></td>
                <td><input class="button" type="button" value="/" onclick="insert('/')"></td>
                <td><input class="button" type="button" value="x" onclick="insert('*')"></td>
            </tr>
            <tr>
                <td><input class="button" type="button" value="7" onclick="insert(7)"></td>
                <td><input class="button" type="button" value="8" onclick="insert(8)"></td>
                <td><input class="button" type="button" value="9" onclick="insert(9)"></td>
                <td><input class="button" type="button" value="-" onclick="insert('-')"></td>
            </tr>
            <tr>
                <td><input class="button" type="button" value="4" onclick="insert(4)"></td>
                <td><input class="button" type="button" value="5" onclick="insert(5)"></td>
                <td><input class="button" type="button" value="6" onclick="insert(6)"></td>
                <td><input class="button" type="button" value="+" onclick="insert('+')"></td>
            </tr>
            <tr>
                <td><input class="button" type="button" value="1" onclick="insert(1)"></td>
                <td><input class="button" type="button" value="2" onclick="insert(2)"></td>
                <td><input class="button" type="button" value="3" onclick="insert(3)"></td>
                <td rowspan="5"><input class="button" type="button" style="height: 106" value="=" onclick="equal()"></td>
            </tr>
            <tr>
                <td colspan="2"><input class="button" type="button" style="width: 106" value="0" onclick="insert(0)"></td>
                <td><input class="button" type="button" value="." onclick="insert('.')"></td>
            </tr>
        </table>
    </div>

Jadi, kesuruhan dari kode diatas jika kita gabungkan akan seperti ini:
<html>
    <head>
        <title>Kalkulator - Renovasi Otak</title>
        <script>
            function insert(num){
                document.form.textview.value = document.form.textview.value+num;
            }
            function equal(){
                var exp = document.form.textview.value;
                if(exp){
                    document.form.textview.value = eval(exp)
                }
            }
            function clean(){
                document.form.textview.value = "";
            }
            function back(){
                var exp = document.form.textview.value;
                document.form.textview.value = exp.substring(0,exp.length-1);
            }
        </script>
        <style>
            *{
                margin: 0%;
                padding: 0%;
            }
            .button{
                width:50;
                height:50;
                font-size:25;
                margin: 2;
                cursor: pointer;
                background: grey;
                border:none;
                color: white;
            }
            .textview{
                width:217;
                margin:5;
                font-size: 25;
                padding:5;
                border: none;
            }
            .main{
                position: absolute;
                top: 50%;
                left: 50%;
                transform: translateX(-50%) translateY(-50%);
            }
            .bg{
                background: linear-gradient(to right, rgb(17, 141, 212),rgb(20, 233, 169));
                height: 100%;
            }
            .button:active{
                background: rgb(54, 54, 54);
            }
        </style>
    </head>
<body>
    <div class="bg"></div>
    <div class="main">
        <form name="form">
            <input class="textview" name="textview">
        </form>
        <table>
            <tr>
                <td><input class="button" type="button" value="C" onclick="clean()"></td>
                <td><input class="button" type="button" value="Del" onclick="back()"></td>
                <td><input class="button" type="button" value="/" onclick="insert('/')"></td>
                <td><input class="button" type="button" value="x" onclick="insert('*')"></td>
            </tr>
            <tr>
                <td><input class="button" type="button" value="7" onclick="insert(7)"></td>
                <td><input class="button" type="button" value="8" onclick="insert(8)"></td>
                <td><input class="button" type="button" value="9" onclick="insert(9)"></td>
                <td><input class="button" type="button" value="-" onclick="insert('-')"></td>
            </tr>
            <tr>
                <td><input class="button" type="button" value="4" onclick="insert(4)"></td>
                <td><input class="button" type="button" value="5" onclick="insert(5)"></td>
                <td><input class="button" type="button" value="6" onclick="insert(6)"></td>
                <td><input class="button" type="button" value="+" onclick="insert('+')"></td>
            </tr>
            <tr>
                <td><input class="button" type="button" value="1" onclick="insert(1)"></td>
                <td><input class="button" type="button" value="2" onclick="insert(2)"></td>
                <td><input class="button" type="button" value="3" onclick="insert(3)"></td>
                <td rowspan="5"><input class="button" type="button" style="height: 106" value="=" onclick="equal()"></td>
            </tr>
            <tr>
                <td colspan="2"><input class="button" type="button" style="width: 106" value="0" onclick="insert(0)"></td>
                <td><input class="button" type="button" value="." onclick="insert('.')"></td>
            </tr>
        </table>
    </div>
</body>
</html>

Hasilnya akan seperti ini
Membuat Kalkulator Keren dengan Notepad
Sertakan Sumber! Jika ingin memposting ulang.

Sangat menarik bukan? Cuma butuh waktu 5 menit anda sudah bisa membuat kalkulator sendiri dengan notepad. Semoga dengan ini wawasan kita bisa bertambah. Cukup sekian pembahasan kali ini, terimakasih.
Nando
Anda di sini hanya untuk persinggahan yang singkat. Jangan terburu, jangan khawatir. Yakinlah bahwa Anda menghirup wangi bunga sepanjang perjalanan.

Luangkan sedikit waktu Anda untuk membagikan "Hanya 5 Menit, Begini Cara Membuat Kalkulator Sederhana dengan Notepad" kepada teman-teman Anda. Hanya dengan menekan Tombol Sosial Media di bawah ini:

Related Posts

3 comments

  1. blog nya keren mas , cek blog saya juga sesama penggemar javascript, alexander-zulkarnain.blogspot.com

    ReplyDelete
    Replies
    1. Terimakasih sudah berkomentar dengan baik. Ikuti terus blog renovasi otak untuk mendapatkan artikel menarik lainnya.

      Delete
  2. Keren Gan, sederhana tapi klo bisa bikin senderi wah banget.

    ReplyDelete

Post a Comment

*Nyalakan/Centang Notify me untuk menerima notifikasi saat Admin membalas komentar Anda.

Berlangganan Gratis!

Daftarkan email anda untuk mendapatkan pemberitahuan setiap update artikel terbaru, dan jangan lupa untuk IKUTI Blog kami