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