Untitled
unknown
plain_text
a month ago
10 kB
5
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(1);
// Total Value (Appreciated Value)
const yearPercentage = 1 + ((yearlyAppreciationRate)/12);
const totalMonths = 12*yearsHeld
const totalValue = estimatedHomeValue * Math.pow(yearPercentage, totalMonths);
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