Building a Web Page Calculator

Control Styles

This is the CSS portion for the controls:

input#CI1 {margin:3px; width:195px; text-align:right}

button.CalcBut {width:40px; height:40px}

Input Text Control

The ID of the Input Text Control is "CI1." This control does not respond to any event and so has no event attribute. This control is given the readonly attribute.

The Buttons

Each button has the onclick event. When a button is clicked, a function is called with the ID of the button passed as an argument. All of the number buttons, including the point, the +/- and the RM buttons, call the same function; the ID determines what number should be displayed (or what should happen). Each of the other buttons calls another function, passing its ID as an argument. The ID determines what action should take place.

This is the code for the controls:

<input type="text" id="CI1"><br />

<button type="button" class="CalcBut" id="B7" onclick="showNum('B7')">7</button><button type="button" class="CalcBut" id="B8" onclick="showNum('B8')">8</button><button type="button" class="CalcBut" id="B9" onclick="showNum('B9')">9</button><button type="button" class="CalcBut" id="BD" onclick="operator('BD')">/</button><button type="button" class="CalcBut" id="BMM" onclick="operator('BMM')">C</button><br />

<button type="button" class="CalcBut" id="B4" onclick="showNum('B4')">4</button><button type="button" class="CalcBut" id="B5" onclick="showNum('B5')">5</button><button type="button" class="CalcBut" id="B6" onclick="showNum('B6')">6</button><button type="button" class="CalcBut" id="BX" onclick="operator('BX')">X</button><button type="button" class="CalcBut" id="BRM" onclick="showNum('BRM')">RM</button><br />

<button type="button" class="CalcBut" id="B1" onclick="showNum('B1')">1</button><button type="button" class="CalcBut" id="B2" onclick="showNum('B2')">2</button><button type="button" class="CalcBut" id="B3" onclick="showNum('B3')">3</button><button type="button" class="CalcBut" id="BMI" onclick="operator('BMI')">-</button><button type="button" class="CalcBut" id="BMP" onclick="operator('BMP')">M+</button><br />

<button type="button" class="CalcBut" id="B0" onclick="showNum('B0')">0</button><button type="button" class="CalcBut" id="BPM" onclick="showNum('BPM')">+/-</button><button type="button" class="CalcBut" id="BPOINT" onclick="showNum('BPOINT')">.</button><button type="button" class="CalcBut" id="BP" onclick="operator('BP')">+</button><button type="button" class="CalcBut" id="BEQ" onclick="operator('BEQ')">=</button>

Glance through the above code and note the IDs and event attributes. Note the line break elements, which demarcate the lines of the controls in the DIV element. I have not shown the code for the functions in this part of the series. I will show that in the next part. What I wanted you to understand in this part are the main objectives in the project.

You should now know the controls you need for the standard calculator. You should also know how to fit them in a DIV element. You should also know how to make the calculator appear and disappear; take note of the layering (z-index) and Display features.

In the next parts of the series I will explain what happens when you click a button and most importantly, what happens when you click the equal sign (Enter button). After that we shall go into the operation of a scientific calculator.

We have come to the end of this part of the series. We continue in the next part. Courage!