Hello again

Today i am gonna show you how to make an html calculator

Here is the code:

Code:

<FORM name="Keypad" action="">
<TABLE>
<B>
<TABLE border=2 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>
</TABLE>
</B>
</FORM>
</CENTER>
<font face="Verdana, Arial, Helvetica" size=2>
<SCRIPT LANGUAGE="JavaScript">
<!-- Begin
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>

Now lets see some parts of that code and what they mean:

Code:

<TABLE border=2 width=50 height=60 cellpadding=1 cellspacing=5>

this code defines the border of the table where the calculator is placed.We can change the width,the height,the border and the padding and spacing of the cells

Code:

<input name="btnClear" type="Button" value="  C  " onclick="Clear()">

That is the "C" button we can see at all calculators.That is just a button with the action of "clear".That button is also used at contact forms.

Code:

<input name="btnSeven" type="Button" value="  7  " onclick="NumPressed(7)">

That code is also just a button with the value of 7.When we click on the button the number 7 appears

Code:

<input name="btnEight" type="Button" value="  8  " onclick="NumPressed(8)">

The same thing happens at all the other 8 buttons .

Code:

input name="btnNeg" type="Button" value=" +/- " onclick="Neg()">

That button has the value of the + and - actions.

Code:

<input name="btnPercent" type="Button" value="  % " onclick="Percent()">

This button has the value of the percent action.

Code:

<TD align=middle><input name="btnPlus" type="Button" value="  +  " onclick="Operation('+')">

The button of the plus action

Code:

<TD align=middle><input name="btnMinus" type="Button" value="  -  " onclick="Operation('-')">

And the button of the reduce action

Code:

<TD align=middle><input name="btnMultiply" type="Button" value="  *  " onclick="Operation('*')">

The multipliation button

Code:

<TD align=middle><input name="btnDivide" type="Button" value="  /  " onclick="Operation('/')">

The button with the division value

the other buttons are the same thing,just different value.you can understand them easily

[

Nice tutorial.

Did you wrote this code, Nick? or you got it from somewhere?

I took it from somewhere(there many codes about a calculator )
However its not something special,just a button set with a texarea

Cool-Processor wrote:I took it from somewhere

If it is not your own written, we can't accept it, sorry.

Cool-Processor wrote:However its not something special,just a button set with a texarea

It is not so simple as it seems. Adding functions to buttons using JS is difficult. Look at the javascript in your code

And there is no textarea field

why you cant accept it?oooooooooh shame...

The tut could be a lot better if you explain how it is programmed using JS. You have just explained about the HTML part.

Alright i will give it a try.

No inputs since long back, so I think I should lock this topic now.

Nick, if you want to add further parts to this tutorial, inform me via PM and I'll reopen this topic

Tutorial Rejected