All in One Area Calculator Using Simple HTML Code.

Finding areas of different shapes were difficult task ,as it requires to remember many type of formulaes. So to make our task easy we can look how to make a calculator which can calculate Areas of many types of shapes like rectangle,circle or even triangle. You can calculate Areas without knowing any type of formulae, that too instantly.

Supplies

Supplies needed for this project are:-

1. A "Text editor" , Eg;-NotePad, TextEdit etc...

2. A software to open your html file , you can even use a browser , eg:-chrome browser , firefox browser, Microsoft Edge etc...

Open Any Text Editor.

Firstly, you want to get a text editor for writing the html codes, For example :- Windows Notepad, TextEdit etc... You can use Any text editor of your choice for this purpose.

Entering the Code

Screenshot 2021-12-06 at 11.51.53 PM.png

So, here comes the coding part. So, basically we are going to make an All in one Area calculator, which is capable of computing the area of various shapes such rectangle,triangle, circle etc. So On your text editing App enter the following codes :-

<pre><!DOCTYPE html>
<html>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular.min.js"></script>
<body>
<p><font face = "Verdana" size = "4" color = "#000000">


<div data-ng-app="" data-ng-init="Length_of_the_height_of_the_triangle=0;Length_of_the_base_of_the_triangle=0">


<div data-ng-app="" data-ng-init="Radius.of.Circle=0">
<h2>Circle's Area Calculator</h2>
Radius.of.Circle: <input type="number" ng-model="Radius.of.Circle">
<p><b>Area:</b> {{(22/7)*(Radius.of.Circle*Radius.of.Circle)}}</p>


<div data-ng-app="" data-ng-init="Length=0;Breadth=0">
<h2>Rectangle Area Calculator</h2>
Length: <input type="number" ng-model="Length">
Breadth: <input type="number" ng-model="Breadth">
<p><b>Area:</b> {{(Length*Breadth)}}</p>

<h2>triangle Area Calculator</h2>
Length_of_the_height_of_the_triangle: <input type="number" ng-model="Length_of_the_height_of_the_triangle">
Length_of_the_base_of_the_triangle: <input type="number" ng-model="Length_of_the_base_of_the_triangle">
<p><b>Area:</b> {{((Length_of_the_height_of_the_triangle*Length_of_the_base_of_the_triangle)/2)}}</p>

</div>
</body>
</html>

Just copy and paste the whole code in to your text editor.

Saving the Code (MOST IMPORTANT STEP)

So, after you enter the code make sure to save the file with the file name ending with " .html " . This is the most major step in this tutorial.

Opening the Html

And after the saving the file. Locate to the saved html file on the Files. Then right click on the saved file. Then click the "open with" option. Select any app to open your html calculator, In my case i am choosing chrome browser to open my html file.

Result

Screenshot 2021-12-06 at 11.29.38 PM.png

And that's it. You have your own All in one area calculator. Now you calculate Areas easily without knowing any formulas.

Note:- This calculator requires internet connection.