Login   Register  
Icontem

File: volume-area-calculator.html

Recommend this page to a friend!
Stumble It! Stumble It! Bookmark in del.icio.us Bookmark in del.icio.us
  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: 2012-12-06 04:52
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>