# How to Create Area of Circle Calculator Using JavaScript?

Hello friends, today I will tell you through this article how you can create area of ​​circle calculator through javascript code.

Circle Calculator Using JavaScript, Calculate of Circle Area by JavaScript, Area of a Circle Formula Using JavaScript, Area of a Circle Calculator Using JavaScript, Circle Area Calculator by js

In this program we will learn how we can get the values ​​of area of ​​a circle in javascript programming.For this, we will input the radius of the circle from the user and get the value of circle area using the formula of circle area.

So I will try to explain you step by step.So friends, let’s go.

Step 1:- Create html Design Form for Calculator of Area Circle.
Step 2:- Calculate Area of Circle Using JavaScript Code.

Step 1:- Create html Design Form for Calculator of Area Circle.

We talk in this step of first step, I will tell you how to design the area of ​​circle through html code.

You can create an html file and you can name it area-of-circle-calculator.html.

```<!DOCTYPE html>
<html>
<title>Create Area of Circle Calculator Using JavaScript?</title>
<body>
<div class="controls">
<div class="row">
<form name="form1">
<div class="col-md-12">
<div class="form-group">
</div>
</div>
<div class="col-md-12">
<button type="button" value="Calculate" onclick="CalculateArea()" class="btn btn-success btn-send">Calculate</button>
</div>
<div class="col-md-12">
<p class="valid"></p>
</div>
</form>
</div>
</div>
</body>
</html>```

Step 2:- Calculate Area of Circle Using JavaScript Code.

We talk in this step of Second step, I will tell you how to write code the area of ​​circle through javascript code.

`<script>function CalculateArea() {var radius = parseInt(document.getElementById('txtRadius').value);if (0 < radius)\$('.valid').html("The area of the circle is " + (radius * radius * Math.PI));elsealert("Error - radius must be whole number greater than 0.");return false;}</script>`

We can also create this code by writing in single html page. The code for this is given below. How to write code in single page.

area-of-circle-calculator.html

`<!DOCTYPE html><html><head><title>Create Area of Circle Calculator Using JavaScript?</title></head><body><div class="controls"><div class="row"><form name="form1"><div class="col-md-12"><div class="form-group"><label for="form_name">Enter the Radius for your Circle: *</label><input type="text" id="txtRadius" class="form-control"></div></div><div class="col-md-12"><button type="button" value="Calculate" onclick="CalculateArea()" class="btn btn-success btn-send">Calculate</button></div><div class="col-md-12"><p class="valid"></p></div></form></div> </div><script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script><script>function CalculateArea() {var radius = parseInt(document.getElementById('txtRadius').value);if (0 < radius)\$('.valid').html("The area of the circle is " + (radius * radius * Math.PI));elsealert("Error - radius must be whole number greater than 0.");return false;}</script></body></html>`