Assume that you want to place an order in a different currency and you are looking at a currency exchange web page. Before you place the order you may need to do some calculation. Would it not be nice if such a page had a standard calculator? Similarly, some scientific articles on the Internet require the reader to do some calculation to fully appreciate the topic. Would it not be nice if such a page had a scientific calculator? This is a six-part series which shows you how to design a calculator for your web page.
Building a Web Page Calculator - The Standard Calculator Controls (Page 3 of 4 )
The control that displays the numbers typed and calculation results is an Input Text Control. The CSS value for its text-align property is "right." In this way as you type (click) the numbers, they appear in the Input Text Control from the right, as they do with physical calculators. The user will be able to copy the result and paste it into a text editor, or send it in an email to a friend, or do some other thing with it.
The rest of the controls are buttons. You have the number buttons, to type in numbers. You have the (+/-) button to change the sign of the number typed. You have the addition, subtraction, multiplication and division buttons. You have the equal sign (Enter) button. You have the (M+) button to store a number in the memory. You have the (RM) button to retrieve the number from the memory. Finally, you have the (C) button to clear the number in the display (Input Text Control).
To simplify things, I have not included a button to erase memory (store). Each time you store (click M+) a number, it replaces the old one. If you really want to erase memory, your best bet is to store zero.
All of the controls have IDs.
Our Standard Calculator Layout
This is a picture of our standard calculator.
Fig. 1 Standard Calculator
The first line has the Input Text Control. The second line has the buttons for the numbers 7, 8 and 9. It also has the Division and Clear Display buttons. The following line has the buttons for the numbers 4, 5 and 6. It also has the Multiplication and the Retrieve From Memory buttons. The line that follows has the buttons for the numbers 1, 2 and 3. It also has the Minus and Store To Memory buttons. The last line has the button for the number 0. It also has the button to change the sign of a number, the decimal point button, the plus button and the equal sign button.
HTML 
Coding a Web Page Calculator
