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>