contact
WA: 0822-8846-7823
SMS: 0822-8846-7823
Call: 0822-8846-7823
BBM: D7DB3491
ebsofmail@gmail.com

Amazing Kalkulator dengan HTML5 dan CSS3

Posted in HTML & CSS Life at 11 Maret 2016 With 0 Comments

Cara Membuat kalkulator dengan HTML5

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,

▼ Download Source Code Dibawah Ini ▼


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;
}

Copy Paste Code diatas, dan Kemudian Jalankan, Untuk Mlihat Contoh Kalkulator Dengan HTML5 ini , anda bisa lihat dibawah in :

Demo Download

Artikel Terkait

Diskusi