Membuat Aplikasi Kalkulator Dengan HTML

-



Halo teman-teman, kembali lagi di blog saya...

Kali ini saya akan memberikan penjelasan bagaimana caranya membuat suatu kalkulator menggunakan HTML dan CSS. 

  1. Hidupkan aplikasi XAMPP,  agar saat melihat hasil akhir nanti anda dapat terhubung ke website yang telah anda buat.
  2. Buka aplikasi notepad lalu pindahkan script berikut ke dalam notepad tersebut.
    • Script berikut berfungsi sebagai background dari kalkulator :

<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{
body{
	background: #F2F2F2;
	font-family: sans-serif;
}
 
.kalkulator{
	width: 335px;
	background: #2F495A;
	margin: 100px auto;
	padding: 10px 20px 50px 20px;
	border-radius: 5px;
	box-shadow: 0px 10px 20px 0px #D1D1D1;
}
 
.bil{
	width: 300px;
	margin: 5px;
	border: none;
	font-size: 16pt;
	border-radius: 5px;
	padding: 10px;	
}
 
.opt{
	font-size: 16pt;
	border: none;
	width: 215px;
	margin: 5px;
	border-radius: 5px;
	padding: 10px;
}
 
.tombol{
	background: #EC5159;
	border-top: none;
	border-right: none;
	border-left: none;
	border-radius: 5px;
	padding: 10px 20px;
	color: #eee;
	font-size: 15pt;
	border-bottom:4px solid #BF3D3D;
}
 
.brand{
	color: #eee;
	font-size: 11pt;
	float: right;
	text-decoration: none;
	margin: 12px;
}
 
.judul{
	text-align: center;
	color: #eee;
	font-weight: normal;
}
         
      </style> 
   </head>

Script diatas berfungsi untuk membuat background agar tampilan kalkulator web nanti dapat lebih menarik untuk dilihat.
    • Gunakan script berikut untuk membuat kalkulator nya.
    <body bgcolor="grey"> 
      <table align="center"  border="5" width="330px"> 
         <tr>
            <td colspan="4" class="title">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>

3. Simpan script-script tersebut kedalam sebuah folder dengan nama apa saja. Kemudian simpan file         script nya dengan nama kalkulator.php lalu ubah .txt menjadi  All files.

4. Setelah file disimpan, carilah hasil yang sudah anda buat tadi di web pencarian seperti chrome                 dengan mengetikkan localhost/namafolder/kalkulator.php .

5. Setelah anda browse, cek lah apakah sudah sesuai dan benar. Jika masih terdapat kesalahan di                 website tersebut, periksa kembali script anda di line yang dikatakan kesalahannya. Setelah anda             yakin sudah benar, reload kembali website kalkulator anda tadi.

    Mungkin hanya ini saja yang dapat saya jelaskan semoga bermanfaat bagi teman-teman sekalian, jika kurang jelas mohon dimaklumi karena saya juga masih belajar. Jika ingin penjelasan lebih rinci, anda dapat melihat tutorial di youtube ataupun sosial media lain. Dan jika ada kritik maupun saran akan sangat berarti untuk saya maupun kemajuan blog ini.

"Gunakanlah kemajuan teknologi saat ini untuk belajar. Tak ada yang tak mungkin bagi anda jika anda memiliki kemauan untuk lebih maju, seperti kata pepatah, dimana ada kemauan disitu ada jalan." 

Terima kasih sudah mengunjungi blog saya, sampai jumpa di blog berikutnya :)

Komentar

Posting Komentar