JavaScript Calculator Program

This JavaScript program implements a basic calculator interface within an HTML form. It allows users to perform arithmetic operations. The calculator interface consists of numeric buttons, operation buttons (+, -, *, /), and special function buttons (C for clear, CE for clear entry, +/- for negation, % for percentage, and . for decimal). The program utilizes event listeners to handle button clicks and updates the display accordingly.

The calculator supports addition, subtraction, multiplication, and division operations, along with decimal input and negation. It maintains an accumulator for storing intermediate results and appropriately handles sequential operations to ensure correct calculation behavior.

<form name="Keypad" action="">
<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">
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);
}
</script>

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

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

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

}

</script>

Here is the screenshot of the calculator program and how it looks like in the web browser. You can further improve 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.

JavaScript Calculator Program