Data Structure
Networking
RDBMS
Operating System
Java
MS Excel
iOS
HTML
CSS
Android
Python
C Programming
C++
C#
MongoDB
MySQL
Javascript
PHP
Physics
Chemistry
Biology
Mathematics
English
Economics
Psychology
Social Studies
Fashion Studies
Legal Studies
- Selected Reading
- UPSC IAS Exams Notes
- Developer's Best Practices
- Questions and Answers
- Effective Resume Writing
- HR Interview Questions
- Computer Glossary
- Who is Who
How to find area of a triangle using JavaScript?
Overview
The area of the triangle refers to the full area which means the perimeter of the triangle and the inside area. So to calculate the area of a triangle we will be calculating the perimeter of its and then the area but all these was the manual understanding of finding it. So by using JavaScript we will be automating this whole process which means a user only enters the sides of the triangle and to the interface and the area of the triangle will be calculated automatically.
Expression (Heroine's Formula)
The given below shows the heroine's formula expression −
(a+b+c)/2; Math.sqrt(p*((p-a)*(p-b)*(p-c)));
In which the first expression is the formula for finding the semi-perimeter of the triangle in which a, b and c represent the sides of the triangle. The second expression denotes the formula of the area of the triangle in which p is the semi-perimeter of the triangle and a, b and c are sides of the triangle.
Algorithm
Step 1 − Create a HTML file on your text editor and add a HTML boilerplate to the file.
Step 2 − Now create a parent container which contains the three input tags of type text and with the attribute name id with the id name as a, b and c respectively.
<div> <input type="text" id="a"> <input type="text" id="b"> <input type="text" id="c"> </div>
Step 3 − Now create a HTML button with an onclick event with cal() as a function.
<button onclick="cal()">Calculate</button>
Step 4 − Now add the script tag to the body tag of the file.
<script><script>
Step 5 − Now create an arrow function with the name as cal().
cal = () => {)
Step 6 − Now use the HTML DOM property to get the value of the input box.
const a = parseInt(document.getElementById("a").value);
const b = parseInt(document.getElementById("b").value);
const c = parseInt(document.getElementById("c").value);
Step 7 − Now use the triangle formula and convert them to expression with the valid variables.
const sp = (a+b+c)/2; const area = Math.sqrt(sp*((sp-a)*(sp-b)*(sp-c)));
Step 8 − The area of the triangle is calculated and the innerHTML property to display the Output to the screen.
document.getElementById("ans").innerHTML = "Answer: "+area;
Example
In this Example we will be creating the interface by using the HTML and CSS which takes the input of the sides of the triangle and will also use the JavaScript which will create a function to calculate the area of the triangle.
<html>
<head>
<title> Area of triangle </title>
<style>
body{
display: flex;
flex-direction: column;
align-items: center;
gap: 0.5rem;
}
div{
display: flex;
gap: 2rem;
place-content: center;
}
input{
width:3rem;
padding: 0.5rem;
font-weight: 800;
text-align: center;
}
button{
width: 5rem;
}
#ans{
border: 1px dashed black;
background-color: green;
color: white;
}
</style>
</head>
<body>
<h3> Calculate the area of triangle </h3>
<div>
<input type="text" id="a">
<input type="text" id="b">
<input type="text" id="c">
</div>
<button onclick="cal()">Calculate</button>
<p id="ans"></p>
<script>
cal = () => {
const a = parseInt(document.getElementById("a").value);
const b = parseInt(document.getElementById("b").value);
const c = parseInt(document.getElementById("c").value);
const sp = (a+b+c)/2;
const area = Math.sqrt(sp*((sp-a)*(sp-b)*(sp-c)));
document.getElementById("ans").innerHTML = "Answer: "+area;
}
</script>
</body>
</html>
The given below image shows the Output of the above Example, in which when a user loads a feature to its browser he will get an interface as shown below with the three input boxes for the three sides of the triangle and with a calculate button. So when a us-er enters the side of the triangle in their respective input fields and hits the calculate button the value of the input field will be processed in the formula in the backend and will result in the Output on the browser's screen as given below. A user enters the sides of the triangle as 3, 4 and 5 and hits the calculate button he will get the Output as 6.
Conclusion
By creating the above feature this makes it easy for everyone even who does not know the formula of the triangle, as a user just enters the sides value to the interface. The advantage of using this three side value input is that there should be any triangle such as equilateral, isolated or right angle triangle we can calculate the area of any type of triangle. This feature can be integrated in any digital calculator with several other functions also.
1K+ Views
