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;
 }      
}); 

Palindrome solution type2 using array_reverse

In this tutorial i created an function that will tell if a given word is palindrome or not this is another solution to palindrome using array_reverse

 
 palindrome('axa');
 function palindrome($input){ 
    $split = str_split($input); //make the input array
    $reverse = array_reverse($split); // reverse the array
    foreach($reverse as $char){
      $newChar .= $char; //append the letters
    } 
    if($input === $newChar){
      echo "Palindrome";
    }else{
      echo "Not Palindrome";
    }
 }

the result will look like this

Palindrome

note that "axa" is the word that i want to check if it is palindrome or not, you can change it to the one you desired to check.

Palindrome solution for php

In this tutorial i created an function that will tell if a given word is palindrome or not

 
 palindrome2('axa');
 function palindrome2($input){ 
    $split = str_split($input); //make the input array
    $count = strlen($input) - 1;//minus 1 bec array start at 0
    for($x=$count;$x >= 0;$x--){
      $newChar .= $split[$x]; //append the letters
    }  
    if($input === $newChar){
      echo "Palindrome";
    }else{
      echo "Not Palindrome";
    }
 }

the result will look like this

Palindrome

note that "axa" is the word that i want to check if it is palindrome or not, you can change it to the one you desired to check.

Enable tooltip and popover in bootstrap

By default, tooltip and popover in bootstrap is not yet enabled. to enable this
We just need to add this code anywhere to our html to make tooltip and popover work.

Select default dropdown value using jquery

If we want set our dropdowns default value using jquery, we can use .val() jquery function
This is an alternative to the static html selected="selected" if we want to set an default value when our page load dynamically.

Html

   
    -
    
   
    test1
    
   
    test2
            

Jquery

  $('select.sampleClass').val('test2');