In this article I would like to share with you a sample program to solve the area and circumference of the circle in a given value by the user using Javascript as my programming language. What is good about this program I included a function to check if the value given by the user is numeric or not and a button that enables the user to clear the text box.
If you have some questions please send me an email at jakerpomperada@yahoo.com and jakerpomperada@gmail.com.
Program Listing
<html>
<title> Area and Circumference of the Circle Solver </title>
<style>
body {
font-size:20px;
font-family:arial;
color:blue;
}
label{
display: table-cell;
text-align: justify;
}
input {
display: table-cell;
}
div.row{
display:table-row;
}
</style>
<script language="JavaScript">
function solve_circle(){
var radius =document.getElementById("value1").value;
if (isNaN(radius)|| (radius <0 ) || (radius =="")){
alert (" Enter a valid number! Try Again... ");
document.getElementById("value1").value = "";
document.getElementById("value1").focus();
}
else {
solve= (radius * radius * Math.PI);
circumference = (2 * radius * Math.PI);
document.getElementById("circle_area").value= solve.toFixed(2)
document.getElementById("circum_area").value= circumference.toFixed(2)
}
}
function clear_me() {
document.getElementById("circle_area").value="";
document.getElementById("circum_area").value="";
document.getElementById("value1").value="";
document.getElementById("value1").focus();
}
</script>
<body style='background-color:lightgreen'>
<div style='width:1100px;margin:auto'>
<br> <h1 align="center"> Area and Circumference of the Circle Solver</h2>
<br>
<div class="row"><label> Enter a Number :</label> <input type="text" name="value1" id="value1" value="" size=5/> </div>
<br><button onclick="solve_circle();"
title="Click here to find the area and circumference of the circle.">
Find Area of the Circle</button>
<button onclick="clear_me();" title="Click here to clear text fields.">
Clear</button>
<br><br><br>
<div class="row"><label> The area of the circle is </label> <input id="circle_area" size="10" readonly> <br> </div>
<div class="row"><label> The circumference of the circle is </label> <input id="circum_area" size="10" readonly></div> <br>
<br>
</body>
</html>
