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.
The above code has the following elements: XML, DOCTYPE, HTML, HEAD and BODY. The components of the calculator will be contained in a DIV element. There will be a button that, when clicked, causes the calculator to appear. This is the basic content of the BODY element.
The DIV element has the ID "Calc." The button has the title "Use Calculator." It has an onclick event whose meaning we shall see soon.
The value of the CSS display property of the calculator (DIV) is given an initial value of "none." Layering is used; when the calculator is to be displayed, it appears in front of every other element. So the DIV element for the calculator is given the absolute value for its CSS position property, and a z-index value of 2. The BODY element is given the absolute value for its position property, and a z-index value of zero. This is the basic code for the CSS:
<style type="text/css">
body {position:absolute; z-index:0; background-color:#ff9933}
When the button is clicked, the showCalc() function is called. This function changes the value of the CSS display property for the calculator (DIV) to "block;" the calculator is displayed as a result. When you click the BODY element, the removeCalc() function is called. This function changes the value of the CSS display property of the calculator (DIV) to "none;" the calculator disappears. Note that when this property is "none," the calculator (DIV) is off the screen. This is the basic JavaScript; I give further explanation below it:
What is the use of the first statement "calcJustClicked = true;"? When you click the BODY element, a function is called to remove the calculator from the screen. When you click the button, another function is called to display the calculator.
Now, when you click the BODY element, only one function is called. However, when you click the button, the BODY element is indirectly clicked. So, two events are triggered. These events oppose one another. The one from the button causes the calculator to be displayed. The one from the BODY, which follows immediately, causes the calculator to be removed. When we click the button, we want only the first event to take effect.
When you click the button, the "calcJustClicked = true" statement first sets the calcJustClicked global variable to true, indicating that the button has just been clicked. When the opposing function from the BODY is immediately called, it first checks to see if calcJustClicked is true, with
if (calcJustClicked == false)
If it is true, it does not remove the calculator. However, before the opposing function completes its execution, it resets the calcJustClicked variable to false (the default value). In this way, when you next click the body element, the calculator will be removed.
Now when the calculator is displayed, you will need to be clicking buttons on it. When you click the calculator, the BODY element will also receive the click (indirectly). In order to prevent the calculator from being removed, the calculator (DIV) has the attribute
onclick="calcJustClicked = true;"
This has the same effect as for the "Use calculator" button.
HTML 
Coding a Web Page Calculator
