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>
<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>
</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));
else
alert("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));
else
alert("Error - radius must be whole number greater than 0.");
return false;
}
</script>
</body>
</html>