√ HTML - Membuat Kalkulator Sederhana Menggunakan HTML dan CSS di Notepad 2023

byDzikri Adi S.
0
Pendahuluan
Melakukan desain menggunakan HTML dan CSS merupakan hal yang menyenangkan bagi orang yang menyukai pemrograman berbasis web. Setiap saat selalu saja ada hal baru yang dapat kita pelajari dari HTML dan CSS.

 Walaupun kini banyak orang sudah dimudahkan dalam mendesain suatu web hanya bermodalkan framework seperti Bootstrap, Code Igniter, Laravel dan masih banyak lagi.

 Setidaknya jika mempelajari dasar-dasar html dan css tanpa framework, kita mengetahui bagaimana alur kerja dari setiap kode yang ada. Jangan sampai terjadi, kita hanya bisa mengandalkan framework tanpa bisa membuat html statisnya.

Program Kalkulator Sederhana HTML & CSS


buat kalkulator html sederhana

Cukup menggunakan HTML dan sedikit bumbu CSS kita bisa membuat kalkulator dengan tampilan yang menarik. Semua fungsi yang ada dalam kalkulator berdasarkan kalkulator dasar, terdapat beberapa operasi dasar berupa penjumlahan, pengurangan, perkalian dan pembagian serta Clear.

 Kalau sudah bisa membuat kalkulator ini, bisa dibilang kita sudah mencoba membuat aplikasi berbasis web.

Membuat Desain Bentuk Kalkulator menggunakan HTML & CSS

$ads={2}

Nah dibagian inti ini saya akan memberikan bagaimana caranya membuat suatu kalkulator menggunakan HTML dan CSS. Program ini hanya berisi 1 file saja karena CSS yang digunakan merupakan CSS internal, sehingga CSS terletak didalam kode HTML itu sendiri.

 1. Buka Notepad, Lalu Copy Kode dibawah ke Notepad.
<html> 
   <head> 
      <script> 
         function dis(val) 
         { 
             document.getElementById("result").value+=val 
         } 
         function solve() 
         { 
             let x = document.getElementById("result").value 
             let y = eval(x) 
             document.getElementById("result").value = y 
         } 
         function clr() 
         { 
             document.getElementById("result").value = "" 
         } 
      </script> 
      <!-- Style Kalkulator -->
      <style>
         table{

        border-radius: 2%;
        box-shadow: 0px 6px 12px #000;
         }
         tr{
        border-radius: 7%;
         }
         td{
            width: 60px;
        border-radius: 7%;
            font-family: Verdana, Geneva, Tahoma, sans-serif; 
            font-size: 20px;
            color: aliceblue;
            font-weight: bold;
         }
  
         input[type="button"] 
         { 
         height: 50px;
         background-color:rgb(23, 167, 23);
         color: white;
         font-weight: bold;
         font-size: 22px;
         width:100% 
         } 
         .title{ 
         margin-bottom: 10px;
         height: 70px; 
         text-align:center; 
       border-radius: 2%;
         background-color:rgb(23, 167, 23); 
         width: 210px; 
         color:white; 
         } 
         input[type="text"] 
         { 
         font-size: 22px;
       border-radius: 7%;
         background-color:white; 
         height: 50px;
         width:100% 
         }
         input[type="button"].ekor{
         background-color:rgb(218, 23, 23); 
         }
         input[type="button"].kode{
         background-color:rgb(243, 170, 13); 
         }
         
      </style> 
   </head> 
   <body bgcolor="grey"> 
      <table align="center"  border="5" width="330px"> 
         <tr>
            <td colspan="4" class="title">Ekorkode Kalkulator</td>
         </tr>
         <tr> 
            <td colspan="3"><input type="text" id="result"/></td> 
            <td><input class="ekor" type="button" value="C" onclick="clr()"/> </td> 
         </tr> 
         <tr> 
            <td><input type="button" value="1" onclick="dis('1')"/> </td> 
            <td><input type="button" value="2" onclick="dis('2')"/> </td> 
            <td><input type="button" value="3" onclick="dis('3')"/> </td>
            <td><input class="kode" type="button" value="+" onclick="dis('+')"/> </td> 
         </tr> 
         <tr> 
            <td><input type="button" value="4" onclick="dis('4')"/> </td> 
            <td><input type="button" value="5" onclick="dis('5')"/> </td> 
            <td><input type="button" value="6" onclick="dis('6')"/> </td> 
            <td><input class="kode" type="button" value="-" onclick="dis('-')"/> </td> 
         </tr> 
         <tr> 
            <td><input type="button" value="7" onclick="dis('7')"/> </td> 
            <td><input type="button" value="8" onclick="dis('8')"/> </td> 
            <td><input type="button" value="9" onclick="dis('9')"/> </td> 
            <td><input class="kode" type="button" value="/" onclick="dis('/')"/> </td>  
         </tr> 
         <tr> 
            <td><input type="button" value="." onclick="dis('.')"/> </td> 
            <td><input type="button" value="0" onclick="dis('0')"/> </td>
            <td><input class="ekor" type="button" value="=" onclick="solve()"/> </td> 
            <td><input class="kode" type="button" value="x" onclick="dis('*')"/> </td> 
         </tr> 
      </table> 
   </body> 
</html>
2. Simpan dengan nama misal kalkulator.html, ubah .txt jadi All Files.
kalkulator sederhana html & css

 3. Terakhir, Silahkan buka file yang sudah kita buat.

 Sekarang waktunya mencoba kalkulatornya, apakah ada error yang terjadi, atau mungkin ada logika yang tidak jelas?. Nah kalau ingin mencobanya terlebih dahulu bisa kalian coba dibawah ini bentuknya.

Kalkulator Online

Berikut ini adalah hasil kode yang saya berikan diatas. Karena Blog ini menggunakan HTML tentu saya bisa menyisipkan program kalkulator didalam postingan hehe.
Ekorkode Kalkulator


Penutup
Bagaimana mantap bukan kalkulatornya, silahkan otak-atik source code yang saya berikan sesuai kreasi kalian masing-masing. Setiap program yang dibuat harus memenuhi kriteria supaya dapat digunakan dengan nyaman, seperti halnya program kalkulator sederhana menggunakan HTML diatas yang simpel dan mudah dipahami.
Tags:
Posting Komentar (0)
Lebih baru Lebih lama