File: volume-area-calculator.html

Recommend this page to a friend!
  Classes of MarPlo   Volume and Surface Area Calculator   volume-area-calculator.html   Download  
File: volume-area-calculator.html
Role: Example script
Content type: text/plain
Description: Example and instructions
Class: Volume and Surface Area Calculator
Calculate the dimensions of 3D objects
Author: By
Last change:
Date: 11 years ago
Size: 7,917 bytes
 

Contents

Class file image Download
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" lang="en"> <head> <meta http-equiv="content-type" content="text/html; charset=utf-8" /> <title>Volume and Surface Area Calculator</title><meta name="description" content="Volume and Surface Area Calculator, from http://coursesweb.net" /> <meta name="keywords" content="volume calculator, area calculator" /> <style type="text/css"><!-- body, html { margin:0; padding:1em; text-align:center; } p { text-align:left; } pre { margin:1em 3em; background:#fefe09; text-align:left; font-weight:bold; font-size:1.15em; color:#0102da; padding:.2em .3em; overflow:auto; word-wrap:break-word } --></style> <link href="vacalculator/vaclc.css" rel="stylesheet" type="text/css" /> </head> <body> <h1>Volume and Surface Area Calculator</h1> <div id="volumes"> <h3 id="volobj"></h3> <div id="volimgs"></div> <div id="addselitem"></div> <div id="volsel"> <h4>Select an object</h4> <div class="volselfl"> <a href="http://coursesweb.net/javascript/" title="Javascript jQuery Course" id="cwn">Javascript Course</a> <label for="barrel_sel"><input type="radio" name="volittem" id="barrel_sel" value="barrel" />Barrel</label> <label for="cone_sel"><input type="radio" name="volittem" id="cone_sel" value="cone" />Cone</label> <label for="frustum_cone_sel"><input type="radio" name="volittem" id="frustum_cone_sel" value="frustum_cone" />Frustum Cone</label> <label for="cube_sel"><input type="radio" name="volittem" id="cube_sel" value="cube" />Cube</label> <label for="cylinder_sel"><input type="radio" name="volittem" id="cylinder_sel" value="cylinder" />Cylinder</label> </div> <div class="volselfl"> <label for="hollow_cylinder_sel"><input type="radio" name="volittem" id="hollow_cylinder_sel" value="hollow_cylinder" />Hollow Cylinder</label> <label for="sectioned_cylinder_sel"><input type="radio" name="volittem" id="sectioned_cylinder_sel" value="sectioned_cylinder" />Sectioned Cylinder</label> <label for="parallelepiped_sel"><input type="radio" name="volittem" id="parallelepiped_sel" value="parallelepiped" />Parallelepiped</label> <label for="hexagonal_prism_sel"><input type="radio" name="volittem" id="hexagonal_prism_sel" value="hexagonal_prism" />Hexagonal Prism</label> <label for="pyramid_sel"><input type="radio" name="volittem" id="pyramid_sel" value="pyramid" />Pyramid</label> <label for="frustum_pyramid_sel"><input type="radio" name="volittem" id="frustum_pyramid_sel" value="frustum_pyramid" />Frustum Pyramid</label> </div> <div class="volselfl"> <label for="sphere_sel"><input type="radio" name="volittem" id="sphere_sel" value="sphere" />Sphere</label> <label for="spherical_cap_sel"><input type="radio" name="volittem" id="spherical_cap_sel" value="spherical_cap" />Spherical Cap</label> <label for="spherical_sector_sel"><input type="radio" name="volittem" id="spherical_sector_sel" value="spherical_sector" />Spherical Sector</label> <label for="spherical_zone_sel"><input type="radio" name="volittem" id="spherical_zone_sel" value="spherical_zone" />Spherical Zone</label> <label for="torus_sel"><input type="radio" name="volittem" id="torus_sel" value="torus" />Torus</label> </div><br style="clear:both;"/> </div> </div> <script src="vacalculator/vaclc.js" type="text/javascript"></script> <hr/> <p>To add this volume and area calculator in a web page, copy the directory "<b>vacalculator</b>" on your server (with all its files):<br/> 1) Add the following code in the place where you want to display it:</p> <pre> &lt;div id=&quot;volumes&quot;&gt; &lt;h3 id=&quot;volobj&quot;&gt;&lt;/h3&gt; &lt;div id=&quot;volimgs&quot;&gt;&lt;/div&gt; &lt;div id=&quot;addselitem&quot;&gt;&lt;/div&gt; &lt;div id=&quot;volsel&quot;&gt; &lt;h4&gt;Select an object&lt;/h4&gt; &lt;div class=&quot;volselfl&quot;&gt; &lt;a href=&quot;http://coursesweb.net/javascript/&quot; title=&quot;Javascript jQuery Course&quot; id=&quot;cwn&quot;&gt;Javascript Course&lt;/a&gt; &lt;label for=&quot;barrel_sel&quot;&gt;&lt;input type=&quot;radio&quot; name=&quot;volittem&quot; id=&quot;barrel_sel&quot; value=&quot;barrel&quot; /&gt;Barrel&lt;/label&gt; &lt;label for=&quot;cone_sel&quot;&gt;&lt;input type=&quot;radio&quot; name=&quot;volittem&quot; id=&quot;cone_sel&quot; value=&quot;cone&quot; /&gt;Cone&lt;/label&gt; &lt;label for=&quot;frustum_cone_sel&quot;&gt;&lt;input type=&quot;radio&quot; name=&quot;volittem&quot; id=&quot;frustum_cone_sel&quot; value=&quot;frustum_cone&quot; /&gt;Frustum Cone&lt;/label&gt; &lt;label for=&quot;cube_sel&quot;&gt;&lt;input type=&quot;radio&quot; name=&quot;volittem&quot; id=&quot;cube_sel&quot; value=&quot;cube&quot; /&gt;Cube&lt;/label&gt; &lt;label for=&quot;cylinder_sel&quot;&gt;&lt;input type=&quot;radio&quot; name=&quot;volittem&quot; id=&quot;cylinder_sel&quot; value=&quot;cylinder&quot; /&gt;Cylinder&lt;/label&gt; &lt;/div&gt; &lt;div class=&quot;volselfl&quot;&gt; &lt;label for=&quot;hollow_cylinder_sel&quot;&gt;&lt;input type=&quot;radio&quot; name=&quot;volittem&quot; id=&quot;hollow_cylinder_sel&quot; value=&quot;hollow_cylinder&quot; /&gt;Hollow Cylinder&lt;/label&gt; &lt;label for=&quot;sectioned_cylinder_sel&quot;&gt;&lt;input type=&quot;radio&quot; name=&quot;volittem&quot; id=&quot;sectioned_cylinder_sel&quot; value=&quot;sectioned_cylinder&quot; /&gt;Sectioned Cylinder&lt;/label&gt; &lt;label for=&quot;parallelepiped_sel&quot;&gt;&lt;input type=&quot;radio&quot; name=&quot;volittem&quot; id=&quot;parallelepiped_sel&quot; value=&quot;parallelepiped&quot; /&gt;Parallelepiped&lt;/label&gt; &lt;label for=&quot;hexagonal_prism_sel&quot;&gt;&lt;input type=&quot;radio&quot; name=&quot;volittem&quot; id=&quot;hexagonal_prism_sel&quot; value=&quot;hexagonal_prism&quot; /&gt;Hexagonal Prism&lt;/label&gt; &lt;label for=&quot;pyramid_sel&quot;&gt;&lt;input type=&quot;radio&quot; name=&quot;volittem&quot; id=&quot;pyramid_sel&quot; value=&quot;pyramid&quot; /&gt;Pyramid&lt;/label&gt; &lt;label for=&quot;frustum_pyramid_sel&quot;&gt;&lt;input type=&quot;radio&quot; name=&quot;volittem&quot; id=&quot;frustum_pyramid_sel&quot; value=&quot;frustum_pyramid&quot; /&gt;Frustum Pyramid&lt;/label&gt; &lt;/div&gt; &lt;div class=&quot;volselfl&quot;&gt; &lt;label for=&quot;sphere_sel&quot;&gt;&lt;input type=&quot;radio&quot; name=&quot;volittem&quot; id=&quot;sphere_sel&quot; value=&quot;sphere&quot; /&gt;Sphere&lt;/label&gt; &lt;label for=&quot;spherical_cap_sel&quot;&gt;&lt;input type=&quot;radio&quot; name=&quot;volittem&quot; id=&quot;spherical_cap_sel&quot; value=&quot;spherical_cap&quot; /&gt;Spherical Cap&lt;/label&gt; &lt;label for=&quot;spherical_sector_sel&quot;&gt;&lt;input type=&quot;radio&quot; name=&quot;volittem&quot; id=&quot;spherical_sector_sel&quot; value=&quot;spherical_sector&quot; /&gt;Spherical Sector&lt;/label&gt; &lt;label for=&quot;spherical_zone_sel&quot;&gt;&lt;input type=&quot;radio&quot; name=&quot;volittem&quot; id=&quot;spherical_zone_sel&quot; value=&quot;spherical_zone&quot; /&gt;Spherical Zone&lt;/label&gt; &lt;label for=&quot;torus_sel&quot;&gt;&lt;input type=&quot;radio&quot; name=&quot;volittem&quot; id=&quot;torus_sel&quot; value=&quot;torus&quot; /&gt;Torus&lt;/label&gt; &lt;/div&gt;&lt;br style=&quot;clear:both;&quot;/&gt; &lt;/div&gt; &lt;/div&gt; &lt;script src=&quot;vacalculator/vaclc.js&quot; type=&quot;text/javascript&quot;&gt;&lt;/script&gt; </pre> <p>2) Add this code in the &lt;head&gt; zone of your web page:</p> <pre> &lt;link href=&quot;vacalculator/vaclc.css&quot; rel=&quot;stylesheet&quot; type=&quot;text/css&quot; /&gt; </pre><br/><br/> <a href="http://coursesweb.net" title="Programming, Web Development Courses">http://coursesweb.net</a><br/> </body> </html>