lkarch.org/tools/mathisfun/www.mathsisfun.com/geometry/images/heron.js

function heronMain(){this.version='0.61';w=600;h=280;var s='';s+='<div style="position:relative; width:'+w+'px; height:'+h+'px; border: 1px solid blue; border-radius: 10px;  margin:auto; display:block;">';s+='<div style="width: 0; height: 0; border-left: 120px solid transparent; border-right: 120px solid transparent; border-bottom: 200px solid lime; position:absolute; left:300px; top:3px;">';s+='</div>';s+='<div style="font: bold 26px Arial; color: gold; position:absolute; left:10px; top:10px;">Heron\'s Formula</div>';s+='<div style="font: 16px Arial; color: gold; position:absolute; left:10px; top:40px;">Find a Triangle\'s Area from its Sides</div>';s+='<div id="heron1" style="font: 16px Arial; color: blue; position:absolute; left:10px; top:90px; width:280px;">abc</div>';s+='<div id="heron2" style="font: 13px Arial; color: darkblue; position:absolute; left:10px; top:190px; width: 320px;">def</div>';s+='<div id="heronflds" style="text-align: center; position:absolute; left:0; top:0;">';s+='</div>';s+='<div style="font: 13px Arial; color: white; text-align: center; position:absolute; left:360px; top:105px; width: 120px;">Area is</div>';s+='<div id="area" style="font: bold 28px Arial; color: white; text-align: center; position:absolute; left:360px; top:120px; width: 120px; "></div>';s+='<div id="copyrt" style="font: 7pt arial; font-weight: bold; color: #6600cc; position:absolute; left:5px; bottom:3px;">&copy; 2018 MathsIsFun.com  v'+this.version+'</div>';s+='</div>';document.write(s);init();go();}
function init(){var s='';s+=getFieldsHTML();var div=document.getElementById('heronflds');div.innerHTML=s;this.ans1=document.getElementById('heron1');this.ans2=document.getElementById('heron2');}
function go(){var a=+document.getElementById('side0').value;var b=+document.getElementById('side1').value;var c=+document.getElementById('side2').value;this.ans1.innerHTML='';this.ans2.innerHTML='';if(validTriangleQ(a,b,c)){doAngles(a,b,c);heron(a,b,c);}else{document.getElementById('area').innerHTML='';document.getElementById('angle2').innerHTML='';document.getElementById('angle0').innerHTML='';document.getElementById('angle1').innerHTML='';}}
function getFieldsHTML(){var s='';var xys=[[240,80,'a',3,340,60],[350,210,'b',4,400,170],[480,80,'c',5,280,170]];for(i=0;i<3;i++){var xy=xys[i];s+='<div id="ratio'+i+'" style="font: 16px Arial; z-index:3; text-align: right; height:30px; ">';s+='<span style="color: #0000ff; text-align:center; font: 18px Arial; width:35px; position:absolute; left:'+xy[0]+'px; top:'+xy[1]+'px;">'+xy[2]+':</span>';s+='<input type="text" id="side'+i+'" style="color: #0000ff; background-color: #eeffee; text-align:center; font: 20px Arial; width:80px; border-radius: 10px;  position:absolute; left:'+(xy[0]+30)+'px; top:'+xy[1]+'px;" value="'+xy[3]+'" onKeyUp="go()" autocomplete="off" />';s+='<span id="angle'+i+'" style="color: #000000; text-align:center; font: 16px Arial; width:100px; position:absolute; left:'+(xy[4]+30)+'px; top:'+xy[5]+'px;" value="" onKeyUp="go()" >test</span>';s+='</div>';}
return s;}
function heron(a,b,c){var s1='<i>Classic Heron\'s Formula:</i><br/>';var s=(a+b+c)/2;s1+="s = (a+b+c)/2 = "+s+"<br/>";var Area=Math.sqrt(s*(s-a)*(s-b)*(s-c));s1+="Area = &radic;( s(s-a)(s-b)(s-c) )<br/>";s1+="Area = "+Area;document.getElementById('heron1').innerHTML=s1;s2='<i>Variation with less rounding error:</i><br/>';var temp;if(a<b){temp=a;a=b;b=temp;}
if(b<c){temp=b;b=c;c=temp;}
if(a<b){temp=a;a=b;b=temp;}
s2+="Sides in Descending Order: "+a+","+b+","+c+"<br/>";area=(1/4)*Math.sqrt((a+(b+c))*(c-(a-b))*(c+(a-b))*(a+(b-c)));s2+="Area = &radic;((a+(b+c))(c-(a-b))(c+(a-b))(a+(b-c)))/4<br/>";s2+="Area = "+Area;document.getElementById('heron2').innerHTML=s2;area=area.toPrecision(7);document.getElementById('area').innerHTML=area;}
function doAngles(a,b,c){var AngA=Math.acos((b*b+c*c-a*a)/(2*b*c))*180/Math.PI;var AngB=Math.acos((c*c+a*a-b*b)/(2*c*a))*180/Math.PI;var AngC=Math.acos((a*a+b*b-c*c)/(2*a*b))*180/Math.PI;document.getElementById('angle1').innerHTML=(Math.round(AngA*10000)/10000)+"&deg;";document.getElementById('angle0').innerHTML=(Math.round(AngB*10000)/10000)+"&deg;";document.getElementById('angle2').innerHTML=(Math.round(AngC*10000)/10000)+"&deg;";}
function validTriangleQ(a,b,c){var OKQ=true;if(a<0)OKQ=false;if(b<0)OKQ=false;if(c<0)OKQ=false;if(!OKQ){this.ans1.innerHTML="Not a Triangle if any side is less than 0";return false;}
if(a>(b+c))OKQ=false;if(b>(a+c))OKQ=false;if(c>(a+b))OKQ=false;if(!OKQ){this.ans2.innerHTML="Not a Triangle when one side is bigger than the other two combined";return false;}
return true;}