Showing posts with label basic math calculator in javascript. Show all posts
Showing posts with label basic math calculator in javascript. Show all posts

Thursday, September 24, 2015

Basic Math Calculator in JavaScript

Learning how to write a code in JavaScript is a wonderful felling why because almost all web applications uses JavaScript in their websites. In this article I will show you how to create a program using JavaScript a simple math calculator that will perform basic arithmetic operations using radio buttons to select addition, subtraction, multiplication and division operations. I also includes error trapping routines to check and block invalid entry values by our user. I hope you will find my work useful in your programming assignments and projects using JavaScript.

If you  have some questions please send me an email at jake.r.pomperada@gmail.com and jakerpomperada@yahoo.com. My mobile number here in the Philippines is 09173084360.







Sample Program Output


Program Listing


<html>
<head>
<style>
body {
  background-color:lightgreen;
  font-family:arial;
  font-size:25px;
  color:blue;
  }
  label {
    float: left;
    width: 30%;
    text-align: left;
    margin-right: 1em;

    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    -o-text-overflow: ellipsis;
}
.form-field-no-caption {
    margin-le


input[type="radio"]{
 float:left;
}
</style>
<meta charset="UTF-8">
<title>Basic Math Calculator</title>

<script type="text/javascript">

 function clear_all()
 {
   document.getElementById('math').value1="";
   document.getElementById('math').value2="";
   document.getElementById('math').value1.focus();
 }


function do_math()
{
     var val1 = document.getElementById('math').value1.value;
     var val2 = document.getElementById('math').value2.value;
  
     var sum = parseInt(val1) + parseInt(val2);
     var subtract = parseInt(val1)  - parseInt(val2);
     var multiply = parseInt(val1) *  parseInt(val2);
     var quotient = parseInt(val1) / parseInt(val2);

      if (val1=="" || val2=="") {
          alert(" Text fields cannot be empty.");
         document.getElementById('math').value1="";
         document.getElementById('math').value2="";
         document.getElementById('math').value1.focus();
          }
        
       else if(document.getElementById('1').checked && val1=="" && val2==""){
          document.getElementById('math').value1="";
          document.getElementById('math').value2="";
          document.getElementById('math').value1.focus();
          }
        else if(document.getElementById('2').checked && val1=="" && val2==""){
          document.getElementById('math').value1="";
          document.getElementById('math').value2="";
          document.getElementById('math').value1.focus();
          }
        else if(document.getElementById('3').checked && val1=="" && val2==""){
          document.getElementById('math').value1="";
          document.getElementById('math').value2="";
          document.getElementById('math').value1.focus();
          }
        else if(document.getElementById('4').checked && val1=="" && val2==""){
          document.getElementById('math').value1="";
          document.getElementById('math').value2="";
          document.getElementById('math').value1.focus();
          }
        else if (document.getElementById('1').checked) {
         alert("The sum of " + val1 + " and " + val2 + " is " + sum+".");
   
         }
     
       else if (document.getElementById('2').checked) {
    alert("The difference of " + val1 + " and " + val2 + " is " + subtract+".");
        }
      
      else if (document.getElementById('3').checked) {
    alert("The product of " + val1 + " and " + val2 + " is " + multiply+".");
        }
      
      else if (document.getElementById('4').checked) {
    alert("The quotient of " + val1 + " and " + val2 + " is " + quotient +".");
        }
     return false;
}
 </script>
 </head>
 <body><br>
 Basic Math Calculator<br><br>
<form id="math" method="post" action="#"  onSubmit="do_math()" > 
<label> Enter first value </label>   <input type="text" name="value1" value="" > <br>
<label> Enter second value </label>  <input type="text" name="value2" value="" > <br>
<br>
Arithmetic Operators
<br><br>
<input type="radio" id="1"  name="optr" value="1"> <label> Addition </label><br>
<input type="radio" id="2"  name="optr" value="2"><label>Subtraction</label> <br>
<input type="radio"  id="3" name="optr" value="3"><label>Multiplication </label><br>
<input type="radio" id="4"  name="optr" value="4"><label>Division</label><br>
 <br>
<input type="submit"  value="Compute" 
title="Click here to see the result."/>
<input type="submit"  onclick="click_all()" value="Clear" 
title="Click here to clear the text fields."/>
</form>
</body>
</html>