justengel · June 23, 2020 21:10
diff --git a/mortgage_calculator.html b/mortgage_calculator.html
 <html>
 <head>
    <title>Mortgage Calculator</title>
 </head>
 <body>

 <h1>Mortgage Calculator</h1>

 <h2>References</h2>
 <ul>
    <li><a href="https://www.wikihow.com/Calculate-Mortgage-Payments">wikiHow</a></li>
 </ul>

 <h2>Calculator:</h2>

 <div>
    <label for="balance">Balance:</label><br>
    <input type="text" id="balance" name="balance" value="300,000"><br>

    <label for="rate">Interest Rate (%):</label><br>
    <input type="number" id="rate" name="rate" value="3.0"><br>

    <label for="years">Years:</label><br>
    <input type="number" id="years" name="years" value="30"><br><br>

    <label for="extra">Extra Monthly:</label><br>
    <input type="text" id="extra" name="extra" value="0.00"><br><br>

    <button onclick="calculate()">Calculate</button><br>
 </div>

 <br>

 <div id="metrics">
 </div>


 <br>
 <table id="table">
    <tr>
        <th>Month</th>
        <th>Payment</th>
        <th>Principal</th>
        <th>Interest</th>
        <th>Extra</th>
        <th>Balance</th>
    </tr>
 </table>

 <script>
    function round2(value, scale) {
        scale = typeof(scale) != "undefined" ? scale : 2;
        return +(Math.round(value + "e" + scale) + ("e-" + scale));
    }
    function as_currency(value){
        var v = round2(value, 2);
        return v.toLocaleString("en-US", {style: "currency", currency: "USD", minimumFractionDigits: 2});
    };

    function calculate_payment(balance, rate, months_remaining){
        var p = balance;
        var r = rate / 12/ 100;
        var n = months_remaining;
        var r1 = (1 + r)**n;
        return p * ((r * r1)/(r1 -1));
    };

    function make_row(month, monthly_total, principal, interest, extra, balance){
        var tr = document.createElement("tr");

        var m = typeof(month) != "undefined" ? month : "Month";
        var mt = typeof(monthly_total) != "undefined" ? as_currency(monthly_total) : "Payment";
        var p = typeof(principal) != "undefined" ? as_currency(principal) : "Principal";
        var i = typeof(interest) != "undefined" ? as_currency(interest) : "Interest";
        var e = typeof(extra) != "undefined" ? as_currency(extra) : "Extra";
        var b = typeof(balance) != "undefined" ? as_currency(balance) : "Balance";

        tr.innerHTML = `
        <th>${m}</th>\
        <th>${mt}</th>\
        <th>${p}</th>\
        <th>${i}</th>\
        <th>${e}</th>\
        <th>${b}</th>`;
        return tr;
    };

    function calculate(){
        var tr, table_el, metrics_el;
        var month, monthly, interest, principal, payment;
        var r, total_extra, total_interest, total;

        var balance = document.getElementById("balance").value;
        var rate = document.getElementById("rate").value;
        var years = document.getElementById("years").value;
        var extra = document.getElementById("extra").value;

        balance = parseFloat(balance.replace(/[$, ]+/g, "").trim());
        rate = parseFloat(rate.replace(/[% ]+/g, "").trim());
        years = parseInt(years.replace(/[ ]+/g, "").trim());
        extra = parseFloat(extra.replace(/[$, ]+/g, "").trim());

        table_el = document.getElementById("table");
        table_el.innerHTML = make_row().outerHTML;

        r = rate / 12 / 100;
        total_extra = 0;
        total_interest = 0;
        total = 0;
        month = 0;

        monthly = calculate_payment(balance, rate, years * 12);

        while (balance > 0){
            interest = balance * r;
            principal = monthly - interest;
            balance -= (principal + extra);
            payment = monthly + extra;

            if(round2(balance, 2) <= 0) {
                balance = round2(balance, 2);

                // Remove negative
                payment += balance;  // balance is negative
                extra += balance;
                if(extra < 0){
                    principal += extra;
                    extra = 0;
                }

                balance = 0.0
            }

            total_extra += extra;
            total_interest += interest;
            total += payment;
            month += 1;

            tr = make_row(month, payment, principal, interest, extra, balance);
            table_el.appendChild(tr);
        }

        metrics_el = document.getElementById("metrics");
        metrics_el.innerHTML = `\
        <b>Years: </b>${(month / 12).toFixed(1)} <br>\
        <b>Total Extra: </b>${as_currency(total_extra)} <br>\
        <b>Total Interest: </b>${as_currency(total_interest)} <br>\
        <b>Total Paid: </b>${as_currency(total)} <br>\
        `
    };
 </script>

 </body>
 </html>
	<html>
	<head>
	<title>Mortgage Calculator</title>
	</head>
	<body>

	<h1>Mortgage Calculator</h1>

	<h2>References</h2>
	<ul>
	<li><a href="https://www.wikihow.com/Calculate-Mortgage-Payments">wikiHow</a></li>
	</ul>

	<h2>Calculator:</h2>

	<div>
	<label for="balance">Balance:</label><br>
	<input type="text" id="balance" name="balance" value="300,000"><br>

	<label for="rate">Interest Rate (%):</label><br>
	<input type="number" id="rate" name="rate" value="3.0"><br>

	<label for="years">Years:</label><br>
	<input type="number" id="years" name="years" value="30"><br><br>

	<label for="extra">Extra Monthly:</label><br>
	<input type="text" id="extra" name="extra" value="0.00"><br><br>

	<button onclick="calculate()">Calculate</button><br>
	</div>

	<br>

	<div id="metrics">
	</div>


	<br>
	<table id="table">
	<tr>
	<th>Month</th>
	<th>Payment</th>
	<th>Principal</th>
	<th>Interest</th>
	<th>Extra</th>
	<th>Balance</th>
	</tr>
	</table>

	<script>
	function round2(value, scale) {
	scale = typeof(scale) != "undefined" ? scale : 2;
	return +(Math.round(value + "e" + scale) + ("e-" + scale));
	}
	function as_currency(value){
	var v = round2(value, 2);
	return v.toLocaleString("en-US", {style: "currency", currency: "USD", minimumFractionDigits: 2});
	};

	function calculate_payment(balance, rate, months_remaining){
	var p = balance;
	var r = rate / 12/ 100;
	var n = months_remaining;
	var r1 = (1 + r)**n;
	return p * ((r * r1)/(r1 -1));
	};

	function make_row(month, monthly_total, principal, interest, extra, balance){
	var tr = document.createElement("tr");

	var m = typeof(month) != "undefined" ? month : "Month";
	var mt = typeof(monthly_total) != "undefined" ? as_currency(monthly_total) : "Payment";
	var p = typeof(principal) != "undefined" ? as_currency(principal) : "Principal";
	var i = typeof(interest) != "undefined" ? as_currency(interest) : "Interest";
	var e = typeof(extra) != "undefined" ? as_currency(extra) : "Extra";
	var b = typeof(balance) != "undefined" ? as_currency(balance) : "Balance";

	tr.innerHTML = `
	<th>${m}</th>\
	<th>${mt}</th>\
	<th>${p}</th>\
	<th>${i}</th>\
	<th>${e}</th>\
	<th>${b}</th>`;
	return tr;
	};

	function calculate(){
	var tr, table_el, metrics_el;
	var month, monthly, interest, principal, payment;
	var r, total_extra, total_interest, total;

	var balance = document.getElementById("balance").value;
	var rate = document.getElementById("rate").value;
	var years = document.getElementById("years").value;
	var extra = document.getElementById("extra").value;

	balance = parseFloat(balance.replace(/[$, ]+/g, "").trim());
	rate = parseFloat(rate.replace(/[% ]+/g, "").trim());
	years = parseInt(years.replace(/[ ]+/g, "").trim());
	extra = parseFloat(extra.replace(/[$, ]+/g, "").trim());

	table_el = document.getElementById("table");
	table_el.innerHTML = make_row().outerHTML;

	r = rate / 12 / 100;
	total_extra = 0;
	total_interest = 0;
	total = 0;
	month = 0;

	monthly = calculate_payment(balance, rate, years * 12);

	while (balance > 0){
	interest = balance * r;
	principal = monthly - interest;
	balance -= (principal + extra);
	payment = monthly + extra;

	if(round2(balance, 2) <= 0) {
	balance = round2(balance, 2);

	// Remove negative
	payment += balance; // balance is negative
	extra += balance;
	if(extra < 0){
	principal += extra;
	extra = 0;
	}

	balance = 0.0
	}

	total_extra += extra;
	total_interest += interest;
	total += payment;
	month += 1;

	tr = make_row(month, payment, principal, interest, extra, balance);
	table_el.appendChild(tr);
	}

	metrics_el = document.getElementById("metrics");
	metrics_el.innerHTML = `\
	<b>Years: </b>${(month / 12).toFixed(1)} <br>\
	<b>Total Extra: </b>${as_currency(total_extra)} <br>\
	<b>Total Interest: </b>${as_currency(total_interest)} <br>\
	<b>Total Paid: </b>${as_currency(total)} <br>\
	`
	};
	</script>

	</body>
	</html>