Pythagorean Theorem Calculator Using JavaScript

Demo👀

How do you make a Pythagorean Theorem Calculator Using JavaScript!

1st Step:-

First you open your HTML Editor like - Notepad++,Subline Text,Brackets, etc.

Then start program use Html, Css, Javascript.

2nd Step:-

Copy the html code and then Paste your HTML Editor into <body> here </body> section.

HTML Code :-

<div id="lcol">

  <div id="doc">
  <!-- #BeginEditable "doctext" -->
  <h1>
Pythagorean theorem calculator</h1>
<form name="calcform" autocomplete="off">
  <p>
Hypotenuse (c) calculation:</p>
<table class="calc2">
    <tbody>
<tr>
      <td>Enter leg (a):</td>
      <td><input type="number" name="a1" min="0" step="any" oninput="calc_c()" autofocus></td>
    </tr>
<tr>
      <td>Enter leg (b):</td>
      <td><input type="number" name="b1" min="0" step="any" oninput="calc_c()"></td>
    </tr>
<tr>
      <td>Hypotenuse (c) result:</td>
      <td><input type="number" step="any" name="c1" class="outtext" readonly></td>
    </tr>
</tbody>
  </table>
<p>
Leg (a) calculation:</p>
<table class="calc2">
    <tbody>
<tr>
      <td>Enter leg (b):</td>
      <td><input type="number" name="b2" id="b2" min="0" step="any" oninput="calc_lega()"></td>
    </tr>
<tr>
      <td>Enter Hypotenuse (c):</td>
      <td><input type="number" name="c2" id="c2" min="0" step="any" oninput="calc_lega()"></td>
    </tr>
<tr>
      <td>Leg (a) result:</td>
      <td><input type="number" step="any" name="a2" class="outtext" readonly></td>
    </tr>
</tbody>
  </table>
<p>
Leg (b) calculation:</p>
<table class="calc2">
    <tbody>
<tr>
      <td>Enter leg (a):</td>
      <td><input type="number" name="a3" id="a3" min="0" step="any" oninput="calc_legb()"></td>
    </tr>
<tr>
      <td>Enter hypotenuse (c):</td>
      <td><input type="number" name="c3" id="c3" min="0" step="any" oninput="calc_legb()"></td>
    </tr>
<tr>
      <td>Leg (b) result:</td>
      <td><input type="number" step="any" name="b3" class="outtext" readonly></td>
    </tr>
</tbody>
  </table>
</form>
</div>
</div>

3rd Step:-

Copy the css code and then Paste your HTML Editor into <head> here </head> section.

CSS Code :-

<style type="text/css">
    * {
  -webkit-box-sizing: border-box;
     -moz-box-sizing: border-box;
          box-sizing: border-box;
}
html, body {
  margin:0px;
  padding:0px;
  color:#2213f4;
  font-size:16px;
  font-family:Arial,Verdana,Helvetica,sans-serif;
  border-style:none;
  min-height: 100%;
  background: #f9563a;
}

body {
  line-height:unset !important;
}


@media only screen and (max-width:799px) {
  #header { height:auto; padding:8px 20px; }
  #header a {
    font-size:large;
  }
  #header>div {
    max-width:100%;
    width:auto;
    padding:0;
  }
}


#lcol {
  display:inline-block;
  vertical-align:top;
  width:650px;
  padding-right:10px;
}
#doc {
  padding:0px;
  margin-left:30px;
}
#rcol {
  padding:20px 0px 10px 0px;
  display:inline-block;
  vertical-align:top;
  width:300px;
}


@media only screen and (max-width: 799px) {
  #nav { margin-top:0; }
  #lcol { width:100%; padding-right:0; }
  #rcol { margin-left:0px; width:100%; padding:20px 0; }
  #ban-ad { margin:30px auto; width:300px; }
  .adslot_2 { display:none; }
  .adslot_3 { width:300px; height:250px; margin:auto }
}
@media only screen and (max-width: 799px) and (orientation: portrait) {
  .adslot_1 { max-width:100%; height:100px; }
}
@media only screen and (max-width: 799px) and (orientation: landscape) {
  .adslot_1 { max-width:320px; height:50px; }
}
@media only screen and (max-width: 320px) and (orientation: portrait) {
  .adslot_3 { margin-left:-10px }
}

#rcol li {
  margin-left: -11px;
}
#wrapper H1,H2,H3
{
  font-weight:normal;
}
H1
{
  margin-bottom:4px;
  padding-bottom:0px;
  color: #333333;
}
H1 { font-size: 1.8em; margin-top:0; }
H2 { font-size: 1.4em; letter-spacing: 0px; margin-top: 10px; margin-bottom: 3px;}
H3 { font-size: 1.4em; letter-spacing: 0px; margin-top: 10px; margin-bottom: 3px;}
H4 { font-size: 1.1em; margin-top: 5px; margin-bottom: 2px; font-weight: bold;}
H5 { font-size: 0.9em; margin-top: 5px; margin-bottom: 2px; font-weight: bold;}
H6 { font-size: 1.1em; color: #333333; font-weight: normal; font-style: italic; margin-top: 3px; margin-bottom: 0px; }
#rcol H5 { font-size: 0.9em; font-weight: bold; margin-top: 5px; margin-bottom: 2px; background:#e0e0e0; padding:5px 5px 5px 10px}

input   { font-size: 1em; }
@media only screen and (max-width:799px) {
  .btn { font-size: 1.2em; padding:7px; }
}
@media only screen and (min-width:800px) {
  .btn { font-size: 1.2em; padding:4px; }
}
.intext   { background: #ffffff; padding-left:3px; border:1px inset #eee}  
.outtext  { background: #e0f0e0; padding-left:3px; border:1px solid #ccc}

a:link    { text-decoration: none; color: #083d8d; }
a:visited { text-decoration: none; color: #083d8d; }
a:active  { text-decoration: underline; color: #000000; }
a:hover   { text-decoration: underline; color: #000; }
a:focus     { outline: none; }

.math       { font-family: "Times New Roman"; font-size: 1.6em; padding-left: 6px; font-weight: normal;}
.mathsymbol { font-family: "Times New Roman"; font-size: 1.2em;  font-weight: normal; }
.text       { font-family: "Times New Roman", Times, serif; font-size: 1.2em }
.code       { font-family: "Courier New"; font-size: 1.0em; padding-left: 6px;}
.codebg     { font-family: "Courier New"; font-size: 1.0em; color: #000; background:#f0f0f0; margin-top: 0px; margin-bottom: 0px; padding: 10px; }
.codebg.p   { font-family: "Courier New"; font-size: 1.0em; color: #000; background:#f0f0f0; margin-top: 0px; margin-bottom: 0px;}
p.code      { font-family: "Courier New"; font-size: 1.0em; color: #000; background:#f0f0f0; margin:0px; padding:5px; border-width:1px; border-color:#ccc; border-style:solid; line-height:20px}
p.wcode     { font-family: "Courier New"; font-size: 1.0em; color: #000}
p.tcode   { font-family: "Courier New"; font-size: 1.0em; color: #000; background:#f0f0f0; margin:0px; padding:5px; border-width:1px; border-color:#ccc; border-style:solid; line-height:20px }

.table1 .hov { border: 2px black solid; padding: 4px; }
.table1 .ho2 { border: 2px #707070 solid; padding: 4px; }
.table1 .td  { border: 1px black solid; padding: 5px; }

table.dtable, table.ntable { border: 1px #ccc solid; border-collapse:collapse; padding: 5px;}
table.dtable th, table.dtable td, table.ntable th, table.ntable td  { border: 1px #ccc solid; border-collapse:collapse; padding: 5px; font-weight:normal;}
table.dtable th, table.ntable th { text-align:center }
table.ntable td { text-align:right }

/*table.calc, .calc2 {*/
.calc, .calc2 {
  border-spacing: 0px;
  border-collapse: separate;
  background: #e8e8e8;
  border:1px #ddd solid;
  -moz-border-radius:7px;
  -webkit-border-radius:7px;
  border-radius:7px;
}
table.calc td, .calc2 td {
  padding: 2px;
  border-width: 0px;
  border-style: none;
  background: #e8e8e8;
}

.calc2 select { padding:4px 2px; font-size:1.2em; font-family:Arial, Helvetica, sans-serif }
@media only screen and (max-width: 576px) {
  .calc2 { padding:8px; margin-left:auto; margin-right:auto; }
  .calc2 td { float:left; }
  .calc2 td:nth-child(2) { clear:left; }
  .calc2 tr td:nth-child(3) { padding-top:10px; }
  .calc2 input[type=text], .calc2 input[type=number], .calc2 input[type=url] { width:190px; font-size:x-large; padding-left:3px; }
  .calc2 tr td:nth-child(3) select { margin-top:-8px; }
}
@media only screen and (min-width: 577px) {
  .calc2 { padding:15px; }
  .calc2 tr { line-height:40px; }
  .calc2 input[type=text], .calc2 input[type=number], .calc2 input[type=url] { width:220px; font-size:x-large; padding-left:3px; }
}


@media all and (max-width:1000px) {
   
   #banokbtn { margin-left:0; }
}
  </style>

4th Step:-

Copy the JavaScript code and then Paste your HTML editor into the upper </body>.

Javascript Code:-

 
<script type="text/javascript">
  function setfocus() {
  document.calcform.x.focus();
}
function calc() {
  x = document.calcform.x.value;
  y = calcfunc(x);
  y = roundresult(y);
  document.calcform.y.value = y
}
function calc_a() {
  x = document.calcform2.x.value;
  y = calcfunc_a(x);
  y = roundresult(y);
  document.calcform2.y.value = y
}
function calc3() {
  x1 = document.calcform.x.value;
  x2 = document.calcform.x2.value;
  y = calcfunc(x1,x2);
  y = roundresult(y);
  document.calcform.y.value = y;
}
function calc4() {
  a = document.calcform.x.value;
  b = document.calcform.x2.value;
  c = document.calcform.x3.value;
  d = b*b-4*a*c;
  document.calcform.y0.value = roundresult(d);
  if( d>=0 )
  {
    document.calcform.y1.value = roundresult((-b+Math.sqrt(d))/(2*a));
    document.calcform.y2.value = roundresult((-b-Math.sqrt(d))/(2*a));
  }
  else
  {
    re = roundresult(-b/(2*a));
    im = roundresult(Math.sqrt(-d)/(2*a));
    document.calcform.y1.value = re+' + i'+im;
    document.calcform.y2.value = re+' - i'+im;
  }
  b=-b;
  document.calcform.y3.value = '('+b.toString()+' \xb1 \u221A('+d.toString()+')) / (2\xd7'+a.toString()+')';
}
function calc5() {
  x = document.calcform.x.value;
  y = calcfunc(x);
  y = roundresult(y);
  if( x>0 ) y='\u00B1'+y;
  document.calcform.y.value = y
}
function calc6() {
  x1 = document.calcform.x.value;
  x2 = document.calcform.x2.value;
  val=x2;
  if( x2<0 ) val=-val;
  y = calcfunc(x1,val);
  y = roundresult(y);
  if( x2>0 && (x1/2)==Math.round(x1/2) ) y='\u00B1'+y;
  if( x2<0 ) {
    if( (x1/2)==Math.round(x1/2) )
      y='NaN';
    else
      y=-y;
  }
  document.calcform.y.value = y;
}
function roundresult(x) {
  y = parseFloat(x);
  y = roundnum(y,10);
  return y;
}
function roundnum(x,p) {
  var i;
  var n=parseFloat(x);
  var m=n.toPrecision(p+1);
  var y=String(m);
  i=y.indexOf('e');
  if( i==-1 ) i=y.length;
  j=y.indexOf('.');
  if( i>j && j!=-1 ) 
  {
    while(i>0)
    {
      if(y.charAt(--i)=='0')
        y = removeAt(y,i);
      else
        break;
    }
    if(y.charAt(i)=='.')
      y = removeAt(y,i);
  }
  return y;
}
function roundnum2(x,p) {
  var i;
  var n=parseFloat(x);
  var m=n.toFixed(p);
  var y=String(m);
  i=y.length;
  j=y.indexOf('.');
  if( i>j && j!=-1 ) 
  {
    while(i>0)
    {
      if(y.charAt(--i)=='0')
        y = removeAt(y,i);
      else
        break;
    }
    if(y.charAt(i)=='.')
      y = removeAt(y,i);
  }
  return y;
}
function removeAt(s,i) {
  s = s.substring(0,i)+s.substring(i+1,s.length);
  return s;
}
var gcd = function(a, b) {
    if ( ! b) {
        return a;
    }
    return gcd(b, a % b);
};

function calc_c() {
      var a = document.calcform.a1.value;
      var b = document.calcform.b1.value;
      var c = Math.sqrt(a*a+b*b);
      document.calcform.c1.value = roundresult(c);
    }
    function calc_lega() {
      var b = document.calcform.b2.value;
      var c = document.calcform.c2.value;
      b = parseFloat(b);
      c = parseFloat(c);
      if( b=="" || c=="" ) return;
      if( c<b ) {
        document.getElementById("b2").style.backgroundColor = "#ffdddd";
        document.getElementById("c2").style.backgroundColor = "#ffdddd";
        document.calcform.a2.value = "";
        return;
      }
      document.getElementById("b2").style.backgroundColor = "white";
      document.getElementById("c2").style.backgroundColor = "white";
      var a = Math.sqrt(c*c-b*b);
      document.calcform.a2.value = roundresult(a);
    }
    function calc_legb(){
      var a = document.calcform.a3.value;
      var c = document.calcform.c3.value;
      b = parseFloat(b);
      c = parseFloat(c);
      if( a=="" || c=="" ) return;
      if( c<a ) {
        document.getElementById("a3").style.backgroundColor = "#ffdddd";
        document.getElementById("c3").style.backgroundColor = "#ffdddd";
        document.calcform.b3.value = "";
        return;
      }
      document.getElementById("a3").style.backgroundColor = "white";
      document.getElementById("c3").style.backgroundColor = "white";
      var b = Math.sqrt(c*c-a*a);
      document.calcform.b3.value = roundresult(b);
    }
</script>

How To Download This Project

The first step you click on the ''Download Project'' button you will see a new popup, then click on again the ''Download'' button. Now your project will be downloaded.

1Add

Pythagorean Theorem Calculator Using JavaScript | Beginners

Demo👀

How do you make a Pythagorean Theorem Calculator Using JavaScript!

How To Download This Project

Project source Code

Related Project

Post a Comment

0 Comments

Followers

Followers

Popular Posts

Best 40+ javascript projects for beginners With Source Code

[Best Of] Javascript vs Java Language Difference Between

EMPLOYEE MANAGEMENT SYSTEM USING JAVASCRIPT

1Add

Pythagorean Theorem Calculator Using JavaScript | Beginners

Demo👀

How do you make a Pythagorean Theorem Calculator Using JavaScript!

How To Download This Project

Project source Code

Pythagorean Theorem Calculator Source Code

Related Project

You may like these posts

Post a Comment

0 Comments

Followers

Followers

Social Plugin

Popular Posts

Best 40+ javascript projects for beginners With Source Code

[Best Of] Javascript vs Java Language Difference Between

EMPLOYEE MANAGEMENT SYSTEM USING JAVASCRIPT