Real time calculator using jquery

In this tutorial, i will show you how i created a realtime calculator using jquery
This is the specs of our calculator
-on type, the calculator must automatically solve the math equation.
-when we click the operators, it must automatically calculate the inputed numbers in the field
-there must be validation, only numbers is required.
Im going to show first the live example.
first we created the html

 
   
 
     
    
  +
   
   = 
  
 
       
 

  +
  -
  x
  /     
 
 

Then the javascript
We will capture the input of the user when he/she types on the field

 $( ".1st" ).keyup(function() {
  var1s = $( ".1st" ).val(); //get the value of input      
  if(var1s.match(/^\d+$/)){
   $('.messageError').html(''); //validate if numbers
   sums();      
  }else{
   $('.messageError').html('sorry number only for the first value'); //throws warning if error      
  }     
 });
 
 $( ".2nd" ).keyup(function() {
  var2s = $( ".2nd" ).val();      
  if(var2s.match(/^\d+$/)){
   $('.messageError').html('');
   sums();      
  }else{
   $('.messageError').html('sorry number only for the second value');      
  }     
 });     
 

Next is we will capture the event when an user clicks on our operator

$( ".add" ).click(function() {     
  $('.operator').html('+'); 
  sums();      
 });
 $( ".minus" ).click(function() {
  $('.operator').html('-'); 
  sums();     
 });
 $( ".times" ).click(function() {
  $('.operator').html('x');
  sums();     
 });
 $( ".divide" ).click(function() {
  $('.operator').html('/');
  sums();     
});

We will create an function for sum(), this will calculate the math equation.

 function sums(){
  var1 =  parseInt($( ".1st" ).val()); 
  var2 =  parseInt($( ".2nd" ).val()); 
  operator = $( ".operator" ).html();   
  sum = (var1 + var2);
  switch (operator) { 
   case '+': 
    sum = (var1 + var2);
    break;
   case '-': 
    sum = (var1 - var2);
    break;
   case 'x': 
    sum = (var1 * var2);
    break;  
   case '/': 
    sum = (var1 / var2);
    break;
   default:
    sum = (var1 + var2);
  }     
   $( ".answer" ).html(sum);
   
   $(".answer").each(function(c, obj){
     $(obj).text(addCommas(parseFloat($(obj).text()).toFixed(2)));
   });    
 }

We also add addCommas() function for auto conversion of commas ex. 5,000.00

 
 function addCommas(nStr)
 {
    nStr += '';
    x = nStr.split('.');
    x1 = x[0];
    x2 = x.length > 1 ? '.' + x[1] : '';
    var rgx = /(\d+)(\d{3})/;
    while (rgx.test(x1)) {
    x1 = x1.replace(rgx, '$1' + ',' + '$2');
    }
    return x1 + x2;
 } 

And then the is the overall script when combined

$( document ).ready(function() {
 $( ".1st" ).keyup(function() {
  var1s = $( ".1st" ).val(); //get the value     
  if(var1s.match(/^\d+$/)){
   $('.messageError').html('');//validate if numbers
   sums();      
  }else{
   $('.messageError').html('sorry number only for the first value');//throws warning if error     
  }     
 });
 
 $( ".2nd" ).keyup(function() {
  var2s = $( ".2nd" ).val();      
  if(var2s.match(/^\d+$/)){
   $('.messageError').html('');
   sums();      
  }else{
   $('.messageError').html('sorry number only for the second value');      
  }     
 });     
 
   
 $( ".add" ).click(function() {     
  $('.operator').html('+'); 
  sums();      
 });
 $( ".minus" ).click(function() {
  $('.operator').html('-'); 
  sums();     
 });
 $( ".times" ).click(function() {
  $('.operator').html('x');
  sums();     
 });
 $( ".divide" ).click(function() {
  $('.operator').html('/');
  sums();     
 });    
 
 function sums(){
  var1 =  parseInt($( ".1st" ).val()); 
  var2 =  parseInt($( ".2nd" ).val()); 
  operator = $( ".operator" ).html();   
  sum = (var1 + var2);
  switch (operator) { 
   case '+': 
    sum = (var1 + var2);
    break;
   case '-': 
    sum = (var1 - var2);
    break;
   case 'x': 
    sum = (var1 * var2);
    break;  
   case '/': 
    sum = (var1 / var2);
    break;
   default:
    sum = (var1 + var2);
  }     
   $( ".answer" ).html(sum);
   
    $(".answer").each(function(c, obj){
     $(obj).text(addCommas(parseFloat($(obj).text()).toFixed(2)));
     });    
 }
 
 function addCommas(nStr)
 {
    nStr += '';
    x = nStr.split('.');
    x1 = x[0];
    x2 = x.length > 1 ? '.' + x[1] : '';
    var rgx = /(\d+)(\d{3})/;
    while (rgx.test(x1)) {
    x1 = x1.replace(rgx, '$1' + ',' + '$2');
    }
    return x1 + x2;
 }      
});