ROI Calculator - Bootstrap 4
Example: https://theroicalculator.nesthub.com
View Bootstrap 3 Code View Bootstrap 5 CodeForm Import
eyJuYW1lIjoiUk9JIENhbGN1bGF0b3IiLCJzbHVnIjoicm9pLWNhbGN1bGF0b3IiLCJzdWNjZXNzTWVzc2FnZSI6bnVsbCwiaXNMZWFkIjoiMCIsImZpZWxkcyI6W3siZmllbGRUeXBlSUQiOiIxIiwibGFiZWwiOiJQdXJjaGFzZSBQcmljZSIsInNsdWciOiJwdXJjaGFzZS1wcmljZSIsInNldHRpbmdzIjoie1wiaXNSZXF1aXJlZFwiOlwiMVwiLFwicGxhY2Vob2xkZXJcIjpcIlwiLFwiZGVmYXVsdFZhbHVlXCI6XCJcIixcImluc3RydWN0aW9uc1wiOlwiXCJ9Iiwib3JkZXJJbmRleCI6IjEifSx7ImZpZWxkVHlwZUlEIjoiMSIsImxhYmVsIjoiRG93biBQYXltZW50Iiwic2x1ZyI6ImRvd24tcGF5bWVudCIsInNldHRpbmdzIjoie1wiaXNSZXF1aXJlZFwiOlwiMVwiLFwicGxhY2Vob2xkZXJcIjpcIlwiLFwiZGVmYXVsdFZhbHVlXCI6XCJcIixcImluc3RydWN0aW9uc1wiOlwiXCJ9Iiwib3JkZXJJbmRleCI6IjMifSx7ImZpZWxkVHlwZUlEIjoiMSIsImxhYmVsIjoiSW50ZXJlc3QgUmF0ZSIsInNsdWciOiJpbnRlcmVzdC1yYXRlIiwic2V0dGluZ3MiOiJ7XCJpc1JlcXVpcmVkXCI6XCIxXCIsXCJwbGFjZWhvbGRlclwiOlwiXCIsXCJkZWZhdWx0VmFsdWVcIjpcIlwiLFwiaW5zdHJ1Y3Rpb25zXCI6XCJcIn0iLCJvcmRlckluZGV4IjoiNCJ9LHsiZmllbGRUeXBlSUQiOiIxIiwibGFiZWwiOiJJbnRlcmVzdCBUZXJtIiwic2x1ZyI6ImludGVyZXN0LXRlcm0iLCJzZXR0aW5ncyI6IntcImlzUmVxdWlyZWRcIjpcIjFcIixcInBsYWNlaG9sZGVyXCI6XCJcIixcImRlZmF1bHRWYWx1ZVwiOlwiXCIsXCJpbnN0cnVjdGlvbnNcIjpcIlwifSIsIm9yZGVySW5kZXgiOiI1In0seyJmaWVsZFR5cGVJRCI6IjEiLCJsYWJlbCI6IkNhcGl0YWwgRXhwZW5kaXR1cmUiLCJzbHVnIjoiY2FwaXRhbC1leHBlbmRpdHVyZSIsInNldHRpbmdzIjoie1wiaXNSZXF1aXJlZFwiOlwiXCIsXCJwbGFjZWhvbGRlclwiOlwiXCIsXCJkZWZhdWx0VmFsdWVcIjpcIlwiLFwiaW5zdHJ1Y3Rpb25zXCI6XCJcIn0iLCJvcmRlckluZGV4IjoiOCJ9LHsiZmllbGRUeXBlSUQiOiIxIiwibGFiZWwiOiJFc3RpbWF0ZWQgQ2xvc2luZyBDb3N0cyIsInNsdWciOiJlc3RpbWF0ZWQtY2xvc2luZy1jb3N0cyIsInNldHRpbmdzIjoie1wiaXNSZXF1aXJlZFwiOlwiMVwiLFwicGxhY2Vob2xkZXJcIjpcIlwiLFwiZGVmYXVsdFZhbHVlXCI6XCJcIixcImluc3RydWN0aW9uc1wiOlwiXCJ9Iiwib3JkZXJJbmRleCI6IjkifSx7ImZpZWxkVHlwZUlEIjoiMSIsImxhYmVsIjoiUmVudCIsInNsdWciOiJyZW50Iiwic2V0dGluZ3MiOiJ7XCJpc1JlcXVpcmVkXCI6XCIxXCIsXCJwbGFjZWhvbGRlclwiOlwiXCIsXCJkZWZhdWx0VmFsdWVcIjpcIlwiLFwiaW5zdHJ1Y3Rpb25zXCI6XCJcIn0iLCJvcmRlckluZGV4IjoiMTAifSx7ImZpZWxkVHlwZUlEIjoiMSIsImxhYmVsIjoiVmFjYW5jeSBSYXRlIiwic2x1ZyI6InZhY2FuY3ktcmF0ZSIsInNldHRpbmdzIjoie1wiaXNSZXF1aXJlZFwiOlwiXCIsXCJwbGFjZWhvbGRlclwiOlwiXCIsXCJkZWZhdWx0VmFsdWVcIjpcIlwiLFwiaW5zdHJ1Y3Rpb25zXCI6XCJcIn0iLCJvcmRlckluZGV4IjoiMTEifSx7ImZpZWxkVHlwZUlEIjoiMSIsImxhYmVsIjoiUHJvcGVydHkgVGF4ZXMiLCJzbHVnIjoicHJvcGVydHktdGF4ZXMiLCJzZXR0aW5ncyI6IntcImlzUmVxdWlyZWRcIjpcIlwiLFwicGxhY2Vob2xkZXJcIjpcIlwiLFwiZGVmYXVsdFZhbHVlXCI6XCJcIixcImluc3RydWN0aW9uc1wiOlwiXCJ9Iiwib3JkZXJJbmRleCI6IjEyIn0seyJmaWVsZFR5cGVJRCI6IjEiLCJsYWJlbCI6Ik1hbmFnZW1lbnQgRmVlcyIsInNsdWciOiJtYW5hZ2VtZW50LWZlZXMiLCJzZXR0aW5ncyI6IntcImlzUmVxdWlyZWRcIjpcIlwiLFwicGxhY2Vob2xkZXJcIjpcIlwiLFwiZGVmYXVsdFZhbHVlXCI6XCJcIixcImluc3RydWN0aW9uc1wiOlwiXCJ9Iiwib3JkZXJJbmRleCI6IjEzIn0seyJmaWVsZFR5cGVJRCI6IjEiLCJsYWJlbCI6IkFubnVhbCBNYWludGVuYW5jZSBCdWRnZXQiLCJzbHVnIjoiYW5udWFsLW1haW50ZW5hbmNlLWJ1ZGdldCIsInNldHRpbmdzIjoie1wiaXNSZXF1aXJlZFwiOlwiXCIsXCJwbGFjZWhvbGRlclwiOlwiXCIsXCJkZWZhdWx0VmFsdWVcIjpcIlwiLFwiaW5zdHJ1Y3Rpb25zXCI6XCJcIn0iLCJvcmRlckluZGV4IjoiMTQifSx7ImZpZWxkVHlwZUlEIjoiMSIsImxhYmVsIjoiQW5udWFsIEluc3VyYW5jZSIsInNsdWciOiJhbm51YWwtaW5zdXJhbmNlIiwic2V0dGluZ3MiOiJ7XCJpc1JlcXVpcmVkXCI6XCJcIixcInBsYWNlaG9sZGVyXCI6XCJcIixcImRlZmF1bHRWYWx1ZVwiOlwiXCIsXCJpbnN0cnVjdGlvbnNcIjpcIlwifSIsIm9yZGVySW5kZXgiOiIxNSJ9LHsiZmllbGRUeXBlSUQiOiIxIiwibGFiZWwiOiJIT0EgRHVlcyBNb250aGx5Iiwic2x1ZyI6ImhvYS1kdWVzLW1vbnRobHkiLCJzZXR0aW5ncyI6IntcImlzUmVxdWlyZWRcIjpcIlwiLFwicGxhY2Vob2xkZXJcIjpcIlwiLFwiZGVmYXVsdFZhbHVlXCI6XCJcIixcImluc3RydWN0aW9uc1wiOlwiXCJ9Iiwib3JkZXJJbmRleCI6IjE2In0seyJmaWVsZFR5cGVJRCI6IjEiLCJsYWJlbCI6IkhPQSBEdWVzIFllYXJseSIsInNsdWciOiJob2EtZHVlcy15ZWFybHkiLCJzZXR0aW5ncyI6IntcImlzUmVxdWlyZWRcIjpcIlwiLFwicGxhY2Vob2xkZXJcIjpcIlwiLFwiZGVmYXVsdFZhbHVlXCI6XCJcIixcImluc3RydWN0aW9uc1wiOlwiXCJ9Iiwib3JkZXJJbmRleCI6IjE3In0seyJmaWVsZFR5cGVJRCI6IjEiLCJsYWJlbCI6Ik5hbWUiLCJzbHVnIjoibmFtZSIsInNldHRpbmdzIjoie1wiaXNSZXF1aXJlZFwiOlwiMVwiLFwicGxhY2Vob2xkZXJcIjpcIlwiLFwiZGVmYXVsdFZhbHVlXCI6XCJcIixcImluc3RydWN0aW9uc1wiOlwiXCJ9Iiwib3JkZXJJbmRleCI6IjE4In0seyJmaWVsZFR5cGVJRCI6IjMiLCJsYWJlbCI6IkVtYWlsIiwic2x1ZyI6ImVtYWlsIiwic2V0dGluZ3MiOiJ7XCJpc1JlcXVpcmVkXCI6XCIxXCIsXCJwbGFjZWhvbGRlclwiOlwiXCIsXCJkZWZhdWx0VmFsdWVcIjpcIlwiLFwiaW5zdHJ1Y3Rpb25zXCI6XCJcIn0iLCJvcmRlckluZGV4IjoiMTkifSx7ImZpZWxkVHlwZUlEIjoiMTAiLCJsYWJlbCI6IlBob25lIiwic2x1ZyI6InBob25lIiwic2V0dGluZ3MiOiJ7XCJpc1JlcXVpcmVkXCI6XCIxXCIsXCJwbGFjZWhvbGRlclwiOlwiXCIsXCJkZWZhdWx0VmFsdWVcIjpcIlwiLFwiaW5zdHJ1Y3Rpb25zXCI6XCJcIn0iLCJvcmRlckluZGV4IjoiMjAifSx7ImZpZWxkVHlwZUlEIjoiMSIsImxhYmVsIjoiUHJvcGVydHkgQWRkcmVzcyIsInNsdWciOiJwcm9wZXJ0eS1hZGRyZXNzIiwic2V0dGluZ3MiOiJ7XCJpc1JlcXVpcmVkXCI6XCIxXCIsXCJwbGFjZWhvbGRlclwiOlwiXCIsXCJkZWZhdWx0VmFsdWVcIjpcIlwiLFwiaW5zdHJ1Y3Rpb25zXCI6XCJcIn0iLCJvcmRlckluZGV4IjoiMjEifSx7ImZpZWxkVHlwZUlEIjoiMSIsImxhYmVsIjoiQ2l0eSIsInNsdWciOiJjaXR5Iiwic2V0dGluZ3MiOiJ7XCJpc1JlcXVpcmVkXCI6XCIxXCIsXCJwbGFjZWhvbGRlclwiOlwiXCIsXCJkZWZhdWx0VmFsdWVcIjpcIlwiLFwiaW5zdHJ1Y3Rpb25zXCI6XCJcIn0iLCJvcmRlckluZGV4IjoiMjIifSx7ImZpZWxkVHlwZUlEIjoiMSIsImxhYmVsIjoiWmlwIiwic2x1ZyI6InppcCIsInNldHRpbmdzIjoie1wiaXNSZXF1aXJlZFwiOlwiMVwiLFwicGxhY2Vob2xkZXJcIjpcIlwiLFwiZGVmYXVsdFZhbHVlXCI6XCJcIixcImluc3RydWN0aW9uc1wiOlwiXCJ9Iiwib3JkZXJJbmRleCI6IjIzIn0seyJmaWVsZFR5cGVJRCI6IjEiLCJsYWJlbCI6IlNxIEZ0Iiwic2x1ZyI6InNxZnQiLCJzZXR0aW5ncyI6IntcImlzUmVxdWlyZWRcIjpcIjFcIixcInBsYWNlaG9sZGVyXCI6XCJcIixcImRlZmF1bHRWYWx1ZVwiOlwiXCIsXCJpbnN0cnVjdGlvbnNcIjpcIlwifSIsIm9yZGVySW5kZXgiOiIyNCJ9LHsiZmllbGRUeXBlSUQiOiIxIiwibGFiZWwiOiJBZ2UiLCJzbHVnIjoiYWdlIiwic2V0dGluZ3MiOiJ7XCJpc1JlcXVpcmVkXCI6XCIxXCIsXCJwbGFjZWhvbGRlclwiOlwiXCIsXCJkZWZhdWx0VmFsdWVcIjpcIlwiLFwiaW5zdHJ1Y3Rpb25zXCI6XCJcIn0iLCJvcmRlckluZGV4IjoiMjUifSx7ImZpZWxkVHlwZUlEIjoiMSIsImxhYmVsIjoiQmVkIiwic2x1ZyI6ImJlZCIsInNldHRpbmdzIjoie1wiaXNSZXF1aXJlZFwiOlwiMVwiLFwicGxhY2Vob2xkZXJcIjpcIlwiLFwiZGVmYXVsdFZhbHVlXCI6XCJcIixcImluc3RydWN0aW9uc1wiOlwiXCJ9Iiwib3JkZXJJbmRleCI6IjI2In0seyJmaWVsZFR5cGVJRCI6IjEiLCJsYWJlbCI6IkJhdGgiLCJzbHVnIjoiYmF0aCIsInNldHRpbmdzIjoie1wiaXNSZXF1aXJlZFwiOlwiMVwiLFwicGxhY2Vob2xkZXJcIjpcIlwiLFwiZGVmYXVsdFZhbHVlXCI6XCJcIixcImluc3RydWN0aW9uc1wiOlwiXCJ9Iiwib3JkZXJJbmRleCI6IjI3In0seyJmaWVsZFR5cGVJRCI6IjEiLCJsYWJlbCI6IkdhcmFnZSIsInNsdWciOiJnYXJhZ2UiLCJzZXR0aW5ncyI6IntcImlzUmVxdWlyZWRcIjpcIjFcIixcInBsYWNlaG9sZGVyXCI6XCJcIixcImRlZmF1bHRWYWx1ZVwiOlwiXCIsXCJpbnN0cnVjdGlvbnNcIjpcIlwifSIsIm9yZGVySW5kZXgiOiIyOCJ9LHsiZmllbGRUeXBlSUQiOiIxIiwibGFiZWwiOiJEb3duIFBheW1lbnQgUGVyY2VudCIsInNsdWciOiJkb3duLXBheW1lbnQtcGVyY2VudCIsInNldHRpbmdzIjoie1wiaXNSZXF1aXJlZFwiOlwiXCIsXCJwbGFjZWhvbGRlclwiOlwiXCIsXCJkZWZhdWx0VmFsdWVcIjpcIlwiLFwiaW5zdHJ1Y3Rpb25zXCI6XCJcIn0iLCJvcmRlckluZGV4IjoiMiJ9LHsiZmllbGRUeXBlSUQiOiIxIiwibGFiZWwiOiJMb2FuIFBheW1lbnQgTW9udGhseSIsInNsdWciOiJsb2FuLXBheW1lbnQtbW9udGhseSIsInNldHRpbmdzIjoie1wiaXNSZXF1aXJlZFwiOlwiXCIsXCJwbGFjZWhvbGRlclwiOlwiXCIsXCJkZWZhdWx0VmFsdWVcIjpcIlwiLFwiaW5zdHJ1Y3Rpb25zXCI6XCJcIn0iLCJvcmRlckluZGV4IjoiNiJ9LHsiZmllbGRUeXBlSUQiOiIxIiwibGFiZWwiOiJMb2FuIFBheW1lbnQgWWVhcmx5Iiwic2x1ZyI6ImxvYW4tcGF5bWVudC15ZWFybHkiLCJzZXR0aW5ncyI6IntcImlzUmVxdWlyZWRcIjpcIlwiLFwicGxhY2Vob2xkZXJcIjpcIlwiLFwiZGVmYXVsdFZhbHVlXCI6XCJcIixcImluc3RydWN0aW9uc1wiOlwiXCJ9Iiwib3JkZXJJbmRleCI6IjcifV19
HTML
<html>
<head>
<title>ROI Calculator | {% snippet name='company-name' %}</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-v2.css">
<!-- <link rel="stylesheet" href="https://printjs-4de6.kxcdn.com/print.min.css"> -->
</head>
<body>
<div id="roi-calculator">
<div class="printed-header">
<img class="center-block" src="/images/logo.png" style="max-height:30px;" alt="Logo" />
<p style="font-size:10px;"> </p>
</div>
<section class="calc-instructions">
<h1 class="calc-instructions__heading">ROI Calculator</h1>
<h2 class="calc-instructions__sub">Instructions</h2>
<div class="calc-instructions__toggle custom-control custom-switch">
<span class="custom-switch__label custom-switch__label--left">Hide</span>
<input type="checkbox" class="custom-control-input collapsed" id="instructionsSwitch" data-toggle="collapse" data-target="#collapseInstructions" aria-expanded="true" aria-controls="collapseInstructions">
<label class="custom-control-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-ride="carousel" data-interval="false" data-wrap="false" data-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 ml-auto" href="#calcCarousel" role="button" data-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-slide="prev">Previous</button>
<button class="calc-form__btn" href="#calcCarousel" role="button" data-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-email 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-phone 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-email 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-email 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-email 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-email 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-email is-required">
<label for="garage">Garage*</label>
<input id="garage" type="text" class="form-control" name="garage" required>
</div>
</div>
<div class="calc-form__controls">
<button class="calc-form__btn" href="#calcCarousel" role="button" data-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>
</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-v2.js"></script>
</body>
</html>
CSS
/css/roi-calculator-v2.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; }
/* 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; letter-spacing: .05em; text-transform: uppercase; color: var(--body-text); margin: 0 0 25px; font-family: var(--primary-font); font-weight: 500; }
.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 .custom-switch .custom-control-label::before { width: 72px; height: 22px; top: 2px; border-radius: 11px; border: 0; box-shadow: inset 0px 2px 16px 0px rgba(0, 0, 0, 0.2)!important; }
.calc-instructions .custom-switch .custom-control-label::after { top: 4px; left: calc(-2.25rem + 2px); width: 18px; height: 18px; border-radius: 50%; background: #c7c7c7; background: -moz-linear-gradient(top, #c7c7c7 0%, #919191 100%); background: -webkit-linear-gradient(top, #c7c7c7 0%,#919191 100%); background: linear-gradient(to bottom, #c7c7c7 0%,#919191 100%); }
.calc-instructions .custom-control-input:checked~.custom-control-label::before { color: #fff; background-color: var(--primary); }
.calc-instructions .custom-switch .custom-control-input:checked~.custom-control-label::after { background-color: #fff; background: -moz-linear-gradient(top, #fff 0%, #919191 100%); background: -webkit-linear-gradient(top, #fff 0%,#919191 100%); background: linear-gradient(to bottom, #fff 0%,#919191 100%); -webkit-transform: translateX(50px); transform: translateX(50px); }
@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 { border: 0; border-radius: 0; background: #f3f3f3; height: 54px; }
.calc-form .form-group input.warning { border: 2px solid red; }
.calc-form .input-group-text { color: #737373; font-size: 20px; border: 0; border-radius: 0; background-color: #e0e0e0; min-width: 40px; text-align: center; }
.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-left), .active.carousel-item-right { transform: translateX(100%) scale(0); }
.carousel-item-prev:not(.carousel-item-right), .active.carousel-item-left { 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-v2.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: '