HTML and CSS Reference
the Math table calculator page
Andresr/Shutterstock.com; xiver /Shutterstock.com
The calculator is actually a Web table using CSS styles to give it the appearance of
a calculator. Each calculator button is a form button and the calculator screen is a
textarea element. When a user clicks a calculator button, the number or symbol repre-
sented by the button should be appended to the text on the calculator screen.
When the user clicks the equal button ( = ), the calculator should evaluate the expres-
sion and display the calculated value. When the user clicks the Clear button, the text in
the calculator screen should be replaced with an empty text string. Finally, when the user
clicks the backspace button (<-), the browser should remove the last character on the
calculator screen. To aid you in programming the backspace key, Theresa has provided a
Complete the following:
1. Use your text editor to open the calctxt.htm file from the tutorial.11\case2 folder
included with your Data Files. Enter your name and the date in the comment section
of the file. Save the file as calculator.htm in the same folder.
2. In your text editor, scroll down to the Web table elements and locate the input ele-
ments for the 0 through 9 buttons; the / , * , - , and + buttons; the ( and ) buttons;
and the . button. For each of those 17 buttons, add an onclick attribute to run the
calcPress(' value ')
where value is the number or character displayed on the button.