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.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 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 | <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> |
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
