New Perspectives on HTML, CSS, and Dynamic HTML 5th edition Tutorial 11 Case 2 The Math Table
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 represented by the button should be appended to the text on the calculator screen.
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 elements for the 0 through 9 buttons; the /, *, -, and + buttons; the (and) buttons; and the . button. For each of those 17 buttons, and an onclick attribute to run the statement
where value is the number or character displayed on the button.
3. Locate the input element for the Clear button and add an onclick attribute to run the clearWin() function when the button is clicked.
4. Locate the input element for the backspace button (<-) and add an onclick attribute to run the erase() function when the button is clicked.
5. Add an onclick attribute to the equal button (=) to run the calcExpression() function when the button is clicked.
6. Scroll to the top of the file and add the calcPress() function to the embedded script element. The purpose of this function is to append a symbol to the text displayed in the calculator screen. The calcPress() function should include the following:
a. A single parameter named symbol
b. A command that uses the += operator to add the value of the symbol parameter to the value of the calcwindow field within the calculator form
7. Create a function named calcExpression(). The purpose of this function is to append the calculated value to the expression displayed on the calculator screen. The function has no parameters. Add the following commands:
a. Declare a variable named cString that is equal to the text contained in the calcwindow field of the calculator form.
b. Use the eval() method to store the numeric value of cString in a variabe named cValue.
c. Change the text string value of the calcwindw field from the calculator form to
cString = cValue
where cString is the value of the cString variable and cValue is the value of the cValue variable.
8. Create a function named clearWinn(). The purpose of this function is to erase the contents of the calculator screen. The function has no parameters but should have a single command that changes the value of the calcwindow field in the calculator field in the calculator to an empty text string (“”).
9. Save your changes to the files.
10. Open the calculator.htm file in your Web browser. Click the different calculator buttons and verify that you can enter a mathematical expression into the calculator. Click the backspace button (<-) and verify that you can erase the last character from the screen Click the equal button (=) and verify that the calculator adds the calculated numeric value to the expression. Finally, click the Clear button and verify that all of the text is removed from the calculator screen.
11. Submit your completed project to your instructor, in either printed or electronic form, as requested.