Untitled
unknown
plain_text
18 days ago
10 kB
4
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