ROI Calculator - Bootstrap 5
Example: https://theroicalculator.nesthub.com/roi-calculator-bs5
View Bootstrap 4 Code View Bootstrap 3 CodeForm Import
eyJuYW1lIjoiUk9JIENhbGN1bGF0b3IiLCJzbHVnIjoicm9pLWNhbGN1bGF0b3IiLCJzdWNjZXNzTWVzc2FnZSI6bnVsbCwiaXNMZWFkIjoiMCIsImZpZWxkcyI6W3siZmllbGRUeXBlSUQiOiIxIiwibGFiZWwiOiJQdXJjaGFzZSBQcmljZSIsInNsdWciOiJwdXJjaGFzZS1wcmljZSIsInNldHRpbmdzIjoie1wiaXNSZXF1aXJlZFwiOlwiMVwiLFwicGxhY2Vob2xkZXJcIjpcIlwiLFwiZGVmYXVsdFZhbHVlXCI6XCJcIixcImluc3RydWN0aW9uc1wiOlwiXCJ9Iiwib3JkZXJJbmRleCI6IjEifSx7ImZpZWxkVHlwZUlEIjoiMSIsImxhYmVsIjoiRG93biBQYXltZW50Iiwic2x1ZyI6ImRvd24tcGF5bWVudCIsInNldHRpbmdzIjoie1wiaXNSZXF1aXJlZFwiOlwiMVwiLFwicGxhY2Vob2xkZXJcIjpcIlwiLFwiZGVmYXVsdFZhbHVlXCI6XCJcIixcImluc3RydWN0aW9uc1wiOlwiXCJ9Iiwib3JkZXJJbmRleCI6IjMifSx7ImZpZWxkVHlwZUlEIjoiMSIsImxhYmVsIjoiSW50ZXJlc3QgUmF0ZSIsInNsdWciOiJpbnRlcmVzdC1yYXRlIiwic2V0dGluZ3MiOiJ7XCJpc1JlcXVpcmVkXCI6XCIxXCIsXCJwbGFjZWhvbGRlclwiOlwiXCIsXCJkZWZhdWx0VmFsdWVcIjpcIlwiLFwiaW5zdHJ1Y3Rpb25zXCI6XCJcIn0iLCJvcmRlckluZGV4IjoiNCJ9LHsiZmllbGRUeXBlSUQiOiIxIiwibGFiZWwiOiJJbnRlcmVzdCBUZXJtIiwic2x1ZyI6ImludGVyZXN0LXRlcm0iLCJzZXR0aW5ncyI6IntcImlzUmVxdWlyZWRcIjpcIjFcIixcInBsYWNlaG9sZGVyXCI6XCJcIixcImRlZmF1bHRWYWx1ZVwiOlwiXCIsXCJpbnN0cnVjdGlvbnNcIjpcIlwifSIsIm9yZGVySW5kZXgiOiI1In0seyJmaWVsZFR5cGVJRCI6IjEiLCJsYWJlbCI6IkNhcGl0YWwgRXhwZW5kaXR1cmUiLCJzbHVnIjoiY2FwaXRhbC1leHBlbmRpdHVyZSIsInNldHRpbmdzIjoie1wiaXNSZXF1aXJlZFwiOlwiXCIsXCJwbGFjZWhvbGRlclwiOlwiXCIsXCJkZWZhdWx0VmFsdWVcIjpcIlwiLFwiaW5zdHJ1Y3Rpb25zXCI6XCJcIn0iLCJvcmRlckluZGV4IjoiOCJ9LHsiZmllbGRUeXBlSUQiOiIxIiwibGFiZWwiOiJFc3RpbWF0ZWQgQ2xvc2luZyBDb3N0cyIsInNsdWciOiJlc3RpbWF0ZWQtY2xvc2luZy1jb3N0cyIsInNldHRpbmdzIjoie1wiaXNSZXF1aXJlZFwiOlwiMVwiLFwicGxhY2Vob2xkZXJcIjpcIlwiLFwiZGVmYXVsdFZhbHVlXCI6XCJcIixcImluc3RydWN0aW9uc1wiOlwiXCJ9Iiwib3JkZXJJbmRleCI6IjkifSx7ImZpZWxkVHlwZUlEIjoiMSIsImxhYmVsIjoiUmVudCIsInNsdWciOiJyZW50Iiwic2V0dGluZ3MiOiJ7XCJpc1JlcXVpcmVkXCI6XCIxXCIsXCJwbGFjZWhvbGRlclwiOlwiXCIsXCJkZWZhdWx0VmFsdWVcIjpcIlwiLFwiaW5zdHJ1Y3Rpb25zXCI6XCJcIn0iLCJvcmRlckluZGV4IjoiMTAifSx7ImZpZWxkVHlwZUlEIjoiMSIsImxhYmVsIjoiVmFjYW5jeSBSYXRlIiwic2x1ZyI6InZhY2FuY3ktcmF0ZSIsInNldHRpbmdzIjoie1wiaXNSZXF1aXJlZFwiOlwiXCIsXCJwbGFjZWhvbGRlclwiOlwiXCIsXCJkZWZhdWx0VmFsdWVcIjpcIlwiLFwiaW5zdHJ1Y3Rpb25zXCI6XCJcIn0iLCJvcmRlckluZGV4IjoiMTEifSx7ImZpZWxkVHlwZUlEIjoiMSIsImxhYmVsIjoiUHJvcGVydHkgVGF4ZXMiLCJzbHVnIjoicHJvcGVydHktdGF4ZXMiLCJzZXR0aW5ncyI6IntcImlzUmVxdWlyZWRcIjpcIlwiLFwicGxhY2Vob2xkZXJcIjpcIlwiLFwiZGVmYXVsdFZhbHVlXCI6XCJcIixcImluc3RydWN0aW9uc1wiOlwiXCJ9Iiwib3JkZXJJbmRleCI6IjEyIn0seyJmaWVsZFR5cGVJRCI6IjEiLCJsYWJlbCI6Ik1hbmFnZW1lbnQgRmVlcyIsInNsdWciOiJtYW5hZ2VtZW50LWZlZXMiLCJzZXR0aW5ncyI6IntcImlzUmVxdWlyZWRcIjpcIlwiLFwicGxhY2Vob2xkZXJcIjpcIlwiLFwiZGVmYXVsdFZhbHVlXCI6XCJcIixcImluc3RydWN0aW9uc1wiOlwiXCJ9Iiwib3JkZXJJbmRleCI6IjEzIn0seyJmaWVsZFR5cGVJRCI6IjEiLCJsYWJlbCI6IkFubnVhbCBNYWludGVuYW5jZSBCdWRnZXQiLCJzbHVnIjoiYW5udWFsLW1haW50ZW5hbmNlLWJ1ZGdldCIsInNldHRpbmdzIjoie1wiaXNSZXF1aXJlZFwiOlwiXCIsXCJwbGFjZWhvbGRlclwiOlwiXCIsXCJkZWZhdWx0VmFsdWVcIjpcIlwiLFwiaW5zdHJ1Y3Rpb25zXCI6XCJcIn0iLCJvcmRlckluZGV4IjoiMTQifSx7ImZpZWxkVHlwZUlEIjoiMSIsImxhYmVsIjoiQW5udWFsIEluc3VyYW5jZSIsInNsdWciOiJhbm51YWwtaW5zdXJhbmNlIiwic2V0dGluZ3MiOiJ7XCJpc1JlcXVpcmVkXCI6XCJcIixcInBsYWNlaG9sZGVyXCI6XCJcIixcImRlZmF1bHRWYWx1ZVwiOlwiXCIsXCJpbnN0cnVjdGlvbnNcIjpcIlwifSIsIm9yZGVySW5kZXgiOiIxNSJ9LHsiZmllbGRUeXBlSUQiOiIxIiwibGFiZWwiOiJIT0EgRHVlcyBNb250aGx5Iiwic2x1ZyI6ImhvYS1kdWVzLW1vbnRobHkiLCJzZXR0aW5ncyI6IntcImlzUmVxdWlyZWRcIjpcIlwiLFwicGxhY2Vob2xkZXJcIjpcIlwiLFwiZGVmYXVsdFZhbHVlXCI6XCJcIixcImluc3RydWN0aW9uc1wiOlwiXCJ9Iiwib3JkZXJJbmRleCI6IjE2In0seyJmaWVsZFR5cGVJRCI6IjEiLCJsYWJlbCI6IkhPQSBEdWVzIFllYXJseSIsInNsdWciOiJob2EtZHVlcy15ZWFybHkiLCJzZXR0aW5ncyI6IntcImlzUmVxdWlyZWRcIjpcIlwiLFwicGxhY2Vob2xkZXJcIjpcIlwiLFwiZGVmYXVsdFZhbHVlXCI6XCJcIixcImluc3RydWN0aW9uc1wiOlwiXCJ9Iiwib3JkZXJJbmRleCI6IjE3In0seyJmaWVsZFR5cGVJRCI6IjEiLCJsYWJlbCI6Ik5hbWUiLCJzbHVnIjoibmFtZSIsInNldHRpbmdzIjoie1wiaXNSZXF1aXJlZFwiOlwiMVwiLFwicGxhY2Vob2xkZXJcIjpcIlwiLFwiZGVmYXVsdFZhbHVlXCI6XCJcIixcImluc3RydWN0aW9uc1wiOlwiXCJ9Iiwib3JkZXJJbmRleCI6IjE4In0seyJmaWVsZFR5cGVJRCI6IjMiLCJsYWJlbCI6IkVtYWlsIiwic2x1ZyI6ImVtYWlsIiwic2V0dGluZ3MiOiJ7XCJpc1JlcXVpcmVkXCI6XCIxXCIsXCJwbGFjZWhvbGRlclwiOlwiXCIsXCJkZWZhdWx0VmFsdWVcIjpcIlwiLFwiaW5zdHJ1Y3Rpb25zXCI6XCJcIn0iLCJvcmRlckluZGV4IjoiMTkifSx7ImZpZWxkVHlwZUlEIjoiMTAiLCJsYWJlbCI6IlBob25lIiwic2x1ZyI6InBob25lIiwic2V0dGluZ3MiOiJ7XCJpc1JlcXVpcmVkXCI6XCIxXCIsXCJwbGFjZWhvbGRlclwiOlwiXCIsXCJkZWZhdWx0VmFsdWVcIjpcIlwiLFwiaW5zdHJ1Y3Rpb25zXCI6XCJcIn0iLCJvcmRlckluZGV4IjoiMjAifSx7ImZpZWxkVHlwZUlEIjoiMSIsImxhYmVsIjoiUHJvcGVydHkgQWRkcmVzcyIsInNsdWciOiJwcm9wZXJ0eS1hZGRyZXNzIiwic2V0dGluZ3MiOiJ7XCJpc1JlcXVpcmVkXCI6XCIxXCIsXCJwbGFjZWhvbGRlclwiOlwiXCIsXCJkZWZhdWx0VmFsdWVcIjpcIlwiLFwiaW5zdHJ1Y3Rpb25zXCI6XCJcIn0iLCJvcmRlckluZGV4IjoiMjEifSx7ImZpZWxkVHlwZUlEIjoiMSIsImxhYmVsIjoiQ2l0eSIsInNsdWciOiJjaXR5Iiwic2V0dGluZ3MiOiJ7XCJpc1JlcXVpcmVkXCI6XCIxXCIsXCJwbGFjZWhvbGRlclwiOlwiXCIsXCJkZWZhdWx0VmFsdWVcIjpcIlwiLFwiaW5zdHJ1Y3Rpb25zXCI6XCJcIn0iLCJvcmRlckluZGV4IjoiMjIifSx7ImZpZWxkVHlwZUlEIjoiMSIsImxhYmVsIjoiWmlwIiwic2x1ZyI6InppcCIsInNldHRpbmdzIjoie1wiaXNSZXF1aXJlZFwiOlwiMVwiLFwicGxhY2Vob2xkZXJcIjpcIlwiLFwiZGVmYXVsdFZhbHVlXCI6XCJcIixcImluc3RydWN0aW9uc1wiOlwiXCJ9Iiwib3JkZXJJbmRleCI6IjIzIn0seyJmaWVsZFR5cGVJRCI6IjEiLCJsYWJlbCI6IlNxIEZ0Iiwic2x1ZyI6InNxZnQiLCJzZXR0aW5ncyI6IntcImlzUmVxdWlyZWRcIjpcIjFcIixcInBsYWNlaG9sZGVyXCI6XCJcIixcImRlZmF1bHRWYWx1ZVwiOlwiXCIsXCJpbnN0cnVjdGlvbnNcIjpcIlwifSIsIm9yZGVySW5kZXgiOiIyNCJ9LHsiZmllbGRUeXBlSUQiOiIxIiwibGFiZWwiOiJBZ2UiLCJzbHVnIjoiYWdlIiwic2V0dGluZ3MiOiJ7XCJpc1JlcXVpcmVkXCI6XCIxXCIsXCJwbGFjZWhvbGRlclwiOlwiXCIsXCJkZWZhdWx0VmFsdWVcIjpcIlwiLFwiaW5zdHJ1Y3Rpb25zXCI6XCJcIn0iLCJvcmRlckluZGV4IjoiMjUifSx7ImZpZWxkVHlwZUlEIjoiMSIsImxhYmVsIjoiQmVkIiwic2x1ZyI6ImJlZCIsInNldHRpbmdzIjoie1wiaXNSZXF1aXJlZFwiOlwiMVwiLFwicGxhY2Vob2xkZXJcIjpcIlwiLFwiZGVmYXVsdFZhbHVlXCI6XCJcIixcImluc3RydWN0aW9uc1wiOlwiXCJ9Iiwib3JkZXJJbmRleCI6IjI2In0seyJmaWVsZFR5cGVJRCI6IjEiLCJsYWJlbCI6IkJhdGgiLCJzbHVnIjoiYmF0aCIsInNldHRpbmdzIjoie1wiaXNSZXF1aXJlZFwiOlwiMVwiLFwicGxhY2Vob2xkZXJcIjpcIlwiLFwiZGVmYXVsdFZhbHVlXCI6XCJcIixcImluc3RydWN0aW9uc1wiOlwiXCJ9Iiwib3JkZXJJbmRleCI6IjI3In0seyJmaWVsZFR5cGVJRCI6IjEiLCJsYWJlbCI6IkdhcmFnZSIsInNsdWciOiJnYXJhZ2UiLCJzZXR0aW5ncyI6IntcImlzUmVxdWlyZWRcIjpcIjFcIixcInBsYWNlaG9sZGVyXCI6XCJcIixcImRlZmF1bHRWYWx1ZVwiOlwiXCIsXCJpbnN0cnVjdGlvbnNcIjpcIlwifSIsIm9yZGVySW5kZXgiOiIyOCJ9LHsiZmllbGRUeXBlSUQiOiIxIiwibGFiZWwiOiJEb3duIFBheW1lbnQgUGVyY2VudCIsInNsdWciOiJkb3duLXBheW1lbnQtcGVyY2VudCIsInNldHRpbmdzIjoie1wiaXNSZXF1aXJlZFwiOlwiXCIsXCJwbGFjZWhvbGRlclwiOlwiXCIsXCJkZWZhdWx0VmFsdWVcIjpcIlwiLFwiaW5zdHJ1Y3Rpb25zXCI6XCJcIn0iLCJvcmRlckluZGV4IjoiMiJ9LHsiZmllbGRUeXBlSUQiOiIxIiwibGFiZWwiOiJMb2FuIFBheW1lbnQgTW9udGhseSIsInNsdWciOiJsb2FuLXBheW1lbnQtbW9udGhseSIsInNldHRpbmdzIjoie1wiaXNSZXF1aXJlZFwiOlwiXCIsXCJwbGFjZWhvbGRlclwiOlwiXCIsXCJkZWZhdWx0VmFsdWVcIjpcIlwiLFwiaW5zdHJ1Y3Rpb25zXCI6XCJcIn0iLCJvcmRlckluZGV4IjoiNiJ9LHsiZmllbGRUeXBlSUQiOiIxIiwibGFiZWwiOiJMb2FuIFBheW1lbnQgWWVhcmx5Iiwic2x1ZyI6ImxvYW4tcGF5bWVudC15ZWFybHkiLCJzZXR0aW5ncyI6IntcImlzUmVxdWlyZWRcIjpcIlwiLFwicGxhY2Vob2xkZXJcIjpcIlwiLFwiZGVmYXVsdFZhbHVlXCI6XCJcIixcImluc3RydWN0aW9uc1wiOlwiXCJ9Iiwib3JkZXJJbmRleCI6IjcifV19
HTML
<html>
<head>
<title>ROI Calculator | </title>
<meta name="description" content="Find out what your Return on Investment might be. Learn about the numerous variables that affect the profit from rental properties."/>
<link rel="stylesheet" href="/css/roi-calculator-bs5.css">
<!-- <link rel="stylesheet" href="https://printjs-4de6.kxcdn.com/print.min.css"> -->
</head>
<body>
<div id="roi-calculator">
<section class="calc-instructions">
<h1 class="calc-instructions__heading">ROI Calculator</h1>
<h2 class="calc-instructions__sub">Instructions</h2>
<p>Maximize your property investment with our ROI Calculator! Input your property details and financial metrics, and instantly gauge your expected return on investment. Tailored for property owners and investors, this tool provides a clear snapshot of potential earnings, helping you make informed decisions for your property management journey. Click on the toggle below to display additional instructions.</p>
<div class="form-check form-switch calc-instructions__toggle custom-control custom-switch">
<span class="custom-switch__label custom-switch__label--left">Hide</span>
<input class="form-check-input custom-control-input collapsed" type="checkbox" role="switch" id="instructionsSwitch" data-bs-toggle="collapse" data-bs-target="#collapseInstructions" aria-expanded="true" aria-controls="collapseInstructions">
<label class="form-check-label custom-switch__label custom-switch__label--right" for="instructionsSwitch">Show</label>
</div>
<div class="calc-instructions__steps collapse" id="collapseInstructions">
<div class="row">
<div class="col-lg-3 col-md-6">
<p>
1. Enter your information into each required field. Hover the info bubbles for more information.
</p>
</div>
<div class="col-lg-3 col-md-6">
<p>
2. Populating all editable fields with values will increase the accuracy of the results.
</p>
</div>
<div class="col-lg-3 col-md-6">
<p>
3. You may go back at any time to modify the contents of the fields.
</p>
</div>
<div class="col-lg-3 col-md-6">
<p>
4. Click “Calculate” to populate your results immediately.
</p>
</div>
</div>
</div>
</section>
<section class="calc-form" data-ion="form" data-name="roi-calculator" data-inline="1">
<form>
<div id="calcCarousel" class="calc-form__carousel carousel slide" data-bs-ride="false" data-bs-interval="false" data-bs-wrap="false" data-bs-touch="false">
<div class="carousel-inner">
<div class="carousel-item active">
<h3 class="calc-form__heading">step 1 0f 3</h3>
<h4 class="calc-form__sub">FINANCING</h4>
<div class="calc-form__container">
<div class="form-group form-group-text is-required">
<label for="purchase_price">Purchase Price*</label>
<div class="input-group">
<div class="input-group-prepend"><span class="input-group-text">$</span></div>
<input id="purchase_price" type="text" class="form-control" name="purchase-price" required data-bind="value: purchasePrice">
</div>
</div>
<div class="form-group form-group-text is-required">
<label for="down_payment">Down Payment* <span class="info-btn" data-toggle="tooltip" data-html="true" title="For full cash purchases for property, enter 100%"><i class="fal fa-info-circle"></i></span></label>
<div class="input-row">
<div class="input-group">
<div class="input-group-prepend"><span class="input-group-text">%</span></div>
<input id="down_payment_percent" type="text" class="form-control" name="down-payment-percent" data-bind="value: downPaymentPercent" required>
</div>
<div class="input-group input-group--readonly">
<div class="input-group-prepend"><span class="input-group-text">$</span></div>
<input id="down_payment" type="text" class="form-control" name="down-payment" data-bind="value: downPaymentAmount" readonly>
</div>
</div>
</div>
<div class="form-group form-group-text is-required">
<label for="interest_rate">Interest Rate*</label>
<div class="input-group">
<div class="input-group-prepend"><span class="input-group-text">%</span></div>
<input id="interest_rate" type="text" class="form-control" name="interest-rate" data-bind="value: interestRate" required>
</div>
</div>
<div class="form-group form-group-text is-required">
<label for="interest_rate">Interest Term* <span class="info-btn" data-toggle="tooltip" data-html="true" title="Loan Years Remaining"><i class="fal fa-info-circle"></i></span></label>
<div class="input-group">
<div class="input-group-prepend"><span class="input-group-text">Years</span></div>
<input id="interest_term" type="text" class="form-control" name="interest-term" data-bind="value: interestTerm" required>
</div>
</div>
<div class="form-group form-group-text is-required d-none">
<label for="loan_payment">Loan Payment</label>
<div class="input-group">
<div class="input-group-prepend"><span class="input-group-text">$/mo</span></div>
<input id="loan_payment_monthly" type="text" class="form-control" name="loan-payment-monthly" data-bind="value: loanPaymentMonthly" required>
</div>
<div class="input-group">
<div class="input-group-prepend"><span class="input-group-text">$/yr</span></div>
<input id="loan_payment_yearly" type="text" class="form-control" name="loan-payment-yearly" data-bind="value: loanPaymentYearly" required>
</div>
</div>
<div class="form-group form-group-text is-required">
<label for="capital_expenditure">Capital Expenditure <span class="info-btn" data-toggle="tooltip" data-html="true" title="All costs to prepare the property for “rent ready” status; post close"><i class="fal fa-info-circle"></i></span></label>
<div class="input-group">
<div class="input-group-prepend"><span class="input-group-text">$</span></div>
<input id="capital_expenditure" type="text" class="form-control" name="capital-expenditure" data-bind="value: capitalExpenditure">
</div>
</div>
<div class="form-group form-group-text is-required">
<label for="estimated_closing_costs">Estimated Closing Costs</label>
<div class="input-group">
<div class="input-group-prepend"><span class="input-group-text">$</span></div>
<input id="estimated_closing_costs" type="text" class="form-control" name="estimated-closing-costs" data-bind="value: closingCosts">
</div>
</div>
</div>
<div class="calc-form__controls">
<button class="calc-form__btn ms-auto" href="#calcCarousel" role="button" data-bs-slide="next">Next</button>
</div>
</div>
<div class="carousel-item">
<h3 class="calc-form__heading">step 2 0f 3</h3>
<h4 class="calc-form__sub">income & Expenses</h4>
<div class="calc-form__container">
<div class="form-group form-group-text is-required">
<label for="rent">Rent*</label>
<div class="input-group">
<div class="input-group-prepend"><span class="input-group-text">$/Mo</span></div>
<input id="rent" type="text" class="form-control" name="rent" data-bind="value: rentMonthly" required>
</div>
</div>
<div class="form-group form-group-text is-required">
<label for="vacancy_rate">Vacancy Rate <span class="info-btn" data-toggle="tooltip" data-html="true" title="7% Annual Average"><i class="fal fa-info-circle"></i></span></label>
<div class="input-group">
<div class="input-group-prepend"><span class="input-group-text">%</span></div>
<input id="vacancy_rate" type="text" class="form-control" name="vacancy-rate" data-bind="value: vacancyRate">
</div>
</div>
<div class="form-group form-group-text is-required">
<label for="property_taxes">Property Taxes</label>
<div class="input-group">
<div class="input-group-prepend"><span class="input-group-text">%</span></div>
<input id="property_taxes" type="text" class="form-control" name="property-taxes" data-bind="value: propertyTaxRate">
</div>
</div>
<div class="form-group form-group-text is-required">
<label for="management_fees">Management Fees</label>
<div class="input-group">
<div class="input-group-prepend"><span class="input-group-text">%</span></div>
<input id="management_fees" type="text" class="form-control" name="management-fees" data-bind="value: managementFeesRate">
</div>
</div>
<div class="form-group form-group-text is-required">
<label for="annual_maintenance_budget">Annual Maintenance Budget <span class="info-btn" data-toggle="tooltip" data-html="true" title="Costs vary based on age of investment property"><i class="fal fa-info-circle"></i></span></label>
<div class="input-group">
<div class="input-group-prepend"><span class="input-group-text">% Rent</span></div>
<input id="annual_maintenance_budget" type="text" class="form-control" name="annual-maintenance-budget" data-bind="value: maintenanceBudgetRate">
</div>
</div>
<div class="form-group form-group-text is-required">
<label for="annual_insurance">Annual Insurance</label>
<div class="input-group">
<div class="input-group-prepend"><span class="input-group-text">$</span></div>
<input id="annual_insurance" type="text" class="form-control" name="annual-insurance" data-bind="value: insurance">
</div>
</div>
<div class="form-group form-group-text is-required">
<label for="hoa_dues_monthly">HOA Dues Monthly</label>
<div class="input-group">
<div class="input-group-prepend"><span class="input-group-text">$/Mo</span></div>
<input id="hoa_dues_monthly" type="text" class="form-control" name="hoa-dues-monthly" data-bind="value: hoaDues">
</div>
</div>
<div class="form-group form-group-text is-required">
<label for="hoa_dues_yearly">HOA Dues Yearly</label>
<div class="input-group">
<div class="input-group-prepend"><span class="input-group-text">$/Yr</span></div>
<input id="hoa_dues_yearly" type="text" class="form-control" name="hoa-dues-yearly" data-bind="value: hoaDuesYearly">
</div>
</div>
</div>
<div class="calc-form__controls">
<button class="calc-form__btn" href="#calcCarousel" role="button" data-bs-slide="prev">Previous</button>
<button class="calc-form__btn" href="#calcCarousel" role="button" data-bs-slide="next">Next</button>
</div>
</div>
<div class="carousel-item">
<h3 class="calc-form__heading">step 3 0f 3</h3>
<h4 class="calc-form__sub">personal & Property information</h4>
<div class="calc-form__container">
<div class="form-group form-group-text is-required">
<label for="name">Name*</label>
<input id="name" type="text" class="form-control" name="name" required>
</div>
<div class="form-group form-group-email is-required">
<label for="email">Email*</label>
<input id="email" type="email" class="form-control" name="email" required>
</div>
<div class="form-group form-group-phone is-required">
<label for="phone">Phone*</label>
<input id="phone" type="tel" class="form-control" name="phone" required>
</div>
<div class="form-group form-group-text is-required">
<label for="property_address">Property Address*</label>
<input id="property_address" type="text" class="form-control" name="property-address" data-bind="textInput: propertyName" required>
</div>
<div class="form-group form-group-text is-required">
<label for="city">City*</label>
<input id="city" type="text" class="form-control" name="city" required>
</div>
<div class="form-group form-group-text is-required">
<label for="zip">Zip*</label>
<input id="zip" type="text" class="form-control" name="zip" required>
</div>
<div class="form-group form-group-text is-required">
<label for="sq_ft">Sq Ft*</label>
<input id="sq_ft" type="text" class="form-control" name="sqft" required>
</div>
<div class="form-group form-group-text is-required">
<label for="age">Age*</label>
<input id="age" type="text" class="form-control" name="age" required>
</div>
<div class="form-group form-group-text is-required">
<label for="bed">Bed*</label>
<input id="bed" type="text" class="form-control" name="bed" required>
</div>
<div class="form-group form-group-text is-required">
<label for="bath">Bath*</label>
<input id="bath" type="text" class="form-control" name="bath" required>
</div>
<div class="form-group form-group-text is-required">
<label for="garage">Garage*</label>
<input id="garage" type="text" class="form-control" name="garage" required>
</div>
<div class="form-group form-group-textarea">
<label for="comments">Comments*</label>
<textarea id="comments" type="text" class="form-control" name="comments"></textarea>
</div>
</div>
<div class="calc-form__controls">
<button class="calc-form__btn" href="#calcCarousel" role="button" data-bs-slide="prev">Previous</button>
<button id="calculate" type="submit" class="calc-form__btn">Get Results!</button>
<!-- <a id="calculate" class="btn calc-form__btn">Get Results!</a> -->
</div>
</div>
</div>
</div>
</form>
</section>
<section class="calc-results">
<h2 class="calc-results__heading">Results</h2>
<div class="calc-results__table">
<div id="results" class="results">
<div class="row">
<div class="col-lg-6 d-none">
<h4>EFFECTIVE RENT: $<span id="effective_rent" data-bind="text: effectiveRent"></span></h4>
</div>
<div class="col-lg-6 d-none">
<h4>LOAN + OPERATING COSTS: $<span id="operating_costs" data-bind="text: operatingCosts"></span></h4>
</div>
</div>
<div class="row">
<div class="col-lg-6">
<h4>NET OPERATING INCOME: $<span id="net_operating_income" data-bind="text: netOperatingIncome"></span></h4>
</div>
<div class="col-lg-6">
<h4>TOTAL CAPITAL OUTLAY: $<span id="total_capital_outlay" data-bind="text: totalCapitalOutlay"></span></h4>
</div>
</div>
<table>
<thead>
<tr>
<th>Year</th>
<th>Capital ROI</th>
<th>Equity</th>
<th>ROI</th>
<th>TOTAL</th>
</tr>
</thead>
<tbody>
<tr>
<th class="th">1</th>
<td><span class="addon">% </span><span class="result" data-bind="text: capitalROI_1yr"></span></td>
<td><span class="addon">% </span><span class="result equity_1yr" data-bind="text: equity_1yr"></span></td>
<td><span class="addon">% </span><span class="result appreciation_1yr" data-bind="text: appreciation_1yr"></span></td>
<td><span class="addon">% </span><span class="result total_1yr" data-bind="text: total_1yr"></span></td>
</tr>
<tr>
<th class="th">15</th>
<td><span class="addon">% </span><span class="result" data-bind="text: capitalROI_15yr"></span></td>
<td><span class="addon">% </span><span class="result equity_15yr" data-bind="text: equity_15yr"></span></td>
<td><span class="addon">% </span><span class="result appreciation_15yr" data-bind="text: appreciation_15yr"></span></td>
<td><span class="addon">% </span><span class="result total_15yr" data-bind="text: total_15yr"></span></td>
</tr>
</tbody>
</table>
</div>
<div class="row justify-content-center">
<div class="col-xl-5 col-lg-6">
<div class="analysis debt-retirement">
<h3>DEBT RETIREMENT ANALYSIS</h3>
<h4>Debt: $<span id="debt" data-bind="text: debt"></span></h4>
<table>
<thead>
<tr>
<th>Year</th>
<th>Equity</th>
<th>Total</th>
<th>ROI</th>
</tr>
</thead>
<tbody>
<tr>
<th>1</th>
<td class="debt-retirement-equity-yr-1"></td>
<td class="debt-retirement-total-yr-1"></td>
<td class="debt-retirement-roi-yr-1"></td>
</tr>
<tr>
<th>2</th>
<td class="debt-retirement-equity-yr-2"></td>
<td class="debt-retirement-total-yr-2"></td>
<td class="debt-retirement-roi-yr-2"></td>
</tr>
<tr>
<th>3</th>
<td class="debt-retirement-equity-yr-3"></td>
<td class="debt-retirement-total-yr-3"></td>
<td class="debt-retirement-roi-yr-3"></td>
</tr>
<tr>
<th>4</th>
<td class="debt-retirement-equity-yr-4"></td>
<td class="debt-retirement-total-yr-4"></td>
<td class="debt-retirement-roi-yr-4"></td>
</tr>
<tr>
<th>5</th>
<td class="debt-retirement-equity-yr-5"></td>
<td class="debt-retirement-total-yr-5"></td>
<td class="debt-retirement-roi-yr-5"></td>
</tr>
<tr>
<th>6</th>
<td class="debt-retirement-equity-yr-6"></td>
<td class="debt-retirement-total-yr-6"></td>
<td class="debt-retirement-roi-yr-6"></td>
</tr>
<tr>
<th>7</th>
<td class="debt-retirement-equity-yr-7"></td>
<td class="debt-retirement-total-yr-7"></td>
<td class="debt-retirement-roi-yr-7"></td>
</tr>
<tr>
<th>8</th>
<td class="debt-retirement-equity-yr-8"></td>
<td class="debt-retirement-total-yr-8"></td>
<td class="debt-retirement-roi-yr-8"></td>
</tr>
<tr>
<th>9</th>
<td class="debt-retirement-equity-yr-9"></td>
<td class="debt-retirement-total-yr-9"></td>
<td class="debt-retirement-roi-yr-9"></td>
</tr>
<tr>
<th>10</th>
<td class="debt-retirement-equity-yr-10"></td>
<td class="debt-retirement-total-yr-10"></td>
<td class="debt-retirement-roi-yr-10"></td>
</tr>
<tr>
<th>11</th>
<td class="debt-retirement-equity-yr-11"></td>
<td class="debt-retirement-total-yr-11"></td>
<td class="debt-retirement-roi-yr-11"></td>
</tr>
<tr>
<th>12</th>
<td class="debt-retirement-equity-yr-12"></td>
<td class="debt-retirement-total-yr-12"></td>
<td class="debt-retirement-roi-yr-12"></td>
</tr>
<tr>
<th>13</th>
<td class="debt-retirement-equity-yr-13"></td>
<td class="debt-retirement-total-yr-13"></td>
<td class="debt-retirement-roi-yr-13"></td>
</tr>
<tr>
<th>14</th>
<td class="debt-retirement-equity-yr-14"></td>
<td class="debt-retirement-total-yr-14"></td>
<td class="debt-retirement-roi-yr-14"></td>
</tr>
<tr>
<th>15</th>
<td class="debt-retirement-equity-yr-15"></td>
<td class="debt-retirement-total-yr-15"></td>
<td class="debt-retirement-roi-yr-15"></td>
</tr>
<tr>
<th>16</th>
<td class="debt-retirement-equity-yr-16"></td>
<td class="debt-retirement-total-yr-16"></td>
<td class="debt-retirement-roi-yr-16"></td>
</tr>
<tr>
<th>17</th>
<td class="debt-retirement-equity-yr-17"></td>
<td class="debt-retirement-total-yr-17"></td>
<td class="debt-retirement-roi-yr-17"></td>
</tr>
<tr>
<th>18</th>
<td class="debt-retirement-equity-yr-18"></td>
<td class="debt-retirement-total-yr-18"></td>
<td class="debt-retirement-roi-yr-18"></td>
</tr>
<tr>
<th>19</th>
<td class="debt-retirement-equity-yr-19"></td>
<td class="debt-retirement-total-yr-19"></td>
<td class="debt-retirement-roi-yr-19"></td>
</tr>
<tr>
<th>20</th>
<td class="debt-retirement-equity-yr-20"></td>
<td class="debt-retirement-total-yr-20"></td>
<td class="debt-retirement-roi-yr-20"></td>
</tr>
<tr>
<th>21</th>
<td class="debt-retirement-equity-yr-21"></td>
<td class="debt-retirement-total-yr-21"></td>
<td class="debt-retirement-roi-yr-21"></td>
</tr>
<tr>
<th>22</th>
<td class="debt-retirement-equity-yr-22"></td>
<td class="debt-retirement-total-yr-22"></td>
<td class="debt-retirement-roi-yr-22"></td>
</tr>
<tr>
<th>23</th>
<td class="debt-retirement-equity-yr-23"></td>
<td class="debt-retirement-total-yr-23"></td>
<td class="debt-retirement-roi-yr-23"></td>
</tr>
<tr>
<th>24</th>
<td class="debt-retirement-equity-yr-24"></td>
<td class="debt-retirement-total-yr-24"></td>
<td class="debt-retirement-roi-yr-24"></td>
</tr>
<tr>
<th>25</th>
<td class="debt-retirement-equity-yr-25"></td>
<td class="debt-retirement-total-yr-25"></td>
<td class="debt-retirement-roi-yr-25"></td>
</tr>
<tr>
<th>26</th>
<td class="debt-retirement-equity-yr-26"></td>
<td class="debt-retirement-total-yr-26"></td>
<td class="debt-retirement-roi-yr-26"></td>
</tr>
<tr>
<th>27</th>
<td class="debt-retirement-equity-yr-27"></td>
<td class="debt-retirement-total-yr-27"></td>
<td class="debt-retirement-roi-yr-27"></td>
</tr>
<tr>
<th>28</th>
<td class="debt-retirement-equity-yr-28"></td>
<td class="debt-retirement-total-yr-28"></td>
<td class="debt-retirement-roi-yr-28"></td>
</tr>
<tr>
<th>29</th>
<td class="debt-retirement-equity-yr-29"></td>
<td class="debt-retirement-total-yr-29"></td>
<td class="debt-retirement-roi-yr-29"></td>
</tr>
<tr>
<th>30</th>
<td class="debt-retirement-equity-yr-30"></td>
<td class="debt-retirement-total-yr-30"></td>
<td class="debt-retirement-roi-yr-30"></td>
</tr>
</tbody>
</table>
</div>
</div>
<div class="col-xl-5 col-lg-6">
<div class="analysis appreciation">
<h3>APPRECIATION ANALYSIS</h3>
<div class="row justify-content-center">
<div class="col-md-5">
<h4>Purchase Price: $<span id="purchase_price" data-bind="text: purchasePrice"></span></h4>
</div>
<div class="col-md-5">
<h4>Appreciation Rate: <span id="appreciation_rate" data-bind="text: appreciationRate"></span>%</h4>
</div>
</div>
<table>
<thead>
<tr>
<th>Year</th>
<th>Increase</th>
<th>Value</th>
<th>ROI</th>
</tr>
</thead>
<tbody>
<tr>
<th>1</th>
<td class="appreciation-increase-yr-1"></td>
<td class="appreciation-value-yr-1"></td>
<td class="appreciation-roi-yr-1"></td>
</tr>
<tr>
<th>2</th>
<td class="appreciation-increase-yr-2"></td>
<td class="appreciation-value-yr-2"></td>
<td class="appreciation-roi-yr-2"></td>
</tr>
<tr>
<th>3</th>
<td class="appreciation-increase-yr-3"></td>
<td class="appreciation-value-yr-3"></td>
<td class="appreciation-roi-yr-3"></td>
</tr>
<tr>
<th>4</th>
<td class="appreciation-increase-yr-4"></td>
<td class="appreciation-value-yr-4"></td>
<td class="appreciation-roi-yr-4"></td>
</tr>
<tr>
<th>5</th>
<td class="appreciation-increase-yr-5"></td>
<td class="appreciation-value-yr-5"></td>
<td class="appreciation-roi-yr-5"></td>
</tr>
<tr>
<th>6</th>
<td class="appreciation-increase-yr-6"></td>
<td class="appreciation-value-yr-6"></td>
<td class="appreciation-roi-yr-6"></td>
</tr>
<tr>
<th>7</th>
<td class="appreciation-increase-yr-7"></td>
<td class="appreciation-value-yr-7"></td>
<td class="appreciation-roi-yr-7"></td>
</tr>
<tr>
<th>8</th>
<td class="appreciation-increase-yr-8"></td>
<td class="appreciation-value-yr-8"></td>
<td class="appreciation-roi-yr-8"></td>
</tr>
<tr>
<th>9</th>
<td class="appreciation-increase-yr-9"></td>
<td class="appreciation-value-yr-9"></td>
<td class="appreciation-roi-yr-9"></td>
</tr>
<tr>
<th>10</th>
<td class="appreciation-increase-yr-10"></td>
<td class="appreciation-value-yr-10"></td>
<td class="appreciation-roi-yr-10"></td>
</tr>
<tr>
<th>11</th>
<td class="appreciation-increase-yr-11"></td>
<td class="appreciation-value-yr-11"></td>
<td class="appreciation-roi-yr-11"></td>
</tr>
<tr>
<th>12</th>
<td class="appreciation-increase-yr-12"></td>
<td class="appreciation-value-yr-12"></td>
<td class="appreciation-roi-yr-12"></td>
</tr>
<tr>
<th>13</th>
<td class="appreciation-increase-yr-13"></td>
<td class="appreciation-value-yr-13"></td>
<td class="appreciation-roi-yr-13"></td>
</tr>
<tr>
<th>14</th>
<td class="appreciation-increase-yr-14"></td>
<td class="appreciation-value-yr-14"></td>
<td class="appreciation-roi-yr-14"></td>
</tr>
<tr>
<th>15</th>
<td class="appreciation-increase-yr-15"></td>
<td class="appreciation-value-yr-15"></td>
<td class="appreciation-roi-yr-15"></td>
</tr>
<tr>
<th>16</th>
<td class="appreciation-increase-yr-16"></td>
<td class="appreciation-value-yr-16"></td>
<td class="appreciation-roi-yr-16"></td>
</tr>
<tr>
<th>17</th>
<td class="appreciation-increase-yr-17"></td>
<td class="appreciation-value-yr-17"></td>
<td class="appreciation-roi-yr-17"></td>
</tr>
<tr>
<th>18</th>
<td class="appreciation-increase-yr-18"></td>
<td class="appreciation-value-yr-18"></td>
<td class="appreciation-roi-yr-18"></td>
</tr>
<tr>
<th>19</th>
<td class="appreciation-increase-yr-19"></td>
<td class="appreciation-value-yr-19"></td>
<td class="appreciation-roi-yr-19"></td>
</tr>
<tr>
<th>20</th>
<td class="appreciation-increase-yr-20"></td>
<td class="appreciation-value-yr-20"></td>
<td class="appreciation-roi-yr-20"></td>
</tr>
<tr>
<th>21</th>
<td class="appreciation-increase-yr-21"></td>
<td class="appreciation-value-yr-21"></td>
<td class="appreciation-roi-yr-21"></td>
</tr>
<tr>
<th>22</th>
<td class="appreciation-increase-yr-22"></td>
<td class="appreciation-value-yr-22"></td>
<td class="appreciation-roi-yr-22"></td>
</tr>
<tr>
<th>23</th>
<td class="appreciation-increase-yr-23"></td>
<td class="appreciation-value-yr-23"></td>
<td class="appreciation-roi-yr-23"></td>
</tr>
<tr>
<th>24</th>
<td class="appreciation-increase-yr-24"></td>
<td class="appreciation-value-yr-24"></td>
<td class="appreciation-roi-yr-24"></td>
</tr>
<tr>
<th>25</th>
<td class="appreciation-increase-yr-25"></td>
<td class="appreciation-value-yr-25"></td>
<td class="appreciation-roi-yr-25"></td>
</tr>
<tr>
<th>26</th>
<td class="appreciation-increase-yr-26"></td>
<td class="appreciation-value-yr-26"></td>
<td class="appreciation-roi-yr-26"></td>
</tr>
<tr>
<th>27</th>
<td class="appreciation-increase-yr-27"></td>
<td class="appreciation-value-yr-27"></td>
<td class="appreciation-roi-yr-27"></td>
</tr>
<tr>
<th>28</th>
<td class="appreciation-increase-yr-28"></td>
<td class="appreciation-value-yr-28"></td>
<td class="appreciation-roi-yr-28"></td>
</tr>
<tr>
<th>29</th>
<td class="appreciation-increase-yr-29"></td>
<td class="appreciation-value-yr-29"></td>
<td class="appreciation-roi-yr-29"></td>
</tr>
<tr>
<th>30</th>
<td class="appreciation-increase-yr-30"></td>
<td class="appreciation-value-yr-30"></td>
<td class="appreciation-roi-yr-30"></td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
</div>
</section>
<section id="calc-terms" class="pt-5 mt-5 mb-6 text-center container">
<h3 class="mb-4">Terms and Conditions</h3>
<p>
This Return on Investment Calculator (“ROI Calculator”) is provided by . By using the ROI Calculator and clicking the “Calculate” button, you agree that the information and estimates provided are for general information purposes and provided “as-is” without warranties of any kind, expressed or implied, including without limitation the warranties that it is free of defects, errors, viruses, merchantable and that it is fit for a particular purpose. Your usage of the ROI Calculator is at your own risk. Under no circumstances shall be liable for direct, indirect, incidental, special, or consequential damages, resulting from any aspect of your use of the ROI Calculator including but not limited to damages that arise from your inability to use the ROI Calculator or the interruption, modification, or termination of the ROI Calculator or any part thereof.
</p>
<p>
By completing the “Return On Investment” tool you have learned that there are numerous variables that affect the profit from rental properties. You may leverage this calculator to modify these variable amounts or percentages to calculate the outcome of results you expect or desire to receive. Also, the majority of SFR owners are investing for different reasons, some of which may be associated with “Cash Flow”, “Mortgage Principle Repayment” or simply “Property Value Appreciation” all of which are profitable options and highly desirable in aggregate.
</p>
<p>
When you pursue SFR rental property investments, rest assured you will need a professional, experienced property management company to guard your asset and income. Managing rental investments is different that property management and can be a full-time job where inexperience can cost you valuable time and money.
</p>
<p class="lead my-4">
We’re experts at helping serious investors like you allocate your time and resources!
</p>
<h4>
Schedule time with us today!
</h4>
</section>
</div>
<script defer src="https://cdnjs.cloudflare.com/ajax/libs/knockout/3.3.0/knockout-min.js" type="text/javascript"></script>
<!-- <script defer type="text/javascript" src="https://printjs-4de6.kxcdn.com/print.min.js"></script> -->
<script defer type="text/javascript" src="/js/roi-calculator-v3.js"></script>
</body>
</html>
CSS
/css/roi-calculator-bs5.css
#roi-calculator {
--primary: #0e5fa6;
--primary-rgb: 14,95,166;
--secondary: #2eaeea;
--dark: #0e5fa6;
--light: #2eaeea;
--gray: #f3f3f3;
--gray-dark: #111111;
--body-text: #111111;
--primary-font: 'darkmode-off', sans-serif;
--secondary-font: 'depot-new-web', sans-serif;
}
main { overflow: hidden; }
#roi-calculator { font-family: var(--primary-font); padding-bottom: 85px; }
.printed-header { display: none; text-align: center; }
.printed-header address, .printed-header address span { display: inline-block; }
#secondary-banner { justify-content: center; background-repeat: no-repeat; background-size: cover; padding-top: 0; }
#secondary-banner::after { display: none; }
#secondary-banner::before { content: ''; position: absolute; top: 0; left: 0; height: 100%; width: 100%; background: -webkit-gradient(linear,right top, left top,from(var(--light)), to(var(--secondary))); background: -o-linear-gradient(right,var(--light), var(--secondary)); background: linear-gradient(to left,var(--light), var(--secondary)); opacity: .8; }
#secondary-banner h1 { font-weight: 600; color: var(--gray); font-family: var(--primary-font); }
/* Instructions */
.calc-instructions { text-align: center; padding: 110px 5vw 30px; width: 1350px; max-width: 100%; margin: auto; letter-spacing: .05em; }
.calc-instructions__heading { font-size: 60px; margin: 0 0 25px; }
.calc-instructions__sub { font-size: 22px; letter-spacing: .05em; text-transform: uppercase; color: var(--body-text); margin: 0 0 55px; font-family: var(--primary-font); font-weight: 500; }
.calc-instructions__toggle { margin: 0 0 35px; padding: 0; display: flex; justify-content: center; align-items: center; }
.calc-instructions__steps { font-size: 16px; line-height: 1.875; text-align: left; }
.calc-instructions .custom-switch__label { }
.calc-instructions .custom-switch__label--left { padding-right: 45px; }
.calc-instructions .custom-switch__label--right { padding-left: 45px; }
.calc-instructions .form-switch .form-check-input { width: 72px; height: 22px; top: 2px; border-radius: 11px; border: 0; margin: auto 0; box-shadow: inset 0px 2px 16px 0px rgba(0, 0, 0, 0.2)!important; --bs-form-switch-bg: url(data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'%3e%3ccircle r='3' fill='%23919191'/%3e%3c/svg%3e); }
.calc-instructions .form-switch .form-check-input:checked { background-color: var(--primary); }
@media (max-width:500px) {
.calc-instructions__heading { font-size: 40px; }
}
/* Form */
.calc-form { text-align: center; padding: 0 5vw; width: 1350px; max-width: 100%; margin: 0 auto; letter-spacing: .05em; }
.calc-form__carousel .carousel-inner { overflow: visible; }
.calc-form__carousel .carousel-item { padding: 50px 15px; background: #fff; border-radius: 20px; box-shadow: 0px 6px 43px 0px rgba(0, 0, 0, 0.17); }
.calc-form__heading { font-size: 22px; letter-spacing: .05em; text-transform: uppercase; color: var(--body-text); margin: 0 0 10px; font-family: var(--primary-font); font-weight: 500; }
.calc-form__sub { font-size: 18px; letter-spacing: .05em; text-transform: uppercase; color: var(--body-text); margin: 0 0 55px; font-family: var(--primary-font); font-weight: 400; }
.calc-form__container { display: flex; flex-wrap: wrap; text-align: left; margin: -10px -10px 25px; }
.calc-form .form-group { padding: 10px; flex: 1 1 300px; margin-bottom: 10px; }
.calc-form .form-group label { font-size: 20px; display: block; }
.calc-form .form-group input:not(.form-check-input), .calc-form .form-group select, .calc-form .form-group textarea { border: 0; border-radius: 0; background: #f3f3f3; height: 54px; }
.calc-form .input-group-text { color: #737373; font-size: 20px; border: 0; border-radius: 0; background-color: #e0e0e0; min-width: 40px; text-align: center; height: 100%; }
.calc-form .form-group-comments, .calc-form .form-group-services { flex: 1 1 100%; }
.calc-form .form-text { line-height: 1.1; display: block; margin-top: 10px!important; }
.calc-form .form-check { margin-top: 1em; }
.input-group--readonly input, .input-group--readonly .input-group-text { background: #fff!important; }
.calc-form__advanced-toggle { display: block; margin: 30px 0 60px; font-size: 18px; text-transform: uppercase; color: var(--body-text); transition: .4s; }
.calc-form__advanced-toggle:hover { text-decoration: none; color: var(--primary); transition: .4s; }
.calc-form__controls { display: flex; justify-content: space-between; }
.calc-form__btn { display: block; text-transform: uppercase; font-weight: 500; font-size: 18px; height: 47px; line-height: 47px; padding: 0 20px!important; border-radius: 10px; background: var(--body-text); color: #fff; border: 0; min-width: 115px; transition: .5s; }
.calc-form__btn:hover { color: #fff; background: var(--primary); text-decoration: none; transition: .5s; }
/* Carousel Transitions */
.carousel-item-next:not(.carousel-item-start), .active.carousel-item-end { transform: translateX(100%) scale(0); }
.carousel-item-prev:not(.carousel-item-end), .active.carousel-item-start { transform: translateX(-100%) scale(0); }
@media (min-width: 992px) {
.calc-form__carousel .carousel-item { padding: 50px; }
}
/* Results */
.calc-results { padding: 85px 15px; text-align: center; position: absolute; transform: scale(0); opacity: 0; }
.calc-results__heading { font-size: 60px; font-weight: 500; text-transform: uppercase; margin: 0 0 50px; }
.calc-results__value { font-size: 22px; margin: 0 0 60px; font-weight: 400; line-height: 2; }
.calc-results__option { font-weight: 500; }
.calc-results__amount { font-size: 32px; font-weight: 500; color: var(--primary);}
.calc-form:has(.ion-form-success) + .calc-results, .calc-results.show { position: relative; transform: scale(1); opacity: 1; }
.calc-results__plot { position: relative; width: 1350px; max-width: 100%; margin: 0 auto; padding: 0 0 85px; }
.calc-results__plot .legend { font-size: 24px; text-transform: uppercase; font-weight: 500; line-height: 1; display: inline-flex; align-items: center; padding: 10px; }
.calc-results__plot .legend::before { content: ''; height: 17px; width: 17px; border-radius: 50%; display: block; margin-right: 15px; background-color: currentColor; }
.calc-results__plot .legend--rent { color: #1367a7; }
.calc-results__plot .legend--sell { color: #2eaeea; }
.calc-results__plot .jqplot-yaxis-label { position: absolute; transform: rotate(-90deg); transform-origin: center; top: 50%; left: 0; }
.calc-results__plot .jqplot-xaxis-label, .calc-results__plot .jqplot-yaxis-label { font-size: 22px; color: #a1a1a1; text-transform: uppercase; font-weight: 500; }
.jqplot-event-canvas, .jqplot-series-canvas { border-radius: 20px!important; }
@media (min-width: 992px) {
.calc-results__plot { padding: 0 140px 85px 50px; }
.calc-results__plot #legend { position: absolute; right: 0; top: 15px; display: flex; flex-direction: column; }
}
@media (max-width: 991px) {
.calc-results__plot #legend { padding-bottom: 35px; }
}
@media (max-width: 500px) {
.calc-results__heading { font-size: 35px; }
}
#calculate { color: #fff!important; }
.calc-results__table { width: 1718px; max-width: 100%; margin: 0 auto; overflow: hidden; text-align: left; }
.calc-results__table table { border-radius: 20px; overflow: hidden; text-align: left; width: 620px; max-width: 100%; margin: 0 auto; }
.calc-results__table tr { background: #f3f3f3; }
.calc-results__table tbody tr:nth-child(odd) { background: #e3e3e3; }
.calc-results__table thead th { padding: 25px 15px; font-size: 18px; width: 25%; }
.calc-results__table tbody th { font-weight: 500; text-transform: uppercase; text-align: left; vertical-align: middle; padding: 15px; }
.calc-results__table td { font-size: 16px; font-weight: 400; height: 50px; padding: 0 15px; white-space: nowrap; }
/* Mobile Table */
@media (max-width: 1100px){
.calc-results__table table { width: 100%; }
.calc-results__table, .calc-results__table table, .calc-results__table thead, .calc-results__table tbody, .calc-results__table th, .calc-results__table td, .calc-results__table tr { display: block; border: 0!important; }
.calc-results__table thead { display: none; }
.calc-results__table td { display: flex; justify-content: space-between; height: auto; min-height: 50px; padding: 8px; align-items: center; background: #fff; text-align: right; border: 1px solid var(--border-color)!important; }
.calc-results__table td:first-child { background: var(--primary); color: #fff; font-size: 18px; font-weight: bold; border: 0!important; }
.calc-results__table td:nth-of-type(even) { background: var(--gray); border-top: 0!important; border-bottom: 0!important; }
.calc-results__table th::before { content: 'Year '; }
.calc-results__table tbody th { text-align: center; background: #b3b3b3; }
.calc-results__table .debt-retirement td:nth-child(2)::before { content: 'Equity'; }
.calc-results__table .debt-retirement td:nth-child(3)::before { content: 'Total'; }
.calc-results__table .debt-retirement td:nth-child(4)::before { content: 'ROI'; }
.calc-results__table .appreciation td:nth-child(2)::before { content: 'Increase'; }
.calc-results__table .appreciation td:nth-child(3)::before { content: 'Value'; }
.calc-results__table .appreciation td:nth-child(4)::before { content: 'ROI'; }
.calc-results__table .results td::before { margin-right: auto; }
.calc-results__table .results td:nth-child(2)::before { content: 'Capital ROI'; }
.calc-results__table .results td:nth-child(3)::before { content: 'Equity'; }
.calc-results__table .results td:nth-child(4)::before { content: 'ROI'; }
.calc-results__table .results td:nth-child(5)::before { content: 'Total'; }
}
.calc-results__buttons { display: flex; margin: -15px; justify-content: center; padding-top: 80px; }
.calc-results__buttons a { margin: 15px; }
.calc-results__table .results { width: 790px; max-width: 100%; margin: 0 auto; }
.calc-results__table .analysis { margin-top: 80px; text-align: center; }
.calc-results__table h4 { text-align: center; margin: 45px auto; font-size: 20px; letter-spacing: .05em; text-transform: uppercase; }
.calc-results__table h4 span { font-weight: normal; }
Javascript
/js/roi-calculator-v3.js
// Init Tooltip
$(function () {
$('[data-toggle="tooltip"]').tooltip()
})
// Calculate Mortgage Payment
function pmt(rate_per_period, number_of_payments, present_value, future_value, type) {
if (rate_per_period != 0.0) {
// Interest rate exists
var q = Math.pow(1 + rate_per_period, number_of_payments);
return -(rate_per_period * (future_value + (q * present_value))) / ((-1 + q) * (1 + rate_per_period * (type)));
} else if (number_of_payments != 0.0) {
// No interest rate, but number of payments exists
return -(future_value + present_value) / number_of_payments;
}
return 0;
}
// Convert String to number
function importNum(num) {
return parseFloat(num.replace(/,\s?/g, ""));
};
function importInt(num) {
return parseInt(num.replace(/,\s?/g, ""));
};
// Print Number with Commas
function printNum(num) {
if (num != 'NaN') {
return Math.round(num).toLocaleString();
} else {
return '0';
}
};
var resultShown = false;
// Calculate ROI
function calculateROI() {
var self = this;
// Financing
self.propertyName = ko.observable('');
self.purchasePrice = ko.observable('0');
self.downPaymentPercent = ko.observable('0');
self.downPaymentAmount = ko.computed(function() {
return printNum(importNum(self.purchasePrice()) * (importNum(self.downPaymentPercent()) / 100));
});
self.interestRate = ko.observable('0');
self.interestTerm = ko.observable('0');
self.loanPayment = ko.computed(function() {
var loanAmount = importNum(self.purchasePrice()) - (importNum(self.purchasePrice()) * importNum(self.downPaymentPercent()) / 100);
var interest = importNum(self.interestRate()) / 100;
var result = pmt(interest / 12, importNum(self.interestTerm()) * 12, -loanAmount, 0, 0);
return result;
});
self.loanPaymentMonthly = ko.computed(function() {
return printNum(self.loanPayment());
});
self.loanPaymentYearly = ko.computed(function() {
return printNum(self.loanPayment() * 12);
});
self.capitalExpenditure = ko.observable('0');
self.closingCosts = ko.observable('0');
// Income
self.rentMonthly = ko.observable('0');
self.rentYearly = ko.computed(function() {
return printNum(importNum(self.rentMonthly()) * 12);
});
self.vacancyRate = ko.observable('5');
self.vacancyAmount = ko.computed(function() {
return printNum(importNum(self.vacancyRate()) / 100 * importNum(self.rentYearly()));
});
self.effectiveRent = ko.computed(function() {
return printNum(importNum(self.rentYearly()) - importNum(self.vacancyAmount()));
});
// Expenses
self.propertyTaxRate = ko.observable('0');
self.propertyTaxAmount = ko.computed(function() {
return printNum(importNum(self.propertyTaxRate()) / 100 * importNum(self.purchasePrice()));
});
self.managementFeesRate = ko.observable('9');
self.managementFeesMonthly = ko.computed(function() {
return printNum(importNum(self.managementFeesRate()) / 100 * importNum(self.rentMonthly()));
});
self.maintenanceBudgetRate = ko.observable('8');
self.maintenanceBudgetAmount = ko.computed(function() {
return printNum(importNum(self.maintenanceBudgetRate()) / 100 * importNum(self.rentMonthly()) * 12);
});
self.insurance = ko.observable('0');
self.hoaDues = ko.observable('0');
self.hoaDuesMonthly = ko.computed(function() {
if (self.hoaDues().length > 0 ) {
return self.hoaDues();
} else {
return 0;
}
});
self.hoaDuesYearly = ko.pureComputed({
read: function () {
return (importNum(self.hoaDuesMonthly()) * 12).toLocaleString();
},
write: function (value) {
var calc = (importNum(value)/12).toFixed(2);
self.hoaDues(calc.toLocaleString());
},
owner: this
});
self.operatingCosts = ko.computed(function() {
var operatingCosts_calc = printNum(importNum(self.loanPaymentYearly()) + importNum(self.propertyTaxAmount()) + importNum(self.hoaDuesYearly()) + (importNum(self.managementFeesMonthly()) * 12) + importNum(self.insurance()) + importNum(self.maintenanceBudgetAmount()));
if (operatingCosts_calc != 'NaN') {
return operatingCosts_calc;
} else {
return '0';
}
});
// Analysis
self.netOperatingIncome = ko.computed(function() {
var netOperatingIncome_calc = printNum(importNum(self.effectiveRent()) - importNum(self.operatingCosts()));
if (netOperatingIncome_calc != 'NaN') {
return netOperatingIncome_calc;
} else {
return '0';
}
});
self.totalCapitalOutlay = ko.computed(function() {
return printNum(importNum(self.downPaymentAmount()) + importNum(self.closingCosts()) + importNum(self.capitalExpenditure()));
});
// Debt
self.debt = ko.computed(function() {
return printNum(importNum(self.purchasePrice()) - (importNum(self.purchasePrice()) * importNum(self.downPaymentPercent()) / 100));
});
// Appreciation
self.appreciationRate = ko.observable('3');
// Debt Retirement
self.debt_retirement = ko.computed(function() {
// Calculate Principal Paid for Debt Retirement
var loanAmount = importInt(self.purchasePrice()) - (importInt(self.purchasePrice()) * importNum(self.downPaymentPercent()) / 100);
var monthlyInterestRate = (importNum(self.interestRate()) / 100) / 12;
var monthlyPayment = self.loanPayment();
var totalPayments = importInt(self.interestTerm()) * 12;
var totalInterest = monthlyPayment * totalPayments - loanAmount;
var totalLoanAmount = loanAmount + totalInterest;
var remainingBalance = loanAmount;
var principalPaymentArray = [];
var principalPaymentYrlyArray = new Array(importInt(self.interestTerm()));
var i;
var payment;
var yrPmt;
var total = 0;
principalPaymentYrlyArray.fill(0);
for (i = 1; i <= totalPayments; i++) {
var totalPaid = monthlyPayment * i;
var interestPayment = monthlyInterestRate * remainingBalance;
var principalPayment = monthlyPayment - interestPayment;
var remainingBalance = remainingBalance - principalPayment;
principalPaymentArray.push(principalPayment);
};
for (payment = 0; payment < principalPaymentArray.length; payment++) {
var year = parseInt(payment / 12);
principalPaymentYrlyArray[year] += principalPaymentArray[payment];
};
for (yrPmt = 0; yrPmt < 30; yrPmt++) {
if (principalPaymentYrlyArray[yrPmt]) {
$('.debt-retirement-equity-yr-' + (yrPmt + 1)).text('$ ' + printNum(principalPaymentYrlyArray[yrPmt]));
} else {
principalPaymentYrlyArray[yrPmt] = 0;
$('.debt-retirement-equity-yr-' + (yrPmt + 1)).text('$ ' + printNum(principalPaymentYrlyArray[yrPmt]));
}
total += principalPaymentYrlyArray[yrPmt];
$('.debt-retirement-total-yr-' + (yrPmt + 1)).text('$ ' + printNum(total));
var roi = total / importNum(self.totalCapitalOutlay()) / (yrPmt + 1);
if (roi) {
$('.debt-retirement-roi-yr-' + (yrPmt + 1)).text((roi * 100).toFixed(1) + ' %');
} else {
$('.debt-retirement-roi-yr-' + (yrPmt + 1)).text(0 + ' %');
}
};
return principalPaymentYrlyArray;
});
// Appreciation
self.appreciation = ko.computed(function() {
var increase = importInt(self.purchasePrice()) * (importNum(self.appreciationRate()) / 100);
var value = importNum(self.purchasePrice()) + increase;
var totalYears = importInt(self.interestTerm());
var year = 1;
for (year = 1; year <= totalYears; year++) {
$('.appreciation-value-yr-' + (year)).text('$ ' + printNum(value));
var roi = (increase / year / importNum(self.totalCapitalOutlay()));
$('.appreciation-roi-yr-' + (year)).text((roi * 100).toFixed(1) + ' %');
$('.appreciation-increase-yr-' + (year)).text('$ ' + printNum(increase));
increase += value * (importNum(self.appreciationRate()) / 100);
value = importNum(self.purchasePrice()) + increase;
};
return;
});
// Results
self.capitalROI_1yr = ko.computed(function() {
if (importNum(self.totalCapitalOutlay()) == 0) {
return (importNum(self.netOperatingIncome()) * 100).toFixed(1);
} else {
return ((importNum(self.netOperatingIncome()) / importNum(self.totalCapitalOutlay())) * 100).toFixed(1);
}
});
self.capitalROI_15yr = ko.computed(function() {
var capitalROI_15yr_calculation = (((importNum(self.netOperatingIncome()) * 15) / importNum(self.totalCapitalOutlay())) * 100).toFixed(1);
if (capitalROI_15yr_calculation != 'NaN') {
return capitalROI_15yr_calculation;
} else {
return 0;
}
});
self.equity_1yr = ko.computed(function() {
return $('.debt-retirement-roi-yr-1').text().replace('%', '');
});
self.equity_1yr_calc = ko.observable();
self.equity_15yr = ko.computed(function() {
var equity_15yr_calculation = ((importNum($('.debt-retirement-total-yr-15').text().replace('$ ', '')))) / self.debt() * 100;
return equity_15yr_calculation;
});
self.appreciation_1yr = ko.computed(function() {
return $('.appreciation-roi-yr-1').text().replace('%', '');
});
self.appreciation_15yr = ko.computed(function() {
return $('.appreciation-roi-yr-15').text().replace('%', '');
});
self.total_1yr = ko.computed(function() {
var total_1yr_calculation = ((importNum($('.debt-retirement-equity-yr-1').text().replace('$ ', '')) + importNum($('.appreciation-increase-yr-1').text().replace('$ ', '')) + importNum(self.netOperatingIncome())) / importNum(self.totalCapitalOutlay()) * 100).toFixed(1);
if (total_1yr_calculation != 'NaN') {
return total_1yr_calculation;
} else {
return 0;
console.log('error')
}
});
self.total_15yr = ko.computed(function() {
// var total_15yr_calculation = ((importNum($('.debt-retirement .equity .yr-15').text().replace('$ ', '')) + importNum($('.appreciation .increase .yr-15').text().replace('$ ', '')) + (importNum(self.netOperatingIncome())) * 15) / importNum(self.totalCapitalOutlay()) * 100).toFixed(1);
var total_15yr_calculation = ( ( importInt(self.netOperatingIncome()) * 15 ) + ((importNum($('.debt-retirement-total-yr-15').text().replace('$ ', '')))) + importNum($('.appreciation-increase-yr-15').text().replace('$ ', '')) ) / importInt(self.totalCapitalOutlay()) * 100 ;
if ( resultShown == true ){
$('.results .result').fadeOut();
resultShown = false;
}
if (total_15yr_calculation != 'NaN') {
return total_15yr_calculation.toFixed(1);
} else {
return 0;
console.log('error')
}
});
};
ko.applyBindings(new calculateROI());
function printResults() {
var equity_1yr_result = $('.debt-retirement-roi-yr-1').text().replace('%', '');
$('.result.equity_1yr').text(equity_1yr_result);
var equity_15yr_result = ((importNum($('.debt-retirement-total-yr-15').text().replace('$ ', '')))) / ((importNum($('#debt').text()))) * 100;
$('.result.equity_15yr').text(equity_15yr_result.toFixed(1));
var appreciation_1yr_result = $('.appreciation-roi-yr-1').text().replace('%', '');
$('.result.appreciation_1yr').text(appreciation_1yr_result);
var appreciation_15yr_result = importNum($('.appreciation-increase-yr-15').text().replace('$ ', '')) / ((importNum($('#purchase_price').val().replace('$ ', '')))) * 100;
$('.result.appreciation_15yr').text(appreciation_15yr_result.toFixed(1));
var total_1yr_result = ( ( ((importNum($('#net_operating_income').text()))) * 1 ) + ((importNum($('.debt-retirement-total-yr-1').text().replace('$ ', '')))) + importNum($('.appreciation-increase-yr-1').text().replace('$ ', '')) ) / ((importNum($('#total_capital_outlay').text()))) * 100;
$('.result.total_1yr').text(total_1yr_result.toFixed(1));
var total_15yr_result = ( ( ((importNum($('#net_operating_income').text()))) * 1 ) + ((importNum($('.debt-retirement-total-yr-15').text().replace('$ ', '')))) + importNum($('.appreciation-increase-yr-15').text().replace('$ ', '')) ) / ((importNum($('#total_capital_outlay').text()))) * 100;
// var total_15yr_result = ( ((importNum($('.debt-retirement .total .yr-15').text().replace('$ ', '')))) + importNum($('.appreciation .increase .yr-15').text().replace('$ ', '')) ) / ((importNum($('#total_capital_outlay').val().replace('$ ', '')))) * 100;
$('.result.total_15yr').text(total_15yr_result.toFixed(1));
$('.results .result').each(function() {
$(this).fadeIn();
});
resultShown = true;
}
function validateInputs() {
$('[required]').each(function() {
if ($(this).val().length >= 0 && $(this).val() != 0) {
$(this).removeClass('warning');
} else {
$(this).addClass('warning');
}
});
return $('input.warning').length;
}
$('#calculate').click(function() {
validateInputs();
if (validateInputs() == 0) {
printResults();
if ($(".ion-form-success").length > 0) {
// $('.calc-results').show(function() {
//
// });
// printResults();
$('.calc-results').addClass('show');
$('.calc-instructions').addClass('d-none');
$('html, body').animate({
scrollTop: $('.calc-results').offset().top - 50
}, 1000);
};
}
});
// Show Result on Enter
var calculator = document.getElementById("roi-calculator");
calculator.addEventListener("keyup", function(event) {
if (event.keyCode === 13) {
event.preventDefault();
validateInputs();
if (validateInputs() == 0) {
printResults();
}
}
});
$('#print').click(function() {
printJS({
printable: 'roi-calculator',
type: 'html',
// header: '