{"id":251,"date":"2019-04-22T08:59:49","date_gmt":"2019-04-22T08:59:49","guid":{"rendered":"http:\/\/localhost\/quanto\/?page_id=251"},"modified":"2023-11-20T06:37:56","modified_gmt":"2023-11-20T06:37:56","slug":"mortgage-calculator","status":"publish","type":"page","link":"https:\/\/wpdemo2.vegatheme.com\/quanto\/mortgage-calculator\/","title":{"rendered":"Mortgage Calculator"},"content":{"rendered":"<div class=\"wpb-content-wrapper\"><p>[vc_row css=&#8221;.vc_custom_1567998206472{padding-top: 80px !important;padding-bottom: 40px !important;}&#8221;][vc_column]        <div class=\"calculator card m-b-60\">\n        <div class=\"calculator-loan\">\n            <div class=\"calculator-form form\">\n                <h3 class=\"card-header\">Calculator<\/h3>\n            <\/div>\n            <div class=\"calculator-form\">\n                <h3 class=\"card-header\">Results:<\/h3>\n                <div class=\"results row\"><\/div>\n                <div class=\"row\">\n                    <div class=\"col-xl-12 p-5\"> \n                        <a class=\"btn btn-brand btn-rounded btn-lg btn-block\" href=\"https:\/\/wpdemo2.vegatheme.com\/quanto\/mortgage-rate-table\/\" target=\"_self\">Check Todays Mortgage Rates<\/a>                    <\/div>\n                <\/div>\n            <\/div>\n        <\/div>\n        <div class=\"clear\"><\/div>\n    <\/div>\n    \n        <div class=\"card m-b-60\">\n        <h4 class=\"card-header\">Amortization Schedule Calculation<\/h4>\n        <div class=\"card-body p-0\">\n            <div class=\"calculator-amortization\">\n                <div class=\"calculator-form-second form\">\n                <\/div>\n                <div class=\"calculator-form-results\">\n                    <h4 class=\"pl-4 pb-2\">Results - Amortization Schedule<\/h4>\n                    <div class=\"results\"><\/div>\n                <\/div>\n                <div class=\"clear\"><\/div>\n            <\/div>\n        <\/div>\n    <\/div>\n        <script type=\"text\/javascript\">\n    (function($) {\n   \/*\n * Accrue.js\n * http:\/\/accruejs.com\n * Author: James Pederson (jpederson.com)\n * Licensed under the MIT, GPL licenses.\n * Version: 1.1.0\n *\/\n;(function( $, window, document, undefined ){\n    \/\/ let's start our plugin logic\n    $.extend($.fn, {\n        accrue: function( options ){\n            \/\/ set our options from the defaults, overriding with the\n            \/\/ parameter we pass into this function.\n            options = $.extend( { calculationMethod: calculateBasic }, $.fn.accrue.options, options );\n            \/\/ Iterate through all the matching elements and return\n            \/\/ the jquery object to preserve chaining.\n            return this.each(function(){\n                \/\/ Store a jQuery object for our element so we can use it\n                \/\/ inside our other bindings.\n                var elem = $(this);\n                \/\/ Create the form div if it doesn't exist.\n                if ( !elem.find(\".form\").length ) {\n                    elem.append( '<div class=\"form\"><\/div>' );\n                }\n                \/\/ Get the amount, rate(s), and term - and clean the values\n                var amount = get_field( elem, options, \"amount\" );\n                var rate = get_field( elem, options, \"rate\" );\n                var term = get_field( elem, options, \"term\" );\n                \/\/ If we're in comparison mode, grab an additiona field\/value.\n                if ( options.mode==\"compare\" ) {\n                    var rate_compare = get_field( elem, options, \"rate_compare\" );\n                }\n                \/\/ If we are using the default results div and it doesn't exist, create it.\n                var output_elem;\n                if ( options.response_output_div === \".results\" ) {\n                    if ( elem.find(\".results\").length === 0 ) {\n                        elem.append('<div class=\"results\"><\/div>');\n                    }\n                    \/\/ Set the output div as a variable so we can refer to it more easily.\n                    output_elem = elem.find(\".results\");\n                } else {\n                    \/\/ Set the output div as a variable so we can refer to it more easily.\n                    output_elem = $(options.response_output_div);\n\n                }\n                \/\/ Set the calculation method based on which mode we're in.\n                var calculation_method;\n                switch ( options.mode ) {\n                    case \"basic\":\n                        calculation_method = calculateBasic;\n                    break;\n                    case \"compare\":\n                        calculation_method = calculateComparison;\n                    break;\n                    case \"amortization\":\n                        calculation_method = calculateAmortization;\n                    break;\n                }\n                \/\/ Get the information about the loan.\n                calculation_method( elem, options, output_elem );\n                \/\/ Do some different things if the operation mode is \"button\"\n                if ( options.operation==\"button\" ) {\n                    \/\/ If we are using button operation mode and the button doesn't exist, create one.\n                    if ( elem.find(\"button\").length === 0 && elem.find(\"input[type=submit]\").length === 0 && elem.find(\"input[type=image]\").length === 0 ) {\n                        elem.find(\".form\").append('<button class=\"accrue-calculate\">'+options.button_label+'<\/button>');\n                    }\n                    \/\/ If the developer has chosen to bind to a button instead\n                    \/\/ of operate on keyup, let's set up a click event binding\n                    \/\/ that performs the calculation.\n                    elem.find(\"button, input[type=submit], input[type=image]\").each(function(){\n                        $(this).click(function( event ){\n                            event.preventDefault();\n                            calculation_method( elem, options, output_elem );\n                        });\n                    });\n                } else {\n                    \/\/ Bind to the select and input elements so that we calculate\n                    \/\/ on keyup (or change in the case of the select list).\n                    elem.find(\"input, select\").each(function(){\n                        $(this).bind( \"keyup change\", function(){\n                            calculation_method( elem, options, output_elem );\n                        });\n                    });\n                }\n                \/\/ If the developer has chosen to bind to a button instead\n                \/\/ of operate on keyup, let's set up a click event binding\n                \/\/ that performs the calculation.\n                elem.find(\"form\").each(function(){\n                    $(this).submit(function(event){\n                        event.preventDefault();\n                        calculation_method( elem, options, output_elem );\n                    });\n                });\n            });\n        }\n    });\n    \/\/ DEFAULTS\n    \/\/ Set up some default options for our plugin that can be overridden \n    \/\/ as needed when we actually instantiate our plugin on a form.\n    $.fn.accrue.options = {\n        mode: \"basic\",\n        operation: \"keyup\",\n        default_values: {\n            amount: \"$7,500\",\n            rate: \"7%\",\n            rate_compare: \"1.49%\",\n            term: \"36m\"\n        },\n        field_titles: {\n            amount: \"Loan Amount:\",\n            rate: \"Rate (APR):\",\n            rate_compare: \"Comparison Rate:\",\n            term: \"Term:\"\n        },\n        button_label: \"Calculate\",\n        field_comments: {\n            amount: \"\",\n            rate: \"\",\n            rate_compare: \"\",\n            term: \"Format: 12m, 36m, 3y, 7y\"\n        },\n        response_output_div: \".results\",\n        response_basic: \n            '<div class=\"col-md-6\"><div class=\"results-data\">Monthly Payment:<br \/><span class=\"h2 text-primary fontweight-bold \">$%payment_amount%<\/span><\/div><\/div>'+\n            '<div class=\"col-md-6\"><div class=\"results-data\">Number of Payments:<br \/><span class=\"h2 text-primary fontweight-bold \">%num_payments%<\/span><\/div><\/div>'+\n            '<div class=\"col-md-6\"><div class=\"results-data\">Total Payments:<br \/><span class=\"h2 text-primary fontweight-bold \">$%total_payments%<\/span><\/div><\/div>'+\n            '<div class=\"col-md-6\"><div class=\"results-data\">Total Interest:<br \/><span class=\"h2 text-primary fontweight-bold \">$%total_interest%<\/span><\/div><\/div>',\n        response_compare: '<p class=\"total-savings\">Save $%savings% in interest!<\/p>',\n        error_text: '<p class=\"error\">Please fill in all fields.<\/p>',\n        callback: function ( elem, data ){}\n    };\n    \/\/ FORMAT MONEY\n    \/\/ This function is used to add thousand seperators to numerical ouput\n    \/\/ as a means of properly formatting money\n    function formatNumber (num) {\n        return num.toString().replace(\/(\\d)(?=(\\d{3})+(?!\\d))\/g, \"$1,\");\n    }\n    \/\/ GET FIELD\n    \/\/ A function just for grabbing the value from a particular field.\n    \/\/ We need this because if the field doesn't exist, the plugin will\n    \/\/ create it for them.\n    var get_field = function( elem, options, name ) {\n        \/\/ Check for an input with a class of the name.\n        var field;\n        if ( elem.find(\".accrue-\"+name).length ) { \/\/ if has a class of accrue-[name]\n            field = elem.find(\".accrue-\"+name);\n        } else if ( elem.find(\".\"+name).length ) { \/\/ if we have class of just the name\n            field = elem.find(\".\"+name);\n        } else if ( elem.find( \"input[name~=\"+name+\"]\" ).length ) {\n            elem.find( \"input[name~=\"+name+\"]\" );\n        } else {\n            field = \"\";\n        }\n        \/\/ If we have the field value, return it right away so that the\n        \/\/ calculator doesn't write the field to the form div since we\n        \/\/ don't need it to.\n        if ( typeof( field ) !== \"string\" ) {\n            return field.val();\n        }\n        if ( name == \"term_compare\" ) {\n            return false;\n        }\n        \/\/ If we've gotten here, no fields were found that match the\n        \/\/ criteria. Create the form field and return the default value.\n        elem.find(\".form\").append(\n            '<div class=\"accrue-field-'+name+'\">'+\n                '<p><label>'+options.field_titles[name]+':<\/label>'+\n                '<input type=\"text\" class=\"'+name+'\" value=\"'+options.default_values[name]+'\" \/>'+\n                ( options.field_comments[name].length>0 ? \"<small>\"+options.field_comments[name]+\"<\/small>\" : '' )+'<\/p>'+\n            '<\/div>');\n        return elem.find(\".\"+name).val();\n    };\n    \/\/ CALCULATE BASIC\n    \/\/ for the basic calculation, we're just getting the values and \n    \/\/ calculating loan info for a single loan.\n    var calculateBasic = function( elem, options, output_elem ){\n        \/\/ get the loan information from the current values in the form.\n        var loan_info = $.loanInfo({\n            amount: get_field( elem, options, \"amount\" ),\n            rate: get_field( elem, options, \"rate\" ),\n            term: get_field( elem, options, \"term\" )\n        });\n        \/\/ if valid, output into the output_elem that was passed into this function.\n        if ( loan_info!==0 ) {\n            \/\/ replace the placeholders with the response values.\n            var output_content = options.response_basic\n                .replace( \"%payment_amount%\", formatNumber(loan_info.payment_amount_formatted) )\n                .replace( \"%num_payments%\", loan_info.num_payments )\n                .replace( \"%total_payments%\",formatNumber(loan_info.total_payments_formatted) )\n                .replace( \"%total_interest%\", formatNumber(loan_info.total_interest_formatted) );\n            \/\/ output the content to the actual output element.\n            output_elem.html( output_content );\n        } else {\n            \/\/ if the values for the loan calculation aren't valid, provide an error.\n            output_elem.html( options.error_text );\n        }\n        \/\/ run the callback function after the calculation is done, including\n        \/\/ the calculation info so it's available in the callback.\n        options.callback( elem, loan_info );\n    };\n    \/\/ CALCULATE COMPARE\n    \/\/ The comparison mode gets 4 values from the form and calculates, then\n    \/\/ compares two different loans to determine savings in interest.\n    var calculateComparison = function( elem, options, output_elem ){\n        \/\/ see if there's a comparison term\n        var term_compare = get_field( elem, options, \"term_compare\" );\n        \/\/ if the comparison term is empty, use the normal term field\n        if ( typeof( term_compare ) == \"boolean\" ) {\n            term_compare = get_field( elem, options, \"term\" );\n        }\n        \/\/ Get information about the two different loans in question\n        \/\/ and create a callback data variable that we'll pass into\n        \/\/ our callback function.\n        var loan_1_info = $.loanInfo({\n                amount: get_field( elem, options, \"amount\" ),\n                rate: get_field( elem, options, \"rate\" ),\n                term: get_field( elem, options, \"term\" )\n            }),\n            loan_2_info = $.loanInfo({\n                amount: get_field( elem, options, \"amount\" ),\n                rate: get_field( elem, options, \"rate_compare\" ),\n                term: term_compare\n            }),\n            callback_data = {\n                loan_1: loan_1_info,\n                loan_2: loan_2_info\n            };\n        \/\/ If both loans are good, populate response element with info,\n        \/\/ else error.\n        if ( loan_1_info!==0 && loan_2_info!==0 ) {\n            if ( loan_1_info.total_interest-loan_2_info.total_interest > 0 ) {\n                callback_data.savings = loan_1_info.total_interest-loan_2_info.total_interest;\n            } else {\n                callback_data.savings = 0;\n            }\n            \/\/ replace our savings placeholder in the response text with\n            \/\/ the real difference in interest.\n            var output_content = options.response_compare\n                .replace( \"%savings%\", formatNumber(callback_data.savings.toFixed(2)) )\n                .replace( \"%loan_1_payment_amount%\", formatNumber(loan_2_info.payment_amount_formatted) )\n                .replace( \"%loan_1_num_payments%\", loan_2_info.num_payments )\n                .replace( \"%loan_1_total_payments%\", loan_2_info.total_payments_formatted )\n                .replace( \"%loan_1_total_interest%\", formatNumber(loan_2_info.total_interest_formatted) )\n                .replace( \"%loan_2_payment_amount%\", formatNumber(loan_1_info.payment_amount_formatted) )\n                .replace( \"%loan_2_num_payments%\", loan_1_info.num_payments )\n                .replace( \"%loan_2_total_payments%\", loan_1_info.total_payments_formatted )\n                .replace( \"%loan_2_total_interest%\", formatNumber(loan_1_info.total_interest_formatted) );\n            output_elem.html( output_content );\n        } else {\n            \/\/ output an error\n            output_elem.html( options.error_text );\n        }\n        \/\/ run the callback, passing our loan data into it.\n        options.callback( elem, callback_data );\n    };\n    \/\/ CALCULATE AMORTIZATION SCHEDULE\n    \/\/ This method outputs a table with the repayment schedule\n    \/\/ for a single loan object.\n        var calculateAmortization = function( elem, options, output_elem ){\n        \/\/ Get the loan information so we can build out our amortization\n        \/\/ schedule table.\n        var loan_info = $.loanInfo({\n                amount: get_field( elem, options, \"amount\" ),\n                rate: get_field( elem, options, \"rate\" ),\n                term: get_field( elem, options, \"term\" )\n            });\n        \/\/ If the loan info's good, start buildin'!\n        if ( loan_info!==0 ) {\n            \/\/ Set some initial variables for the table header, interest\n            \/\/ per payment, amount from balance, and counter variables\n            \/\/ to values as we list rows.\n            var output_content = '<table class=\"accrue-amortization\">'+\n                    '<thead><tr>'+\n                    '<th class=\"accrue-payment-number\">#<\/th>'+\n                    '<th class=\"accrue-payment-amount\">Payment Amt.<\/th>'+\n                    '<th class=\"accrue-total-interest\">Total Interest<\/th>'+\n                    '<th class=\"accrue-total-payments\">Total Payments:<\/th>'+\n                    '<th class=\"accrue-balance\">Balance<\/th>'+\n                    '<\/tr><\/thead><tbody>',\n                interest_per_payment = loan_info.payment_amount-(loan_info.original_amount\/loan_info.num_payments),\n                amount_from_balance = loan_info.payment_amount-interest_per_payment,\n                counter_interest = 0,\n                counter_payment = 0,\n                counter_balance = parseInt(loan_info.original_amount, 10);\n            \/\/ Start appending the table rows to our output variable.\n            for ( var i=0; i<loan_info.num_payments; i++) { \n                \/\/ Record the payment in our counter variables.\n                counter_interest = counter_interest+interest_per_payment;\n                counter_payment = counter_payment+loan_info.payment_amount;\n                counter_balance = counter_balance-amount_from_balance;\n                \/\/ bold the last row of the table by using <th>s for\n                \/\/ the values. \n                var cell_tag = \"td\";\n                if ( i==(loan_info.num_payments-1) ) {\n                    cell_tag = \"th\";\n                }\n                \/\/ Append a row to the table\n                output_content = output_content+ \n                    '<tr>'+\n                    '<'+cell_tag+' class=\"accrue-payment-number\">'+(i+1)+'<\/'+cell_tag+'>'+\n                    '<'+cell_tag+' class=\"accrue-payment-amount\">$'+formatNumber(loan_info.payment_amount_formatted)+'<\/'+cell_tag+'>'+\n                    '<'+cell_tag+' class=\"accrue-total-interest\">$'+formatNumber(counter_interest.toFixed(2))+'<\/'+cell_tag+'>'+\n                    '<'+cell_tag+' class=\"accrue-total-payments\">$'+formatNumber(counter_payment.toFixed(2))+'<\/'+cell_tag+'>'+\n                    '<'+cell_tag+' class=\"accrue-balance\">$'+formatNumber(counter_balance.toFixed(2))+'<\/'+cell_tag+'>'+\n                    '<\/tr>';\n            }\n            \/\/ Finish off our table tag.\n            output_content = output_content+\n                '<\/tbody><\/table>';\n            \/\/ Push our output content into the output element.\n            output_elem.html( output_content );\n        } else {\n            \/\/ Values aren't good yet, show the error.\n            output_elem.html( options.error_text );\n        }\n        \/\/ Execute callback, passing in loan information.\n        options.callback( elem, loan_info );\n    };\n    \/\/ BASIC LOGGING FUNCTION\n    \/\/ Checks to see if the console is available before outputting\n    \/\/ anything through console.log(). Prevent issues with IE.\n    var log = function( message ){\n        if ( window.console ) {\n            console.log( message );\n        }\n    };\n    \/\/ GENERAL LOAN INFORMATION FUNCTION\n    \/\/ This is the public function we use inside our plugin function\n    \/\/ and we're exposing it here so that we can also provide generic\n    \/\/ calculations that just return JSON objects that can be used\n    \/\/ for custom-developed plugins.\n    $.loanInfo = function( input ) {\n        var amount = ( typeof( input.amount )!==\"undefined\" ? input.amount : 0 ).toString().replace(\/[^\\d.]\/ig, ''),\n            rate = ( typeof( input.rate )!==\"undefined\" ? input.rate : 0 ).toString().replace(\/[^\\d.]\/ig, ''),\n            term = ( typeof( input.term )!==\"undefined\" ? input.term : 0 );\n        \/\/ parse year values passed into the term value\n        if ( term.match(\"y\") ) {\n            term = parseInt( term.replace(\/[^\\d.]\/ig, ''), 10 )*12;\n        } else {\n            term = parseInt( term.replace(\/[^\\d.]\/ig, ''), 10 );\n        }\n        \/\/ process the input values\n        var monthly_interest = rate \/ 100 \/ 12;\n        \/\/ Now compute the monthly payment amount.\n        var x = Math.pow(1 + monthly_interest, term),\n            monthly = (amount*x*monthly_interest)\/(x-1);\n        \/\/ If the result is a finite number, the user's input was good and\n        \/\/ we have meaningful results to display\n        if ( amount*rate*term>0 ) {\n            \/\/ Fill in the output fields, rounding to 2 decimal places\n            return {\n                original_amount: amount,\n                payment_amount: monthly,\n                payment_amount_formatted: monthly.toFixed(2),\n                num_payments: term,\n                total_payments: ( monthly * term ), \n                total_payments_formatted: ( monthly * term ).toFixed(2), \n                total_interest: ( ( monthly * term ) - amount ),\n                total_interest_formatted: ( ( monthly * term ) - amount ).toFixed(2)\n            };\n        } else {\n            \/\/ The numbers provided won't provide good data as results,\n            \/\/ so we'll return 0 so it's easy to test if one of the fields\n            \/\/ is empty or invalid.\n            return 0;\n        }\n    };\n    \/\/ REVERSE LOAN INFORMATION FUNCTION\n    \/\/ This is a copy of the above, only that given a payment amount, rate and term it\n    \/\/ will return the principal amount that can be borrowed.\n    $.loanAmount = function( input ) {\n        var payment = ( typeof( input.payment )!==\"undefined\" ? input.payment : 0 ).toString().replace(\/[^\\d.]\/ig, ''),\n            rate = ( typeof( input.rate )!==\"undefined\" ? input.rate : 0 ).toString().replace(\/[^\\d.]\/ig, ''),\n            term = ( typeof( input.term )!==\"undefined\" ? input.term : 0 );\n        \/\/ parse year values passed into the term value\n        if ( term.match(\"y\") ) {\n            term = parseInt( term.replace(\/[^\\d.]\/ig, ''), 10 )*12;\n        } else {\n            term = parseInt( term.replace(\/[^\\d.]\/ig, ''), 10 );\n        }\n        \/\/ process the input values\n        var monthly_interest = rate \/ 100 \/ 12,\n            annual_interest = rate \/ 100;\n        \/\/ Now compute.\n        var x = payment * (1 - Math.pow(1 + monthly_interest, -1 * term)) * (12\/(annual_interest));\n        \/\/ If the result is a finite number, the user's input was good and\n        \/\/ we have meaningful results to display\n        if ( x>0 ) {\n            \/\/ Fill in the output fields, rounding to 2 decimal places\n            return {\n                principal_amount: x,\n                principal_amount_formatted: ( x * 1 ).toFixed(2),\n                payment_amount: payment,\n                payment_amount_formatted: ( payment * 1 ).toFixed(2),\n                num_payments: term,\n                total_payments: ( payment * term ), \n                total_payments_formatted: ( payment * term ).toFixed(2), \n                total_interest: ( ( payment * term ) - x ),\n                total_interest_formatted: ( ( payment * term ) - x ).toFixed(2)\n            };\n        } else {\n            \/\/ The numbers provided won't provide good data as results,\n            \/\/ so we'll return 0 so it's easy to test if one of the fields\n            \/\/ is empty or invalid.\n            return 0;\n        }\n    };\n})( jQuery, window, document );\n    })(jQuery);\n    <\/script>\n    [\/vc_column][\/vc_row]<\/p>\n<\/div>","protected":false},"excerpt":{"rendered":"<p>[vc_row css=&#8221;.vc_custom_1567998206472{padding-top: 80px !important;padding-bottom: 40px !important;}&#8221;][vc_column][\/vc_column][\/vc_row]<\/p>\n","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"footnotes":""},"class_list":["post-251","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/wpdemo2.vegatheme.com\/quanto\/wp-json\/wp\/v2\/pages\/251","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/wpdemo2.vegatheme.com\/quanto\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/wpdemo2.vegatheme.com\/quanto\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/wpdemo2.vegatheme.com\/quanto\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/wpdemo2.vegatheme.com\/quanto\/wp-json\/wp\/v2\/comments?post=251"}],"version-history":[{"count":1,"href":"https:\/\/wpdemo2.vegatheme.com\/quanto\/wp-json\/wp\/v2\/pages\/251\/revisions"}],"predecessor-version":[{"id":2555,"href":"https:\/\/wpdemo2.vegatheme.com\/quanto\/wp-json\/wp\/v2\/pages\/251\/revisions\/2555"}],"wp:attachment":[{"href":"https:\/\/wpdemo2.vegatheme.com\/quanto\/wp-json\/wp\/v2\/media?parent=251"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}