Geometric Properties of a Triangle

Sandeep Gangadharan May 14, 2007

General

This script enables users to find out areas of a triangle if the three sides are known. Moreover it finds out the areas of the largest and smallest inscribed circle.

Geometric Properties of a Triangle
Side A:		Area of Triangle:
Side B:		Area of Largest Inscribed Circle:
Side C:		Area of Smallest Inscribed Circle:
		Angle between A and B:

Notes

Created by: Sandeep Gangadharan
Web Site: http://sivamdesign.com/scripts/

Source Code

Paste this source code into the designated areas.

External file

Paste this code into an external JavaScript file named: geometricProperties.js

/* This script and many more are available free online at
The JavaScript Source!! http://www.javascriptsource.com
Created by: Sandeep Gangadharan | http://sivamdesign.com/scripts/ */
function getProp() {
  var A = document.prop.A.value;
  var B = document.prop.B.value;
  var C = document.prop.C.value;
  var S = (parseInt(A) + parseInt(B) + parseInt(C)) / 2;
  var Z = parseInt((A*A)+(B*B)-(C*C))/parseInt(2*A*B);

  document.prop.area.value = Math.round(Math.sqrt(S*(S-A)*(S-B)*(S-C)) * 10000) / 10000;
  document.prop.lic.value = Math.round(Math.PI * (document.prop.area.value/S) * (document.prop.area.value/S) * 10000) / 10000;
  document.prop.sic.value = Math.round(Math.PI * ((A*B*C)/(4*(document.prop.area.value))) * ((A*B*C)/(4*(document.prop.area.value))) * 10000) / 10000;
  document.prop.ang.value = Math.round(Math.atan(Math.sqrt((1/(Z * Z))-1)) * (180/Math.PI) * 10000) / 10000;
}

Head

Paste this code into the HEAD section of your HTML document.


<script type="text/javascript" src="geometricProperties.js"></script>

Body

Paste this code into the BODY section of your HTML document


<table border="0" cellpadding="4" cellspacing="0" bgcolor="#cccccc">
<form name="prop">
 <tr>
  <td colspan="4" style="color: #fff; background: #000080;">
    <b>Geometric Properties of a Triangle</b></font>
  </td>
 </tr><tr>
  <td>
    <b>Side A: </b>
  </td>
  <td>
    <input type="text" size="4" name="A" style="font-size: 9pt">
  </td>
  <td>
    <b>Area of Triangle: </b>
  </td>
  <td>
    <input type="text" size="8" name="area" disabled="disabled" style="color: #000; background: #fff; font-size: 9pt; text-align: right;">
  </td>
 </tr>
 <tr>
  <td>
    <b>Side B: </b>
  </td>
  <td>
    <input type="text" size="4" name="B" style="font-size: 9pt">
  </td>
  <td>
    <b>Area of Largest Inscribed Circle: </b>
  </td>
  <td>
    <input type="text" size="8" name="lic" disabled="disabled" style="color: #000; background: #fff; font-size: 9pt; text-align: right;">
  </td>
 </tr>
 <tr>
  <td>
    <b>Side C: </b>
  </td>
  <td>
    <input type="text" size="4" name="C" style="font-size: 9pt">
  </td>
  <td>
    <b>Area of Smallest Inscribed Circle: </b>
  </td>
  <td>
    <input type="text" size="8" name="sic" disabled="disabled" style="color: #000; background: #fff; font-size: 9pt; text-align: right;">
  </td>
 </tr>
 <tr>
  <td>
    <input type="reset" value="Reset" style="font-size: 9pt" onClick="reset()">
  </td>
  <td>
    <input type="button" value="Compute" style="font-size: 9pt" onClick="getProp()">
  </td>
  <td>
    <b>Angle between A and B: </b>
  </td>
  <td>
    <input type="text" size="8" name="ang" disabled="disabled" style="color: #000; background: #fff; font-size: 9pt; text-align: right;">
  </td>
 </tr>
</form>
</table>

Leave a Response

(0 comments)

Alphabetical Listing

Tutorials

Ajax Tutorials

Ajax

Buttons

Cookies

CSS

Forms

Games

Generators

Image Effects

Math Related

Miscellaneous

Multimedia

Navigation

Page Details

Password

Snippets

Text Effects

Time & Date

User Details