Help with creating a mortgage calculator in Jquery

Discussion in 'Web Design and Development' started by bigMAC28, Apr 18, 2013.

  1. macrumors member

    Joined:
    Apr 16, 2012
    Location:
    Chicago
    #1
    Hi guys, its currently 3am and I am stumped. I have to create a loan calculator for class and Im stuck on the most silly part. The Algorithm. The current algorithim i have is

    ;
    Code:
    payment = amt*((int*(int+1)^24)/(1+int)^24)-1;
    I know the problem is with the Powers but i dont really know how to do it in jQuery. Any help would be greatly appreciated! Thanks.

    -Mike
     
  2. macrumors 68000

    SrWebDeveloper

    Joined:
    Dec 7, 2007
    Location:
    Alexandria, VA, USA
    #2
    jQuery is used to get values from form fields or the document in the DOM.
    You use normal Javascript for most basic math functions.

    For jQuery help on selectors (need to know your CSS first):
    http://api.jquery.com/category/selectors/

    To get field values to plug into your formula use $('selector').val:

    Code:
    $('#element_name').val(); 
    or to convert it to an Integer:

    Code:
    var myvalue = parseInt($('#element_name').val());
    Below is a quick example of how to call jQuery and how functions are loaded and nested and a simple math statement just to show you a high elevation view of syntax:

    Code:
    <script type="text/javascript">
    <!--//
    
    $(function(){
    
    var myvalue1 = parseInt($('#element_name1').val());
    var myvalue2 = parseInt($('#element_name2').val());
    
    function calcPrice(){
    
    var rate = 1.5;
    var final_value = rate * myvalue1 * myvalue2;
    
    }
    calcPrice();
    }
    
    });
    
    //-->
    </script>
    Once you get the concepts of how values are called and pieced together in a jQuery function, the math actually is the easy part. I am not helping you with how to calculate a mortgage - but how to do a math operation based on form or document values using jQuery.

    Before responding back (post your relevant code if so) do this first:

    1) Add in print values for each value used in your formula and ensure they're set to what they should be
    2) Use a browser inspection tool and check console log for JS errors to see if something obviously broken or syntax issue (i.e. chrome, or Firebug in FF)
     
  3. thread starter macrumors member

    Joined:
    Apr 16, 2012
    Location:
    Chicago
    #3
    Heres what I have. I think its all correct except for the formula. This is the way the instructor wants me to do it so using other functions are out. Thanks!

    Code:
    <html>
        <head>
            <script src="js/jquery.js"></script>
        </head>
    	<body>
           
            <H1>Mortgage Calculator</H1>
          
                 <Table>
                    
                    
                    <TR><TD>Start Date</TD><TD><input id="a"></TD></TR>
                    <TR><TD>Loan Amount</TD><TD><input id="b"></TD></TR>
                    <TR><TD>Interest Rate</TD><TD><input id="c"></TD></TR>
                    <TR><TD>Term (Years)</TD><TD><input id="d"></TD></TR>
                    <TR><TD>Monthly Payment</TD><TD><input id="e"></TD></TR>
            	</Table>
                        <script>
                            <!--Gets value of a, stores it into x. Then takes X and gives it to the value of B-->
                            function copy_content() { x = jQuery('#a').val(); jQuery('#b').val(x);}
           
                      			
                      			
       
                           <!-- computes interest rate value-->
                               function computeInterestRate() { 
                               
                               	amt = jQuery('#b').val();
                                rate = jQuery('#c').val();
                    			term = jQuery('#d').val();
                                months = (term*12);
                                w = final_compute(months,rate,amt);
                                jQuery('#e').val(w);
                               }
                          
                            jQuery('#d').keyup(computeInterestRate);
                            
                            /*    
                            function getTerm(){
                               term = jQuery('#d').val();
                               months = term*(12);
                              jQuery('#d').val(months);
                              }
                      	jQuery('#d').keyup(getTerm);
                         
    */
                            
                        
                            
                            function final_compute(months,int,amt){
                            
                                payment = amt*((int*(int+1)^24)/(1+int)^24)-1;
                            
                            return payment;
                            }
     
    					</script>
        </body>
        </html>
    
     
  4. macrumors 68000

    SrWebDeveloper

    Joined:
    Dec 7, 2007
    Location:
    Alexandria, VA, USA
    #4
    A little sloppy not using var to declare variables when first used and you could have applied parseInt() like I did instead of casting as you did, but overall seems okay to me in terms of syntax. So does it work or not?

    If not, I already addressed what to do in my previous reply at the bottom.

    If so, congratulations.
     
  5. thread starter macrumors member

    Joined:
    Apr 16, 2012
    Location:
    Chicago
    #5
    Yeah I got it.

     
  6. macrumors 68000

    SrWebDeveloper

    Joined:
    Dec 7, 2007
    Location:
    Alexandria, VA, USA
    #6
    Well done for your class project. :D

    Now for some informal advice for doing something like this in the real world, when clients are paying for it (this is not just for you, but anyone following as this is a teaching forum):

    Move your custom JS to an external script document and reference it from within head, much like you did for jQuery library. In modern web development its wise to separate content from style from client side scripting. This centralizes the jQuery code and makes for much easier debugging and troubleshooting, plus a well organized site. Avoid embedding (script tags and code not in header) and inline (when JS or CSS is hard coded within attributes of HTML tags) unless necessary. Declare all JS variables upon first reference, add comments to explain your code and functions, and use sensible ID's and class names in your HTML so others can figure it out. Clean code is good code. Good code is good money, plus pride in doing it right. And if you come back a year later to debug an issue or add a new feature, etc., you'll spend less time re-learning your own code.
     

Share This Page