Cara Membuat Kalkulator Sederhana Menggunakan HTML dan CSS

Cara Membuat Kalkulator Sederhana Menggunakan HTML dan CSS
Daftar Isi Artikel
Membuat Kalkulator Sederhana
Cara Membuat Kalkulator Sederhana. Alat yang sering kita gunakan ini, dapat kita buat sendiri loh. Salah satunya dengan menggunakan HTML.

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 Sederhana dengan Notepad

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 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.
  1. Izoels notes

    Izoels notes

    8/22/2019

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

    • Nando Rifky

      Nando Rifky

      8/22/2019

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

  2. Menit info

    Menit info

    9/29/2019

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

  1. Untuk membuat judul komentar, gunakan <i rel="h2">Judul Komentar</i>
  2. Untuk membuat kotak catatan, <i rel="quote">catatan</i>
  3. Untuk membuat teks stabilo, <i rel="mark">mark</i>
  4. Untuk membuat teks mono, <i rel="kbd">kbd</i>
  5. Untuk membuat kode singkat, <i rel="code">shorcode</i>
  6. Untuk membuat kode panjang, <i rel="pre"><i rel="code">potongan kode</i></i>
  7. Untuk membuat teks tebal, <strong>tebal</strong> atau <b>tebal</b>
  8. Untuk membuat teks miring, <em>miring</em> atau <i>miring</i>

Baca Juga:

Baca Juga:


Konten Unggulan