Code for Java Script Cylinder / Cone Volume Calculator
By Stephen Bucaro
In this article I'll show you how to use to Java Script to create a cylinder / cone volume calculator.
With this calculator, the user inputs the side dimension of a cylinder or cone, and the diameter of the
end of the cylinder or cone, and the calculator will return the volume. I'll explain everything in detail
so that you can learn Java Script and modify the code for your own purposes.
I have programmed many Java Script calculators and discovered that, the process of coding any calculator
can be broken down into a step-by-step procedure. Shown below are the steps to build a calculator.
1. Acquire the formula
2. Determine the inputs and outputs
3. Design the html form
4. Write Java Script to process the form
5. Test and Final Touches
Step 1: Cylinder and Cone Volume Formulas
The formula for the volume of a cylinder is PI r2 h.
The formula for the volume of a cone is (PI r2 h) / 3.
Step 2. The inputs and outputs
For a cylinder the user needs to enter the length of the side and the diameter of one of the end circles.
By default the cylinder / cone selection radio button is set to cylinder. If the user wants the volume
of a cone, they need to enter the length of the side and the diameter of the end circle, then set the
cylinder / cone selection radio button is set to cone.
Note that the formula uses the radius of the end circle, while we have the user enter the diameter.
This is because it's easier for the user to measure a diameter than a radius, so the calculator divides
the user's diameter entry by 2 to get the radius.
The actual units of measurement are irrelevant in a volume calculator because sides are always in
length units while the volume is in cubic units of the same measuring system.
Step 3. The html Form
The html code for the cylinder / cone volume calculator form consists of an input text box for the height
dimension, a text box for the diameter, a pair of radio buttons to select cylinder or cone, a text box for the
calculated volume, and a "Calculate" button to initiate the calculation. The html code for the cylinder / cone
volume calculator form is shown below.
Height:<input id="h" style="text-align:right"></input><br />
Diameter:<input id="d" style="text-align:right"></input><br />
<input type="radio" name="shape" value="cylinder" checked />Cylinder<br />
<input type="radio" name="shape" value="cone" />Cone<br />
Volume:<input id="cv" style="text-align:right"></input><br />
<button onclick="cylinderVolume(this.form)">Calculate</button><br />
Note that all the text box html elements have id attributes with unique ids, and they also have style attributes
that set their text-align properties to the value right. Also note that the onclick event of the button calls
a Java Script function named cylinderVolume to perform the calculation, passing the form as a parameter.
this is to prevent the form from being submitted to the server.