title: Pythagorean Triangle Calculator
body: <p>I wanted to make a program that can calculate a triangle's missing side using Pythagoras's Theorem. Also the program should draw the triangle to scale either as a svg or on a canvas (It doesn't really matter).
  It works for some triangles (like 3,4,5), but others it messes up some lengths (mainly that of side a). Does someone know how to fix this? Please?<br/>
  <a href="https://codepen.io/Tim-vanH/pen/aLRZrR" rel="nofollow noreferrer">Code Pen</a></p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>//Following three functions only post the side lengths
  function findC(){
    var a = document.getElementById("a1").value;
    var b = document.getElementById("b1").value;
    var c = Math.sqrt(Math.pow(a, 2) + Math.pow(b, 2));
    document.getElementById("outputC").innerHTML="Side A= "+a+ ", Side B= "+b+ ", Side C= "+c;
  }
  
  function findB(){
    var a = document.getElementById("a2").value;
    var c = document.getElementById("c2").value;
    var b = Math.sqrt(Math.pow(c, 2) -  Math.pow(a, 2));
    document.getElementById("outputB").innerHTML="Side A= "+a+ ", Side B= "+b+ ", Side C= "+c;
  }
  function findA(){
    var b = document.getElementById("b3").value;
    var c = document.getElementById("c3").value;
    var a = Math.sqrt(Math.pow(c, 2) -  Math.pow(b, 2));
    document.getElementById("outputA").innerHTML="Side A= "+a+ ", Side B= "+b+ ", Side C= "+c;
  }
  
  //Following three functions draw the triangles
  function drawSVGC() {
      var a = document.getElementById("a1").value;
      var b = document.getElementById("b1").value;
      var c = Math.sqrt(Math.pow(a, 2) + Math.pow(b, 2)); //Calculates sideC
     //To make the drawings larger so that they are visible
      if(a&lt;20){
         a = a*10;
      }
      if(b&lt;20){
        b = b*10;
      }
      if(c&lt;20){
        c = c*10;
      }   
    var x3 = a;
      var y3 = b;
      var ox = 45 - (a / 2);
      var oy = 45 + (y3 / 2);
      var points = [
          [ox, oy].join(','),
          [a + ox, oy].join(','),
          [ox + x3, oy - y3].join(',')
          ].join(' ');
      document.getElementById('triangleC').setAttribute('points', points);
  }
  
  var myBtn1 = document.getElementById('btn1');
  myBtn1.addEventListener('click', function(event) {
      drawSVGC();
    });
  
  function drawSVGB() {
      var a = document.getElementById("a2").value;
      var c = document.getElementById("c2").value;
      var b = Math.sqrt(Math.pow(c, 2) - Math.pow(a, 2)); //Calculates sideB  
      //To make the drawings larger so that they are visible
      if(a&lt;20){
         a = a*10;
      }
      if(b&lt;20){
        b = b*10;
      }
      if(c&lt;20){
        c = c*10;
      }   
    var x3 = a;
      var y3 = b;
      var ox = 45 - (a / 2);
      var oy = 45 + (y3 / 2);
      var points = [
          [ox, oy].join(','),
          [a + ox, oy].join(','),
          [ox + x3, oy - y3].join(',')
          ].join(' ');
      document.getElementById('triangleB').setAttribute('points', points);
  }
  
  var myBtn2 = document.getElementById('btn2');
  myBtn2.addEventListener('click', function(event) {
      drawSVGB();
    });
  
  function drawSVGA() {
      var b = document.getElementById("b3").value;
      var c = document.getElementById("c3").value;
      var a = Math.sqrt(Math.pow(c, 2) - Math.pow(b, 2));//Calculates sideA
      //To make the drawings larger so that they are visible
      if(a&lt;20){
         a = a*10;
      }
      if(b&lt;20){
        b = b*10;
      }
      if(c&lt;20){
        c = c*10;
      }   
    var x3 = a;
      var y3 = b;
      var ox = 45 - (a / 2);
      var oy = 45 + (y3 / 2);
      var points = [
          [ox, oy].join(','),
          [a + ox, oy].join(','),
          [ox + x3, oy - y3].join(',')
          ].join(' ');
      document.getElementById('triangleA').setAttribute('points', points);
  }
  
  var myBtn3 = document.getElementById('btn3');
  myBtn3.addEventListener('click', function(event) {
      drawSVGA();
    });</code></pre>
  <pre class="snippet-code-css lang-css prettyprint-override"><code>body {
      background-color:#f0f0f0;
      font-family:verdana,arial,helvetica,sans-serif;
      font-size:16px;
   }
  div {
      width:380px;
      padding:20px;
      border:1px solid #999;
      margin:20px auto;
      background-color:#fff;
      box-shadow:10px 10px 20px #666;
      font-size:100;
      text-align:center;
   }
  div {
      margin:10px 0;
      float: left;
   }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;body&gt;
  &lt;div&gt;
    &lt;h2&gt;Calculating C&lt;/h2&gt;
    &lt;input id="a1" type="number" placeholder="side a"/&gt;
    &lt;input id="b1" type="number" placeholder="side b"/&gt;
    &lt;br/&gt;
    &lt;button onclick="findC()"&gt;Find C&lt;/button&gt;
    &lt;p id="outputC"&gt;&lt;/p&gt;
    
    &lt;svg width="200" height="200"&gt;
      &lt;polygon id="triangleC"/&gt;
    &lt;/svg&gt;
    &lt;button id="btn1" onclick="drawSVGC()"&gt;Draw&lt;/button&gt;
   &lt;/div&gt;
   
   &lt;div&gt;
     &lt;h2&gt;Calculating B&lt;/h2&gt;
    &lt;input id="c2" type="number" placeholder="side c"/&gt;
    &lt;input id="a2" type="number" placeholder="side a"/&gt;
    &lt;br/&gt;
    &lt;button onclick="findB()"&gt;Find B&lt;/button&gt;
    &lt;p id="outputB"&gt;&lt;/p&gt;
     
    &lt;svg width="200" height="200"&gt;
      &lt;polygon id="triangleB"/&gt;
    &lt;/svg&gt;
    &lt;button id="btn2" onclick="drawSVGB()"&gt;Draw&lt;/button&gt;
   &lt;/div&gt;
    
    &lt;div&gt;
     &lt;h2&gt;Calculating A&lt;/h2&gt;
    &lt;input id="c3" type="number" placeholder="side c"/&gt;
    &lt;input id="b3" type="number" placeholder="side b"/&gt;
    &lt;br/&gt;
    &lt;button onclick="findA()"&gt;Find A&lt;/button&gt;
    &lt;p id="outputA"&gt;&lt;/p&gt;
      
    &lt;svg width="200" height="200"&gt;
      &lt;polygon id="triangleA"/&gt;
    &lt;/svg&gt;
    &lt;button id="btn3" onclick="drawSVGA()"&gt;Draw&lt;/button&gt;
   &lt;/div&gt;
  &lt;/body&gt;</code></pre>
  </div>
  </div>
  </p>