Advanced Calculator

This is a very nice JavaScript calculator program to demonstrate simple operations such as addition, multiplication and division. Although the source code can get quite confusing, it works.

<!-- ONE STEP TO INSTALL ADVANCED CALCULATOR:
 
   1.  Paste the coding into the BODY of your HTML document  -->
 
<!-- STEP ONE: Copy this code into the BODY of your HTML document  -->
 
<form name="Keypad" action="">
 
<!--  Original:  http://www.dummyproof.com/javascripts -->
 
<!--Total Java Scripts 99 - Next Step Software-->
 
<table>
<b>
<table border=2 width=50 height=60 cellpadding=1 cellspacing=5>
<tr>
<td colspan=4 align=middle>
<input name="ReadOut" type="Text" size=24 value="0" width=100%>
</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 colspan="2">
<input name="btnNine" type="Button" value="  9  " onclick="NumPressed(9)">
</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 colspan="2">
<input name="btnSix" type="Button" value="  6  " onclick="NumPressed(6)">
</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 colspan="2">
<input name="btnThree" type="Button" value="  3  " onclick="NumPressed(3)">
</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>

<script language="JavaScript">
<!-- Begin
var FKeyPad = document.Keypad;
var Accum = 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 )
Accum += parseFloat(Readout);
else if ( '-' == PendingOp )
Accum -= parseFloat(Readout);
else if ( '/' == PendingOp )
Accum /= parseFloat(Readout);
else if ( '*' == PendingOp )
Accum *= parseFloat(Readout);
else
Accum = parseFloat(Readout);
FKeyPad.ReadOut.value = Accum;
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 () {
Accum = 0;
PendingOp = "";
ClearEntry();
}
function Neg () {
FKeyPad.ReadOut.value = parseFloat(FKeyPad.ReadOut.value) * -1;
}
function Percent () {
FKeyPad.ReadOut.value = (parseFloat(FKeyPad.ReadOut.value) / 100) * parseFloat(Accum);
}
// End -->
</script>
 
<!-- Script Size:  4.05 KB  -->

100

101

102

103

104

105

106

107

108

109

110

111

112

113

114

115

116

117

118

119

120

121

122

123

124

125

126

127

128

129

130

131

132

133

134

135

136

137

138

139

140

141

142

143

144

145

146

147

148

149

150

151

152

153

154

155

156

157

158

159

160

161

162

<!-- ONE STEP TO INSTALL ADVANCED CALCULATOR:

1. Paste the coding into the BODY of your HTML document -->

<table>

<b>

<tr>

</td>

<td>

</td>

</td>

</tr>

<tr>

<td>

</td>

<td>

</td>

</td>

<td>

</td>

<td>

</td>

</tr>

<tr>

<td>

</td>

<td>

</td>

</td>

</td>

</td>

</tr>

<tr>

<td>

</td>

<td>

</td>

</td>

</td>

</td>

</tr>

<tr>

<td>

</td>

<td>

</td>

</td>

<td>

</td>

</tr>

</table>

</b>

</form>

<!-- Begin

var FKeyPad = document.Keypad;

var Accum = 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 )

Accum += parseFloat(Readout);

else if ( '-' == PendingOp )

Accum -= parseFloat(Readout);

else if ( '/' == PendingOp )

Accum /= parseFloat(Readout);

else if ( '*' == PendingOp )

Accum *= parseFloat(Readout);

else

Accum = parseFloat(Readout);

FKeyPad.ReadOut.value = Accum;

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 () {

Accum = 0;

PendingOp = "";

ClearEntry();

}

function Neg () {

FKeyPad.ReadOut.value = parseFloat(FKeyPad.ReadOut.value) * -1;

}

function Percent () {

FKeyPad.ReadOut.value = (parseFloat(FKeyPad.ReadOut.value) / 100) * parseFloat(Accum);

}

// End -->

</script>

Here is the screenshot of the calculator program and how it looks like in the web browser. You can further strengthen this script and format it as per the browser by using this JavaScript code to find browser information. It is difficult to understand the difference between JavaScript array [] and JavaScript object {}, so this tutorial explains this difference in between JavaScript object{} and array[] and gives practical examples to demonstrate both array and object concepts.

About The Author

M. Saqib

Advanced Calculator

About The Author

M. Saqib

Related Posts

Difference Between [] and {} – JavaScript

Blinker

Phone Bill

Browser Check