Membuat Kalkulator dengan HTML | Tutorial 29

Membuat Kalkulator dengan HTML

Semalat malam sob , bagai mana kabar kalian semua, semoga saja kalian semua di beri kesehatan , nah pada kali ini saya akan memberi tahu cara bagaimana membuat sebuah kalkulator dengan html.
Ternyata kalkulator tidak hanya dalam pemrograman aplikasi saja dalam web juga bisa, tapi syntaxnya juga akan sedikit rumit karena ini harus menggunakan perhitungan , nah sekarang kita langsung saja ke syntaxnya .

<form name="Keypad" action="">

<table border=1 width=50 height=60 cellpadding=1 cellspacing=5>
<tr>
<td colspan=3 align=middle>
<input name="ReadOut" type="Text" size=24 value="0" width=100%>
</TD>
<TD
</TD>
<td>
<input name="btnClear" type="Button" value="  C  " onclick="Clear()">
</TD>
<td><input name="btnClearEntry" type="Button" value="  CE " onclick="ClearEntry()">
</TD>
</TR>
<tr>
<td>
<input name="btnSeven" type="Button" value="  7  " onclick="NumPressed(7)">
</TD>
<td>
<input name="btnEight" type="Button" value="  8  " onclick="NumPressed(8)">
</TD>
<td>
<input name="btnNine" type="Button" value="  9  " onclick="NumPressed(9)">
</TD>
<td>
</TD>
<td>
<input name="btnNeg" type="Button" value=" +/- " onclick="Neg()">
</TD>
<td>
<input name="btnPercent" type="Button" value="  % " onclick="Percent()">
</TD>
</TR>
<tr>
<td>
<input name="btnFour" type="Button" value="  4  " onclick="NumPressed(4)">
</TD>
<td>
<input name="btnFive" type="Button" value="  5  " onclick="NumPressed(5)">
</TD>
<td>
<input name="btnSix" type="Button" value="  6  " onclick="NumPressed(6)">
</TD>
<td>
</TD>
<td align=middle><input name="btnPlus" type="Button" value="  +  " onclick="Operation('+')">
</TD>
<td align=middle><input name="btnMinus" type="Button" value="   -   " onclick="Operation('-')">
</TD>
</TR>
<tr>
<td>
<input name="btnOne" type="Button" value="  1  " onclick="NumPressed(1)">
</TD>
<td>
<input name="btnTwo" type="Button" value="  2  " onclick="NumPressed(2)">
</TD>
<td>
<input name="btnThree" type="Button" value="  3  " onclick="NumPressed(3)">
</TD>
<td>
</TD>
<td align=middle><input name="btnMultiply" type="Button" value="  *  " onclick="Operation('*')">
</TD>
<td align=middle><input name="btnDivide" type="Button" value="   /   " onclick="Operation('/')">
</TD>
</TR>
<tr>
<td>
<input name="btnZero" type="Button" value="  0  " onclick="NumPressed(0)">
</TD>
<td>
<input name="btnDecimal" type="Button" value="   .  " onclick="Decimal()">
</TD>
<td colspan=3>
</TD>
<td>
<input name="btnEquals" type="Button" value="  =  " onclick="Operation('=')">
</TD>
</TR>
</TABLE>
</FORM>

<script>

var FKeyPad = document.Keypad;
var Accumulate = 0;
var FlagNewNum = false;
var PendingOp = "";
function NumPressed (Num) {
if (FlagNewNum) {
FKeyPad.ReadOut.value  = Num;
FlagNewNum = false;
   }
else {
if (FKeyPad.ReadOut.value == "0")
FKeyPad.ReadOut.value = Num;
else
FKeyPad.ReadOut.value += Num;
   }
}
function Operation (Op) {
var Readout = FKeyPad.ReadOut.value;
if (FlagNewNum && PendingOp != "=");
else
{
FlagNewNum = true;
if ( '+' == PendingOp )
Accumulate += parseFloat(Readout);
else if ( '-' == PendingOp )
Accumulate -= parseFloat(Readout);
else if ( '/' == PendingOp )
Accumulate /= parseFloat(Readout);
else if ( '*' == PendingOp )
Accumulate *= parseFloat(Readout);
else
Accumulate = parseFloat(Readout);
FKeyPad.ReadOut.value = Accumulate;
PendingOp = Op;
   }
}
function Decimal () {
var curReadOut = FKeyPad.ReadOut.value;
if (FlagNewNum) {
curReadOut = "0.";
FlagNewNum = false;
   }
else
{
if (curReadOut.indexOf(".") == -1)
curReadOut += ".";
   }
FKeyPad.ReadOut.value = curReadOut;
}
function ClearEntry () {
FKeyPad.ReadOut.value = "0";
FlagNewNum = true;
}
function Clear () {
Accumulate = 0;
PendingOp = "";
ClearEntry();
}
function Neg () {
FKeyPad.ReadOut.value = parseFloat(FKeyPad.ReadOut.value) * -1;
}
function Percent () {
FKeyPad.ReadOut.value = (parseFloat(FKeyPad.ReadOut.value) / 100) * parseFloat(Accumulate);
}

</script>

Dan syntax di atas akan menghasilkan seperti di bawah ini :

Bagaimana mudah ataukah sulit ? ya ini memang sedikit sulit karena sytaxnya tidak seperti syntax yang biasanya ini menggunakan if dan else . Bila sudah terbiasa pasti ini akan terasa mudah , ini sulit karena kita baru mencobanya .
Semoga Bermanfaat

Tidak ada komentar:

Posting Komentar

Langganan: Posting Komentar (Atom)