JSFiddle - React, Tailwind, and code Playground

HTML

<link rel="stylesheet" href="http://netdna.bootstrapcdn.com/bootstrap/3.0.2/css/bootstrap.min.css">
<body>
    <div class="container">
        <div class="row">
            <div class="col-md-4 col-md-offset-4">
                	<h1>Mortgage calculator</h1>

                <div class="form-group">
                    <p><b>Cost of house</b>:
                        <input type="text" class="form-control" id="inCost" />
                    </p>
                    <p><b>Down payment</b>:
                        <input type="text" class="form-control" id="inDown" />
                    </p>
                    <p><b>APR (Interest)</b>:
                        <input type="text" class="form-control" id="inAPR" />
                    </p>
                    <p><b>Period (How long)</b>:
                        <input type="text" class="form-control" id="inPeriod" />
                    </p>
                    <button type="button" class="btn btn-primary" id="btnCalculate">Calculate!</button>
                    <hr />
                    <p class="bg-success paragraph"><b>Total monthly payment: </b><span id="outMonthly"></span>
                    </p>
                </div>
            </div>
        </div>
    </div>
    <!-- End container -->
</body>

CSS

.paragraph {
    padding: 10px 5px 10px 5px;
}

JavaScript

// Formula: c = ((p * r) *  math.pow((1 + r), n)) / (math.pow((1 + r), n) - 1)

//@param p float Amount borrowed
//@param r interest as percentage
//@param n term in years

function percentToDecimal(percent) {
    return (percent / 12) / 100;
}

function yearsToMonths(years) {
    return years * 12;
}

function calculateMortgage(p, r, n) {
    // convert this percentage to decimal:
    r = percentToDecimal(r);
    n = yearsToMonths(n);

    var pmt = ((p * r) * Math.pow((1 + r), n)) / (Math.pow((1 + r), n) - 1);

    return parseFloat(pmt.toFixed(2));

}

function postpayments(payment) {
    var payments = document.getElementById("outMonthly");
    payments.innerText = "$" + payment;
}

var btn = document.getElementById("btnCalculate");
btn.onclick = function () {
    var cost = document.getElementById("inCost").value;
    var downpayment = document.getElementById("inDown").value;
    var interest = document.getElementById("inAPR").value;
    var term = document.getElementById("inPeriod").value;

    var amountBorrowed = cost - downpayment;

    var pmt = calculateMortgage(amountBorrowed, interest, term);

    postpayments(pmt);
};