ITSourceCode.com

We Exist to Provide 100% Free Source Code and Tutorials

Custom Search

MDAS Calculation with jQuery

MDASjQUERYPIToday, I will teach you on how to create the MDAS Calculation with jQuery. This project provides the following processes such as Multiplying, Dividing, Adding and Subtracting. It allows the users to input a number and calculate according to their desire.

Below are the step by step process that you should do.

 

  • Create a page in name it “index.html”.
  • Create a style for the layout of your design.
<!-- bootstrap plugins -->
<link href="css/bootstrap.min.css" rel="stylesheet" type="text/css"> 
<style type="text/css">
.container{ 
    width: 30%;  
    padding: 10px; 
  }
.container  .row{
  padding-bottom: 3px;
  
  }
.container  #output {  
  display: none; 
  background: #428bca;
  color: #fff; 
  padding: 2px 0 0 2px;
  font-size:30px;
   border: 1px solid transparent;
  border-radius: 4px;
  -webkit-box-shadow: 0 1px 1px rgba(0, 0, 0, 0.099);
        box-shadow: 0 3px 3px rgba(0, 0, 0, 0.099);

  }
.container #btn {
  padding-bottom: 2px;
  }
.container #btn > button {
  width: 90px;
}
</style>
  • Do these following codes for the design of your page.
<div class="container">
<div class="page-header"><h1>MDAS Calculation</h1></div>
<div class="box col-md-10">
  <div class="row">
        <div class='col-sm-10'>
            <div class="form-group">
            <label class="col-md-3">Input1</label>
                <div class='input-group date col-md-9'>
                    <input type='text' class="form-control"  id="input1" /> 
                </div>
            </div>
        </div>
    </div> 
    <div class="row"> 
        <div class='col-sm-10'>
            <div class="form-group">
            <label class="col-md-3">Input2</label>
                <div class='input-group date col-md-9'>
                    <input type='text' class="form-control" id="input2" /> 
                </div>
            </div>
        </div> 
    </div>
     <div class="row">
        <div class='col-sm-10'>
            <div class="form-group pull-right"> 
              <div id="btn">
                <button type='submit' id="M"   class="btn btn-primary " >Multiply</button>
                <button type='submit' id="D"   class="btn btn-primary " >Divide</button> 
              </div>
               <div id="btn">
                <button type='submit' id="A"  class="btn btn-primary " >Add</button>
                <button type='submit' id="S"   class="btn btn-primary " >Subtract</button>
              </div> 
            </div>
        </div> 
    </div>
     <div class="row">
        <div class='col-sm-12'>
            <div  id="output" class="form-group">
                     
            </div>
        </div> 
    </div>
</div> 
</div>
  • Create a script for the MDAS Calculation.
<!-- jQuery plugins -->
<script type="text/javascript" src="jquery/jquery.min.js"></script>   
  <script type="text/javascript"> 
  $(document).ready( function(){ 
/* set the click event handler of a button */
    $('button').click(function(){
      /*get the given number in the textbox*/
      var n1 = document.getElementById("input1").value;
      var n2 = document.getElementById("input2").value; 
      /*set a variable for displaying the result*/ 
      var output 
      /*set the current id of a button*/ 
      var id = this.id;
     /*create a condition for the corresponding  formula*/
      if (id=='M'){
        output =parseFloat(n1)*parseFloat(n2);
        output = 'Output<br/>' + n1 + '*' + n2 + '=' + output;
      }else if(id=='D'){
        output =parseFloat(n1)/parseFloat(n2);
        output = 'Output<br/>' + n1 + '/' + n2 + '=' + output;
      }else if(id=='A'){
        output =parseFloat(n1)+parseFloat(n2);
        output = 'Output<br/>' + n1 + '+' + n2 + '=' + output;
      }else if(id=='S'){
        output =parseFloat(n1)-parseFloat(n2);
        output = 'Output<br/>' + n1 + '-' + n2 + '=' + output;      
      }
      /* Statement */ 
      $("#output").hide();
      $("#output").fadeIn(900,0);
      $("#output").html(function() { 
            /*validating the result*/
            if(n1=='' || n2==''){
              output = 'Please enter number!';
            } 
            /*display the validated result*/        
           return   output;
       });     
    })
  })
</script>

 

For all students who need programmer for your thesis system or anyone who needs a sourcecode in any programming languages.  You can contact me @ :

 

Email – jannopalacios@gmail.com

Mobile No. – 09305235027 – tnt

 

Download Sourcecode

Facebook Comments

Check Your Domain Ranking

Leave a Reply

Your email address will not be published. Required fields are marked *

ITSourceCode.com © 2016 Frontier Theme

Subscribe For Latest Updates

Signup for our newsletter and get notified when we publish new articles for free!