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
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.
