Login   Register  
Icontem

File: area-perimeter-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  >  JS Area Perimeter Calculator  >  area-perimeter-calculator.html  >  Download  
File: area-perimeter-calculator.html
Role: Example script
Content type: text/plain
Description: Example and instructions
Class: JS Area Perimeter Calculator
Calculate the dimensions of geometric shapes
Author: By
Last change:
Date: 2012-11-27 09:11
Size: 7,638 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>Area and Perimeter Calculator</title><meta name="description" content="Surface Area and Perimeter Calculator, from http://coursesweb.net" />
<meta name="keywords" content="perimeter 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="apcalculator/apclc.css" rel="stylesheet" type="text/css" />
</head>
<body>
<h1>Area and Perimeter Calculator</h1>
<div id="araprm">
<h3 id="apobj"></h3>
<div id="apimgs"></div>
<div id="addselitem"></div>
<div id="apsel">
<h4>Select an object</h4>
<div class="apselfl">
 <a href="http://coursesweb.net/javascript/" title="Javascript jQuery Course" id="cwn">Javascript Course</a>
 <label for="circle_sel"><input type="radio" name="volittem" id="circle_sel" value="circle" />Circle</label>
 <label for="circle_sector_sel"><input type="radio" name="volittem" id="circle_sector_sel" value="circle_sector" />Circle Sector</label>
 <label for="circle_zone_sel"><input type="radio" name="volittem" id="circle_zone_sel" value="circle_zone" />Circle Zone</label>
 <label for="circular_ring_sel"><input type="radio" name="volittem" id="circular_ring_sel" value="circular_ring" />Circular Ring</label>
 <label for="ellipse_sel"><input type="radio" name="volittem" id="ellipse_sel" value="ellipse" />Ellipse</label>
</div>
<div class="apselfl">
 <label for="equilateral_triangle_sel"><input type="radio" name="volittem" id="equilateral_triangle_sel" value="equilateral_triangle" />Equilateral Triangle</label>
 <label for="hexagon_sel"><input type="radio" name="volittem" id="hexagon_sel" value="hexagon" />Hexagon</label>
 <label for="isosceles_triangle_sel"><input type="radio" name="volittem" id="isosceles_triangle_sel" value="isosceles_triangle" />Isosceles Triangle</label>
 <label for="parallelogram_sel"><input type="radio" name="volittem" id="parallelogram_sel" value="parallelogram" />Parallelogram</label>
 <label for="rectangle_sel"><input type="radio" name="volittem" id="rectangle_sel" value="rectangle" />Rectangle</label>
</div>
<div class="apselfl">
 <label for="rhombus_sel"><input type="radio" name="volittem" id="rhombus_sel" value="rhombus" />Rhombus</label>
 <label for="right_triangle_sel"><input type="radio" name="volittem" id="right_triangle_sel" value="right_triangle" />Right Triangle</label>
 <label for="scalene_triangle_sel"><input type="radio" name="volittem" id="scalene_triangle_sel" value="scalene_triangle" />Scalene Triangle</label>
 <label for="square_sel"><input type="radio" name="volittem" id="square_sel" value="square" />Square</label>
 <label for="trapezoid_sel"><input type="radio" name="volittem" id="trapezoid_sel" value="trapezoid" />Trapezoid</label>
</div><br style="clear:both;"/>
</div>
</div>
<script src="apcalculator/apclc.js" type="text/javascript"></script>
<hr/>
<p>To add this area and perimeter calculator in a web page, copy the directory "<b>apcalculator</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;araprm&quot;&gt;
&lt;h3 id=&quot;apobj&quot;&gt;&lt;/h3&gt;
&lt;div id=&quot;apimgs&quot;&gt;&lt;/div&gt;
&lt;div id=&quot;addselitem&quot;&gt;&lt;/div&gt;
&lt;div id=&quot;apsel&quot;&gt;
&lt;h4&gt;Select an object&lt;/h4&gt;
&lt;div class=&quot;apselfl&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;circle_sel&quot;&gt;&lt;input type=&quot;radio&quot; name=&quot;volittem&quot; id=&quot;circle_sel&quot; value=&quot;circle&quot; /&gt;Circle&lt;/label&gt;
 &lt;label for=&quot;circle_sector_sel&quot;&gt;&lt;input type=&quot;radio&quot; name=&quot;volittem&quot; id=&quot;circle_sector_sel&quot; value=&quot;circle_sector&quot; /&gt;Circle Sector&lt;/label&gt;
 &lt;label for=&quot;circle_zone_sel&quot;&gt;&lt;input type=&quot;radio&quot; name=&quot;volittem&quot; id=&quot;circle_zone_sel&quot; value=&quot;circle_zone&quot; /&gt;Circle Zone&lt;/label&gt;
 &lt;label for=&quot;circular_ring_sel&quot;&gt;&lt;input type=&quot;radio&quot; name=&quot;volittem&quot; id=&quot;circular_ring_sel&quot; value=&quot;circular_ring&quot; /&gt;Circular Ring&lt;/label&gt;
 &lt;label for=&quot;ellipse_sel&quot;&gt;&lt;input type=&quot;radio&quot; name=&quot;volittem&quot; id=&quot;ellipse_sel&quot; value=&quot;ellipse&quot; /&gt;Ellipse&lt;/label&gt;
&lt;/div&gt;
&lt;div class=&quot;apselfl&quot;&gt;
 &lt;label for=&quot;equilateral_triangle_sel&quot;&gt;&lt;input type=&quot;radio&quot; name=&quot;volittem&quot; id=&quot;equilateral_triangle_sel&quot; value=&quot;equilateral_triangle&quot; /&gt;Equilateral Triangle&lt;/label&gt;
 &lt;label for=&quot;hexagon_sel&quot;&gt;&lt;input type=&quot;radio&quot; name=&quot;volittem&quot; id=&quot;hexagon_sel&quot; value=&quot;hexagon&quot; /&gt;Hexagon&lt;/label&gt;
 &lt;label for=&quot;isosceles_triangle_sel&quot;&gt;&lt;input type=&quot;radio&quot; name=&quot;volittem&quot; id=&quot;isosceles_triangle_sel&quot; value=&quot;isosceles_triangle&quot; /&gt;Isosceles Triangle&lt;/label&gt;
 &lt;label for=&quot;parallelogram_sel&quot;&gt;&lt;input type=&quot;radio&quot; name=&quot;volittem&quot; id=&quot;parallelogram_sel&quot; value=&quot;parallelogram&quot; /&gt;Parallelogram&lt;/label&gt;
 &lt;label for=&quot;rectangle_sel&quot;&gt;&lt;input type=&quot;radio&quot; name=&quot;volittem&quot; id=&quot;rectangle_sel&quot; value=&quot;rectangle&quot; /&gt;Rectangle&lt;/label&gt;
&lt;/div&gt;
&lt;div class=&quot;apselfl&quot;&gt;
 &lt;label for=&quot;rhombus_sel&quot;&gt;&lt;input type=&quot;radio&quot; name=&quot;volittem&quot; id=&quot;rhombus_sel&quot; value=&quot;rhombus&quot; /&gt;Rhombus&lt;/label&gt;
 &lt;label for=&quot;right_triangle_sel&quot;&gt;&lt;input type=&quot;radio&quot; name=&quot;volittem&quot; id=&quot;right_triangle_sel&quot; value=&quot;right_triangle&quot; /&gt;Right Triangle&lt;/label&gt;
 &lt;label for=&quot;scalene_triangle_sel&quot;&gt;&lt;input type=&quot;radio&quot; name=&quot;volittem&quot; id=&quot;scalene_triangle_sel&quot; value=&quot;scalene_triangle&quot; /&gt;Scalene Triangle&lt;/label&gt;
 &lt;label for=&quot;square_sel&quot;&gt;&lt;input type=&quot;radio&quot; name=&quot;volittem&quot; id=&quot;square_sel&quot; value=&quot;square&quot; /&gt;Square&lt;/label&gt;
 &lt;label for=&quot;trapezoid_sel&quot;&gt;&lt;input type=&quot;radio&quot; name=&quot;volittem&quot; id=&quot;trapezoid_sel&quot; value=&quot;trapezoid&quot; /&gt;Trapezoid&lt;/label&gt;
&lt;/div&gt;&lt;br style=&quot;clear:both;&quot;/&gt;
&lt;/div&gt;
&lt;/div&gt;
&lt;script src=&quot;apcalculator/apclc.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;apcalculator/apclc.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>