Circle area and circumference program with HTML, javascript & jQuery


Demo

<iframe height='265' scrolling='no' title='oewPMR' src='//codepen.io/fastfoodcoding/embed/oewPMR/?height=265&theme-id=light&default-tab=result&embed-version=2' frameborder='no' allowtransparency='true' allowfullscreen='true' style='width: 100%;'>See the Pen <a href='https://codepen.io/fastfoodcoding/pen/oewPMR/'>oewPMR</a> by fastfoodcoding (<a href='https://codepen.io/fastfoodcoding'>@fastfoodcoding</a>) on <a href='https://codepen.io'>CodePen</a>. </iframe>

Code

<html>

<head>
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js">
  </script>
  <script>
    $(document).ready(function() {
      //Area
      $("#area").click(function() {
        var a = $("#radius").val();
        $("#result").val((22 / 7) * (+a) * (+a));
      });
      //Circumference
      $("#circumference").click(function() {
        var a = $("#radius").val();
        $("#result").val((2) * (22 / 7) * (+a));
      });
    });
  </script>
</head>

<body>
  <div>
    Enter radius value:
    <input type="text" id="radius"> <br><br>
    <button type="button" id="area"> Area </button>
    <button type="button" id="circumference"> Circumference </button> <br><br><br> Result:
    <input type="text" id="result">
  </div>
</body>
</html>