Amazing Kalkulator dengan HTML5 dan CSS3

Publish Date : 11-03-2016 , dibaca 10889 kali, Hari ini dibaca : 1 kali ,0 comments

Pada Postingan Kali ini kita akan membuat Kalkulator dengan HTML5 , untuk membuat Kalkulator dengan HTML ini cukup simple, anda bisa langsung copy paste kode dibawah ini dalam text editor anda,

Dan Jangan Lupa Baca Juga artikel ini ya :

Demo Download

Index.html

<form Name="calc">
<table border=2 class="style">
<tr>
<td colspan=4><input type=text Name="display"></td>
</tr>
<tr>
<td><input type=button value="0" OnClick="calc.display.value+='0'"></td>
<td><input type=button value="1" OnClick="calc.display.value+='1'"></td>
<td><input type=button value="2" OnClick="calc.display.value+='2'"></td>
<td><input type=button value="+" OnClick="calc.display.value+='+'"></td>
</tr>
<tr>
<td><input type=button value="3" OnClick="calc.display.value+='3'"></td>
<td><input type=button value="4" OnClick="calc.display.value+='4'"></td>
<td><input type=button value="5" OnClick="calc.display.value+='5'"></td>
<td><input type=button value="-" OnClick="calc.display.value+='-'"></td>
</tr>
<tr>
<td><input type=button value="6" OnClick="calc.display.value+='6'"></td>
<td><input type=button value="7" OnClick="calc.display.value+='7'"></td>
<td><input type=button value="8" OnClick="calc.display.value+='8'"></td>
<td><input type=button value="x" OnClick="calc.display.value+='*'"></td>
</tr>
<tr>
<td><input type=button value="9" OnClick="calc.display.value+='9'"></td>
<td><input type=button value="C" OnClick="calc.display.value=''"></td>
<td><input type=button value="=" OnClick="calc.display.value=eval(calc.display.value)"></td>
<td><input type=button value="/" OnClick="calc.display.value+='/'"></td>
</tr>
</table>
</form>

Style.css

.color
{
    color:#ff6600;
    margin-left:40px;
    font-size:22px;
}
.style
{
    background-color: #333;
}
Input[type="button"]
{
    padding:10px 20px;
}
input[type="text"]
 {
    padding:10px 2.5%;
    width:100%;
    font-size:20px;
}