In our previous post, we talked about how to build a calculator with html and JavaScript which could find the sum, difference, multiple, square and square root of a set of given numbers. Incase you missed out on that post, you can View how to build a calculator here.

Now this article is different, we’ll be building a special kind of calculator which is the Pythagorean theorem calculator. This calculator gets the values of any two given sides of a right angled triangle and returns the missing side all with the clock of some buttons. Here’s a quick preview of our calculator’s demo.

Demo Pythagorean calculator with JavaScript
Our demo Pythagorean calculator

The Pythagorean theorem.

The Pythagorean theorem is a mathematical principle used to find the value of any side of a right angled triangle, provided the first two sides are given. It’s mathematical principle is as follows.

Pythagorean theorem equation.

C²= A² + B²,
A²= C² - B²,
B²= C² - A².

The three equations above are used in finding the three sides of a given right angled triangle, provided that side “C” is the hypotenuse (longest sides) and sides “A” and “B” are the adjacent sides forming the 90 degree angle.

You might like How to create a to-do list with HTML and JavaScript.

A right angled triangle showing sides A, B and C
A right angled triangle showing it’s three sides.

Now that we’re done with the mathematical aspects of the Pythagorean theorem, let’s move straight to how to build your Pythagorean calculator with JavaScript.

Pythagorean theorem solver with JavaScript.

Now how do we build this calculator? Let’s talk about our algorithm here. We first create our display screen and our side screen with the read only html input tag, then we create all our html buttons and assign each to a function using JavaScript. Then using our Pythagorean theorem equation we can calculate these user inputs with the JavaScript “Math” object. Let’s get into coding shall we.

Also see How to create a quiz website with JavaScript.

  <div id="container">

//Our side screen.

<input id="side" value="Select side"type="text" width="20%" readonly>

//Our main screen.

<input type="text" id="display" readonly style="width:100%;">

//Our input buttons.

<p class="first">

//First row.

<input class="number" type="button" value="9" id="btn9" onclick="btn('9')"/>

<input class="number" type="button" value="8" id="btn8" onclick="btn('8')"/>

<input class="number" type="button" value="7" id="btn7" onclick="btn('7')"/>

<input class="operation" type="button" value="cls" id="btnclear" onclick="clr()"/>

</p>

//Second row.

<p class="second">

<input class="number" type="button" value="6" id="btn6" onclick="btn('6')"/>

<input class="number" type="button" value="5" id="btn5" onclick="btn('5')"/>

<input class="number" type="button" value="4" id="btn4" onclick="btn('4')"/>

<input type="button" value="set A" onclick="setA()">
</p>


//Third row.

<p class="third">

<input class="number" type="button" value="3" id="btn3" onclick="btn('3')"/>

<input class="number" type="button" value="2" id="btn2" onclick="btn('2')"/>

<input class="number" type="button" value="1" id="btn1" onclick="btn('1')"/>

<input type="button" value="set B" onclick="setB()">

</p>

//Fourth row.

<p class="fourth">

<input type="button" class="number" value="0" id="btn0" onclick="btn('0')"/>

<input type="button" class="operation" value="save" id="btnequal" onclick="equal()"/>

<input type="button" value="." class="operation" onclick="btn('0')">

<input type="button" value="set C" onclick="setC()">

</p>
// The solve button
<button onclick="solve()" id="solvebtn" >solve pythagoras</button>

Now that we’ve created all our buttons for the HTML, let’s move directly to our JavaScript code to make these buttons actually work.

Note: we’re eliminating the css part for more simplicity. You can add your own custom css or bootstrap code improve the design.

JavaScript Pythagorean source code.

//define your display screen.

var display= document.getElementById ("display");

//Now let's create variables to store our three sides.

var a,b,c;

//the button function which writes values to be main screen.

function btn(val){

display.value+=val;


}

//Selecting our side screen.

var fxn= document. getElementById ("side");

//our functions that stores side A, B and C.

function setA(){
fxn.value= "Side A";
}

function setB(){
fxn.value= "Side B";
}

function setC(){
fxn.value= "Side C";
}

//the clear all values function.

function clr(){
display.value="";
fxn.value="Select side"
}


//The save function.

function equal(){
if(fxn.value!="Select side" && display.value!=""){
if(fxn.value=="Side A"){
a=display.value;

}
if(fxn.value=="Side B"){
b= display.value;
}

if(fxn.value=="Side C"){
c= display.value;
}
clr();
}
}


//The solve function.

function solve(){

if(c==null || c==""){
var asquare= Math.pow(a,2);
var bsquare= Math.pow(b,2);
var sum= asquare+bsquare;
sqrtc= Math.sqrt(sum);

//Let's display our answers on the screen.

display.value= "the hypotenuse is "+ sqrtc;

fxn.value="A:"+a+", B:"+b;
}

else if(a==null || a==""){
csquare=Math.pow(c,2);

bsquare=Math.pow(b,2);

sum=csquare-bsquare;

sqrta= Math.sqrt(sum);


//Display our answers on the screen.
display.value="Side A is "+ sqrta;
fxn.value="B:"+b+", C:"+c;
}

else if(b=="" || b==null){

csquare=Math.pow(c,2);

asquare=Math.pow(a,2);

sum=csquare-asquare;

sqrtb= Math.sqrt(sum);

//display our answer on the screen.

display.value="Side B is "+ sqrtb;
fxn.value="A:"+a+", C:"+c;
}
else{

//displays an error message if none of the conditions are met.

fxn.value="Error";
}

//Clears the values for a, b and c.

a="";
b="";
c="";
}



</script>

Now let me take some time to explain the save and the solve function to you. When the save button is clicked, it first checks if the main display is not empty, it also checks if the side displays value is “Select side”. If these two Conditions are met, then the choose side in the side display screen will have a value as the digit in the main screen. The same process is repeated to get the second value of the triangle.

Now after the user has selected his given sides and stored the values, he now clicks the “solve Pythagoras” button and the solve function is called which I’m going to explain here.

The solve function first gets your values of the given sides. Then uses if else statements to try determine the sides you’re given if it’s the hypotenuse or just adjacent sides. Once the function is called, it takes the values of the given sides, and squares them using the Math.pow() functions.

After they are squared, if the C side “hypotenuse” was given, it takes that squared value of C and subtract the squared value of A or B from it, depending on what side it has been given and then finds the squared roots of the result. It later displays the final answer on the main screen and the given sides on the side screen.

Bonus:

How to draw a right angled triangle using the HTML canva element.

The HTML:

  <canvas width="400px" height="100px" id="mycanvas"> 
</canvas>

The JavaScript:

var cans= document.querySelector("#mycanvas");

var ctx = cans.getContext('2d');

ctx.beginPath();
ctx.moveTo(75,75);
ctx.lineTo(10,75);
ctx.lineTo(10,25);
ctx.fill();

Hope you enjoyed the article. Feel free to leave a comment if you have any problems with the code below. You can follow us on social media using any of the links below

You can also send us a private email at hello@charmingdesk.com.ng for a more private reply.

Your favorite web developers. Kudos!


vic okeke

I'm just a web developer hoping to help out junior developers in algorithms for their projects.

0 Comments

Leave a Reply

Your email address will not be published. Required fields are marked *