Untitled

avatar
unknown
plain_text
7 months ago
10 kB
6
Indexable
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Property Investment Calculator</title>
    <style>
        .output-span { font-weight: bold; }
        .input-field { margin-bottom: 10px; }
        label { display: block; font-weight: bold; margin-top: 10px; }
        input { padding: 5px; width: 100%; }
        button { margin-top: 15px; padding: 10px; background: #007bff; color: white; border: none; cursor: pointer; }
        .error { border: 1px solid red; }
    </style>
</head>
<body>

<form id="calculate">
    <input type="hidden" name="contactId" value="">
    <div id="column-1" class="col g-1of1 g3-1of3">
        <div class="module module-calc-col">
            <h2 class="column-title">Estimated Property Value</h2>
            <div class="input-field"><label for="field_yearsToHold">Years wanting to hang on to property</label><input type="number" name="field_yearsToHold" id="field_yearsToHold" value="3"></div>
            <div class="input-field"><label for="field_estValue">Estimated Home Value $</label><input type="number" name="field_estValue" id="field_estValue" class="dollars"></div>
            <div class="text-field">Annual Costs to own property</div>
            <div class="input-field"><label for="field_monthlyHOA">Monthly HOA Fees $</label><input type="number" name="field_monthlyHOA" id="field_monthlyHOA" class="dollars"></div>
            <div class="input-field"><label for="field_annualInsurance">Annual Insurance $</label><input type="number" name="field_annualInsurance" id="field_annualInsurance" class="dollars"></div>
            <div class="input-field"><label for="field_annualTaxes">Annual Taxes $</label><input type="number" name="field_annualTaxes" id="field_annualTaxes" class="dollars"></div>
            <div class="input-field"><label for="field_monthlyMortgage">Monthly Mortgage Payment $</label><input type="number" name="field_monthlyMortgage" id="field_monthlyMortgage" class="dollars" value="0"></div>
            <div class="input-field"><span class="output-label">Total Annual Costs to Hold Property $</span><span class="output-span dollars" id="annualCosts">260</span></div>
            <div class="text-field">Rental Information</div>
            <div style="text-align: right; margin: 5px; line-height: 1.25; font-size: 12px;">(If you are not renting your property please leave the zero values in place)</div>
            <div class="input-field"><label for="field_grossRentalIncome">Gross Annual Rental Income $</label><input type="number" name="field_grossRentalIncome" id="field_grossRentalIncome" class="dollars" value="0"></div>
            <div class="input-field"><label for="field_managementFee">Management Fee %</label><input type="number" name="field_managementFee" id="field_managementFee" class="percents" value="0"></div>
            <div class="input-field"><label for="field_miscRentalExpenses">Misc Rental Annual Expenses (8% GI) $</label><input type="number" name="field_miscRentalExpenses" id="field_miscRentalExpenses" class="dollars" value="0"></div>
            <div class="input-field"><span class="output-label">Net Rental Income $</span><span class="output-span dollars" id="netRentalIncome">0</span></div>
        </div>
    </div>

    <div id="column-2" class="col g-1of1 g3-1of3">
        <div class="module module-calc-col">
            <h2 class="column-title">Year Summary of Results</h2>
            <div class="input-field"><span class="output-label">Total Investment</span><span class="output-span dollars" id="totalInvest">785555</span></div>
            <div class="input-field"><span class="output-label">Costs to Own<br><span class="years-owned">3 Year(s)</span></span><span class="output-span dollars" id="costOwn">780</span></div>
            <div class="input-field"><span class="output-label">Net Rental Income<br><span class="years-owned">3 Year(s)</span></span><span class="output-span dollars" id="sumNetRentalIncome">0</span></div>
            <div class="input-field"><span class="output-label">Net Return<br><span class="years-owned">3 Year(s)</span></span><span class="output-span dollars" id="netReturn">-780</span></div>
            <div class="text-field">Realized Annual Yield</div>
            <div class="input-field"><span class="output-span percents" id="annualYield">-0.0331</span></div>
        </div>
    </div>

    <div id="column-3" class="col g-1of1 g3-1of3">
        <div class="module module-calc-col">
            <h2 class="column-title"><span class="years-owned">3 Year(s)</span> Appreciated Value</h2>
            <p style="font-size: 12px;">Assuming the market has stabilized and prices are appreciating at the same rate every year.</p>
            <div class="input-field"><label for="field_yearlyAppreciationRate">Yearly Appreciation Rate</label><div><input type="number" name="field_yearlyAppreciationRate" id="field_yearlyAppreciationRate" value="3" class="percents"><span class="output-label">%</span></div></div>
            <div class="input-field"><span class="output-label">Total Value</span><br><span class="output-label">$</span><span class="output-span dollars" id="totalValue">859438</span></div>
            <div class="text-field">Based on Net Return it would be the same as selling today for:</div>
            <div class="input-field"><span class="output-label">$</span><span class="output-span dollars" id="totalValueToday">858658</span></div>
            <div class="input-submit"><input type="submit" id="calculatesubmit" class="gform_button" value="Calculate"></div>
        </div>
    </div>
</form>

<script>
document.addEventListener("DOMContentLoaded", function () {
    const yearsToHoldInput = document.getElementById("field_yearsToHold");
    const calculateBtn = document.getElementById("calculatesubmit");

    const outputAnnualCosts = document.getElementById("annualCosts");
    const outputNetRentalIncome = document.getElementById("netRentalIncome");
    const outputTotalInvest = document.getElementById("totalInvest");
    const outputCostOwn = document.getElementById("costOwn");
    const outputSumNetRentalIncome = document.getElementById("sumNetRentalIncome");
    const outputNetReturn = document.getElementById("netReturn");
    const outputAnnualYield = document.getElementById("annualYield");
    const outputTotalValue = document.getElementById("totalValue");
    const outputTotalValueToday = document.getElementById("totalValueToday");

    function updateYears() {
        const years = yearsToHoldInput.value || 0;
        document.querySelectorAll(".years-owned").forEach(el => el.textContent = years + " Year(s)");
    }

    function calculate() {
        const yearsHeld = parseInt(yearsToHoldInput.value) || 0;
        const estimatedHomeValue = parseFloat(document.getElementById("field_estValue").value) || 0;
        const monthlyHOA = parseFloat(document.getElementById("field_monthlyHOA").value) || 0;
        const annualInsurance = parseFloat(document.getElementById("field_annualInsurance").value) || 0;
        const annualTaxes = parseFloat(document.getElementById("field_annualTaxes").value) || 0;
        const monthlyMortgage = parseFloat(document.getElementById("field_monthlyMortgage").value) || 0;
        const grossRentalIncome = parseFloat(document.getElementById("field_grossRentalIncome").value) || 0;
        const managementFee = parseFloat(document.getElementById("field_managementFee").value) || 0;
        const miscRentalExpenses = parseFloat(document.getElementById("field_miscRentalExpenses").value) || 0;
        const yearlyAppreciationRate = parseFloat(document.getElementById("field_yearlyAppreciationRate").value) / 100 || 0;

        // Total Annual Costs
        const annualCosts = (monthlyHOA + monthlyMortgage) * 12 + annualInsurance + annualTaxes;
        outputAnnualCosts.textContent = annualCosts.toLocaleString();

        // Net Rental Income
        const netRentalIncome = grossRentalIncome - (grossRentalIncome * (managementFee / 100)) - miscRentalExpenses;
        outputNetRentalIncome.textContent = netRentalIncome.toLocaleString();

        // Total Investment
        outputTotalInvest.textContent = estimatedHomeValue.toLocaleString();

        // Costs to Own
        const costOwn = yearsHeld * annualCosts;
        outputCostOwn.textContent = costOwn.toLocaleString();

        // Net Rental Income (for total years)
        const sumNetRentalIncome = netRentalIncome * yearsHeld;
        outputSumNetRentalIncome.textContent = sumNetRentalIncome.toLocaleString();

        // Net Return
        const netReturn = sumNetRentalIncome - costOwn;
        outputNetReturn.textContent = netReturn.toLocaleString();

        // Realized Annual Yield
        const annualYield = ((netReturn / estimatedHomeValue) / yearsHeld) * 100;
        outputAnnualYield.textContent = annualYield.toFixed(3);

        // Total Value (Appreciated Value)
        const totalValue = estimatedHomeValue * Math.pow((1 + yearlyAppreciationRate), yearsHeld);
        outputTotalValue.textContent = Math.round(totalValue).toLocaleString();

        // Based on Net Return - Selling Today Value
        const totalValueToday = totalValue + netReturn;
        outputTotalValueToday.textContent = Math.round(totalValueToday).toLocaleString();
    }

    function checkInputs() {
        const inputs = document.querySelectorAll("#calculate input[type='number']");
        inputs.forEach(input => {
            if (!input.value) {
                input.classList.add('error');
            } else {
                input.classList.remove('error');
            }
        });

        return !document.querySelector('.error');
    }

    yearsToHoldInput.addEventListener('input', updateYears);
    calculateBtn.addEventListener('click', function (e) {
        e.preventDefault();
        if (checkInputs()) {
            calculate();
        } else {
            alert('Please fill all the fields correctly.');
        }
    });

    updateYears();
});
</script>
Editor is loading...
Leave a Comment