HTML and CSS Reference
In-Depth Information
Figure 11-39
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
function named erase(). You will create all of the other JavaScript functions yourself.
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
statement
calcPress('
value
')
where
value
is the number or character displayed on the button.
