Rent Sell Calculator - Bootstrap 4
Example: https://therentsellcalculator.nesthub.com
View Bootstrap 3 Code View Bootstrap 5 CodeForm Import
eyJuYW1lIjoiUmVudCBTZWxsIENhbGN1bGF0b3IiLCJzbHVnIjoicmVudC1zZWxsLWNhbGN1bGF0b3IiLCJzdWNjZXNzTWVzc2FnZSI6bnVsbCwiaXNMZWFkIjoiMCIsImZpZWxkcyI6W3siZmllbGRUeXBlSUQiOiIxIiwibGFiZWwiOiJIb21lIFZhbHVlIiwic2x1ZyI6ImhvbWUtdmFsdWUiLCJzZXR0aW5ncyI6IntcImlzUmVxdWlyZWRcIjpcIjFcIixcInBsYWNlaG9sZGVyXCI6XCJcIixcImRlZmF1bHRWYWx1ZVwiOlwiXCIsXCJpbnN0cnVjdGlvbnNcIjpcIlwifSIsIm9yZGVySW5kZXgiOiIxIn0seyJmaWVsZFR5cGVJRCI6IjEiLCJsYWJlbCI6IlByaWNlIFBhaWQiLCJzbHVnIjoicHJpY2UtcGFpZCIsInNldHRpbmdzIjoie1wiaXNSZXF1aXJlZFwiOlwiMVwiLFwicGxhY2Vob2xkZXJcIjpcIlwiLFwiZGVmYXVsdFZhbHVlXCI6XCJcIixcImluc3RydWN0aW9uc1wiOlwiXCJ9Iiwib3JkZXJJbmRleCI6IjIifSx7ImZpZWxkVHlwZUlEIjoiMSIsImxhYmVsIjoiT3JpZ2luYWwgTW9ydGdhZ2UiLCJzbHVnIjoib3JpZ2luYWwtbW9ydGdhZ2UiLCJzZXR0aW5ncyI6IntcImlzUmVxdWlyZWRcIjpcIjFcIixcInBsYWNlaG9sZGVyXCI6XCJcIixcImRlZmF1bHRWYWx1ZVwiOlwiXCIsXCJpbnN0cnVjdGlvbnNcIjpcIlwifSIsIm9yZGVySW5kZXgiOiIzIn0seyJmaWVsZFR5cGVJRCI6IjEiLCJsYWJlbCI6Ik1vcnRnYWdlIEJhbGFuY2UiLCJzbHVnIjoibW9ydGdhZ2UtYmFsYW5jZSIsInNldHRpbmdzIjoie1wiaXNSZXF1aXJlZFwiOlwiMVwiLFwicGxhY2Vob2xkZXJcIjpcIlwiLFwiZGVmYXVsdFZhbHVlXCI6XCJcIixcImluc3RydWN0aW9uc1wiOlwiXCJ9Iiwib3JkZXJJbmRleCI6IjQifSx7ImZpZWxkVHlwZUlEIjoiMSIsImxhYmVsIjoiSW50ZXJlc3QgUmF0ZSIsInNsdWciOiJpbnRlcmVzdC1yYXRlIiwic2V0dGluZ3MiOiJ7XCJpc1JlcXVpcmVkXCI6XCIxXCIsXCJwbGFjZWhvbGRlclwiOlwiXCIsXCJkZWZhdWx0VmFsdWVcIjpcIlwiLFwiaW5zdHJ1Y3Rpb25zXCI6XCJcIn0iLCJvcmRlckluZGV4IjoiNSJ9LHsiZmllbGRUeXBlSUQiOiIxIiwibGFiZWwiOiJNb3J0Z2FnZSBQYXltZW50Iiwic2x1ZyI6Im1vcnRnYWdlLXBheW1lbnQiLCJzZXR0aW5ncyI6IntcImlzUmVxdWlyZWRcIjpcIjFcIixcInBsYWNlaG9sZGVyXCI6XCJcIixcImRlZmF1bHRWYWx1ZVwiOlwiXCIsXCJpbnN0cnVjdGlvbnNcIjpcIlwifSIsIm9yZGVySW5kZXgiOiI2In0seyJmaWVsZFR5cGVJRCI6IjEiLCJsYWJlbCI6Ik1vcnRnYWdlIERpZmZlcmVuY2UiLCJzbHVnIjoibW9ydGdhZ2UtZGlmZmVyZW5jZSIsInNldHRpbmdzIjoie1wiaXNSZXF1aXJlZFwiOlwiMVwiLFwicGxhY2Vob2xkZXJcIjpcIlwiLFwiZGVmYXVsdFZhbHVlXCI6XCJcIixcImluc3RydWN0aW9uc1wiOlwiXCJ9Iiwib3JkZXJJbmRleCI6IjcifSx7ImZpZWxkVHlwZUlEIjoiMSIsImxhYmVsIjoiVGF4ZXMsIElucywgQ29tbiBDaGFyZ2VzIiwic2x1ZyI6InRheGVzLWlucy1jb21uLWNoYXJnZXMiLCJzZXR0aW5ncyI6IntcImlzUmVxdWlyZWRcIjpcIjFcIixcInBsYWNlaG9sZGVyXCI6XCJcIixcImRlZmF1bHRWYWx1ZVwiOlwiXCIsXCJpbnN0cnVjdGlvbnNcIjpcIlwifSIsIm9yZGVySW5kZXgiOiI4In0seyJmaWVsZFR5cGVJRCI6IjEiLCJsYWJlbCI6Ik1vbnRobHkgUmVudCIsInNsdWciOiJtb250aGx5LXJlbnQiLCJzZXR0aW5ncyI6IntcImlzUmVxdWlyZWRcIjpcIjFcIixcInBsYWNlaG9sZGVyXCI6XCJcIixcImRlZmF1bHRWYWx1ZVwiOlwiXCIsXCJpbnN0cnVjdGlvbnNcIjpcIlwifSIsIm9yZGVySW5kZXgiOiI5In0seyJmaWVsZFR5cGVJRCI6IjEiLCJsYWJlbCI6IkFwcHJlY2lhdGlvbiBSYXRlIiwic2x1ZyI6ImFwcHJlY2lhdGlvbi1yYXRlIiwic2V0dGluZ3MiOiJ7XCJpc1JlcXVpcmVkXCI6XCIxXCIsXCJwbGFjZWhvbGRlclwiOlwiXCIsXCJkZWZhdWx0VmFsdWVcIjpcIlwiLFwiaW5zdHJ1Y3Rpb25zXCI6XCJcIn0iLCJvcmRlckluZGV4IjoiMTAifSx7ImZpZWxkVHlwZUlEIjoiMSIsImxhYmVsIjoiWWVhcnMgdG8gSG9sZCIsInNsdWciOiJ5ZWFycy10by1ob2xkIiwic2V0dGluZ3MiOiJ7XCJpc1JlcXVpcmVkXCI6XCIxXCIsXCJwbGFjZWhvbGRlclwiOlwiXCIsXCJkZWZhdWx0VmFsdWVcIjpcIlwiLFwiaW5zdHJ1Y3Rpb25zXCI6XCJcIn0iLCJvcmRlckluZGV4IjoiMTEifSx7ImZpZWxkVHlwZUlEIjoiNSIsImxhYmVsIjoiUHJpbWFyeSBSZXNpZGVuY2U/Iiwic2x1ZyI6InByaW1hcnktcmVzaWRlbmNlIiwic2V0dGluZ3MiOiJ7XCJvcHRpb25zXCI6XCJZZXNcXHJcXG5Ob1wiLFwiaXNSZXF1aXJlZFwiOlwiMVwiLFwiZGVmYXVsdFZhbHVlXCI6XCJcIixcImluc3RydWN0aW9uc1wiOlwiXCJ9Iiwib3JkZXJJbmRleCI6IjEyIn0seyJmaWVsZFR5cGVJRCI6IjEiLCJsYWJlbCI6Ik1ha2UtUmVhZHkgQ29zdHMiLCJzbHVnIjoibWFrZS1yZWFkeS1jb3N0cyIsInNldHRpbmdzIjoie1wiaXNSZXF1aXJlZFwiOlwiXCIsXCJwbGFjZWhvbGRlclwiOlwiXCIsXCJkZWZhdWx0VmFsdWVcIjpcIlwiLFwiaW5zdHJ1Y3Rpb25zXCI6XCJcIn0iLCJvcmRlckluZGV4IjoiMTMifSx7ImZpZWxkVHlwZUlEIjoiMSIsImxhYmVsIjoiTW9ydGdhZ2UgVGVybSIsInNsdWciOiJtb3J0Z2FnZS10ZXJtIiwic2V0dGluZ3MiOiJ7XCJpc1JlcXVpcmVkXCI6XCJcIixcInBsYWNlaG9sZGVyXCI6XCJcIixcImRlZmF1bHRWYWx1ZVwiOlwiXCIsXCJpbnN0cnVjdGlvbnNcIjpcIlwifSIsIm9yZGVySW5kZXgiOiIxNCJ9LHsiZmllbGRUeXBlSUQiOiIxIiwibGFiZWwiOiJUcmFuc2ZlciBDb3N0cyBOb3ciLCJzbHVnIjoidHJhbnNmZXItY29zdHMtbm93Iiwic2V0dGluZ3MiOiJ7XCJpc1JlcXVpcmVkXCI6XCJcIixcInBsYWNlaG9sZGVyXCI6XCJcIixcImRlZmF1bHRWYWx1ZVwiOlwiXCIsXCJpbnN0cnVjdGlvbnNcIjpcIlwifSIsIm9yZGVySW5kZXgiOiIxNSJ9LHsiZmllbGRUeXBlSUQiOiIxIiwibGFiZWwiOiJUcmFuc2ZlciBDb3N0cyBMYXRlciIsInNsdWciOiJ0cmFuc2Zlci1jb3N0cy1sYXRlciIsInNldHRpbmdzIjoie1wiaXNSZXF1aXJlZFwiOlwiXCIsXCJwbGFjZWhvbGRlclwiOlwiXCIsXCJkZWZhdWx0VmFsdWVcIjpcIlwiLFwiaW5zdHJ1Y3Rpb25zXCI6XCJcIn0iLCJvcmRlckluZGV4IjoiMTYifSx7ImZpZWxkVHlwZUlEIjoiMSIsImxhYmVsIjoiUHJlcGF5bWVudCBQZW5hbHR5Iiwic2x1ZyI6InByZXBheW1lbnQtcGVuYWx0eSIsInNldHRpbmdzIjoie1wiaXNSZXF1aXJlZFwiOlwiXCIsXCJwbGFjZWhvbGRlclwiOlwiXCIsXCJkZWZhdWx0VmFsdWVcIjpcIlwiLFwiaW5zdHJ1Y3Rpb25zXCI6XCJcIn0iLCJvcmRlckluZGV4IjoiMTcifSx7ImZpZWxkVHlwZUlEIjoiMSIsImxhYmVsIjoiUHJvcGVydHkgTWFuYWdlbWVudCBGZWUiLCJzbHVnIjoicHJvcGVydHktbWFuYWdlbWVudC1mZWUiLCJzZXR0aW5ncyI6IntcImlzUmVxdWlyZWRcIjpcIlwiLFwicGxhY2Vob2xkZXJcIjpcIlwiLFwiZGVmYXVsdFZhbHVlXCI6XCJcIixcImluc3RydWN0aW9uc1wiOlwiXCJ9Iiwib3JkZXJJbmRleCI6IjE4In0seyJmaWVsZFR5cGVJRCI6IjEiLCJsYWJlbCI6Ik9jY3VwYW5jeSBSYXRlIiwic2x1ZyI6Im9jY3VwYW5jeS1yYXRlIiwic2V0dGluZ3MiOiJ7XCJpc1JlcXVpcmVkXCI6XCJcIixcInBsYWNlaG9sZGVyXCI6XCJcIixcImRlZmF1bHRWYWx1ZVwiOlwiXCIsXCJpbnN0cnVjdGlvbnNcIjpcIlwifSIsIm9yZGVySW5kZXgiOiIxOSJ9LHsiZmllbGRUeXBlSUQiOiIxIiwibGFiZWwiOiJFZmZlY3RpdmUgQ2FwaXRhbCBHYWlucyBUYXgiLCJzbHVnIjoiZWZmZWN0aXZlLWNhcGl0YWwtZ2FpbnMtdGF4Iiwic2V0dGluZ3MiOiJ7XCJpc1JlcXVpcmVkXCI6XCJcIixcInBsYWNlaG9sZGVyXCI6XCJcIixcImRlZmF1bHRWYWx1ZVwiOlwiXCIsXCJpbnN0cnVjdGlvbnNcIjpcIlwifSIsIm9yZGVySW5kZXgiOiIyMSJ9LHsiZmllbGRUeXBlSUQiOiIxIiwibGFiZWwiOiJTZWxsaW5nIENvc3RzIiwic2x1ZyI6InNlbGxpbmctY29zdHMiLCJzZXR0aW5ncyI6IntcImlzUmVxdWlyZWRcIjpcIlwiLFwicGxhY2Vob2xkZXJcIjpcIlwiLFwiZGVmYXVsdFZhbHVlXCI6XCJcIixcImluc3RydWN0aW9uc1wiOlwiXCJ9Iiwib3JkZXJJbmRleCI6IjIyIn0seyJmaWVsZFR5cGVJRCI6IjEiLCJsYWJlbCI6IkFmdGVyLVRheCBSZWludmVzdG1lbnQgUmF0ZSIsInNsdWciOiJhZnRlci10YXgtcmVpbnZlc3RtZW50LXJhdGUiLCJzZXR0aW5ncyI6IntcImlzUmVxdWlyZWRcIjpcIlwiLFwicGxhY2Vob2xkZXJcIjpcIlwiLFwiZGVmYXVsdFZhbHVlXCI6XCJcIixcImluc3RydWN0aW9uc1wiOlwiXCJ9Iiwib3JkZXJJbmRleCI6IjIzIn0seyJmaWVsZFR5cGVJRCI6IjEiLCJsYWJlbCI6IkFubnVhbCBNYWludGVuYW5jZSBDb3N0cyIsInNsdWciOiJhbm51YWwtbWFpbnRlbmFuY2UtY29zdHMiLCJzZXR0aW5ncyI6IntcImlzUmVxdWlyZWRcIjpcIlwiLFwicGxhY2Vob2xkZXJcIjpcIlwiLFwiZGVmYXVsdFZhbHVlXCI6XCJcIixcImluc3RydWN0aW9uc1wiOlwiXCJ9Iiwib3JkZXJJbmRleCI6IjI0In0seyJmaWVsZFR5cGVJRCI6IjEiLCJsYWJlbCI6IkFubnVhbCBDaGFuZ2UgSW4gUmVudHMiLCJzbHVnIjoiYW5udWFsLWNoYW5nZS1pbi1yZW50cyIsInNldHRpbmdzIjoie1wiaXNSZXF1aXJlZFwiOlwiXCIsXCJwbGFjZWhvbGRlclwiOlwiXCIsXCJkZWZhdWx0VmFsdWVcIjpcIlwiLFwiaW5zdHJ1Y3Rpb25zXCI6XCJcIn0iLCJvcmRlckluZGV4IjoiMjUifSx7ImZpZWxkVHlwZUlEIjoiMSIsImxhYmVsIjoiTmFtZSIsInNsdWciOiJuYW1lIiwic2V0dGluZ3MiOiJ7XCJpc1JlcXVpcmVkXCI6XCIxXCIsXCJwbGFjZWhvbGRlclwiOlwiXCIsXCJkZWZhdWx0VmFsdWVcIjpcIlwiLFwiaW5zdHJ1Y3Rpb25zXCI6XCJcIn0iLCJvcmRlckluZGV4IjoiMjYifSx7ImZpZWxkVHlwZUlEIjoiMyIsImxhYmVsIjoiRW1haWwiLCJzbHVnIjoiZW1haWwiLCJzZXR0aW5ncyI6IntcImlzUmVxdWlyZWRcIjpcIjFcIixcInBsYWNlaG9sZGVyXCI6XCJcIixcImRlZmF1bHRWYWx1ZVwiOlwiXCIsXCJpbnN0cnVjdGlvbnNcIjpcIlwifSIsIm9yZGVySW5kZXgiOiIyNyJ9LHsiZmllbGRUeXBlSUQiOiIxMCIsImxhYmVsIjoiUGhvbmUiLCJzbHVnIjoicGhvbmUiLCJzZXR0aW5ncyI6IntcImlzUmVxdWlyZWRcIjpcIjFcIixcInBsYWNlaG9sZGVyXCI6XCJcIixcImRlZmF1bHRWYWx1ZVwiOlwiXCIsXCJpbnN0cnVjdGlvbnNcIjpcIlwifSIsIm9yZGVySW5kZXgiOiIyOCJ9LHsiZmllbGRUeXBlSUQiOiIxIiwibGFiZWwiOiJUYXggcmF0ZSBvbiByZW50YWwgJnF1b3Q7cHJvZml0JnF1b3Q7IChpZiBhbnkpIiwic2x1ZyI6InRheC1yYXRlLW9uLXJlbnRhbC1wcm9maXQiLCJzZXR0aW5ncyI6IntcImlzUmVxdWlyZWRcIjpcIlwiLFwicGxhY2Vob2xkZXJcIjpcIlwiLFwiZGVmYXVsdFZhbHVlXCI6XCJcIixcImluc3RydWN0aW9uc1wiOlwiXCJ9Iiwib3JkZXJJbmRleCI6IjIwIn1dfQ==
HTML
<html>
<head>
<title>Should I Sell My House? Rent vs Sell Calculator</title>
<meta name="description" content="Find out whether you would profit more from Renting or Selling your home."/>
<link rel="stylesheet" href="https://use.typekit.net/zjf6qsf.css">
<link rel="stylesheet" type="text/css" href="//cdnjs.cloudflare.com/ajax/libs/jqueryui/1.10.3/css/base/jquery.ui.all.min.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/jqPlot/1.0.8/jquery.jqplot.min.css" integrity="sha512-t+f30iN2gaBKFoysadEsaLpUsJ+psmHXRvz5WKztPFZ72XEoe6JY92VF2CmdYBtPsbmaiKECZZi/NrNQS5MntQ==" crossorigin="anonymous" />
<link rel="stylesheet" href="/css/rent-sell-calc-v2.css">
<script defer src="https://cdnjs.cloudflare.com/ajax/libs/jqPlot/1.0.8/jquery.jqplot.min.js" integrity="sha512-empa5Y87YvQmWo3VZ2tZLokl0c2lpskHB34394Nkt5bv3oNULOJZxqfNzGitbUqg2sunt6/qadAoXY3kGCqXGw==" crossorigin="anonymous"></script>
</head>
<body>
<div id="rent-sell-calc">
<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-hero">
<div class="calc-hero__prompt">
<h1 class="calc-hero__heading">Rent VS. Sell Calculator</h1>
<h2 class="calc-hero__sub">Should I Sell or Rent Out My House?</h2>
</div>
</section>
<section class="calc-instructions">
<h3 class="calc-instructions__heading">Instructions</h3>
<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. Complete the input boxes as described. Once all required inputs are complete, the Rent vs Sell calculator will automatically calculate your answer.
</p>
</div>
<div class="col-lg-3 col-md-6">
<p>
2. Use the links when available to find the data requested if you don't already have that information.
</p>
</div>
<div class="col-lg-3 col-md-6">
<p>
3. Select the ? Icon next to the input label to learn more about the requested data.
</p>
</div>
<div class="col-lg-3 col-md-6">
<p>
4. Refresh the model to return all advanced inputs to default amounts.
</p>
</div>
</div>
</div>
</section>
<!-- -->
<section class="calc-form" data-ion="form" data-name="rent-sell-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">property information</h4>
<div class="calc-form__container">
<div class="form-group form-group-text is-required">
<label for="home_value">Home Value <span class="info-btn" data-toggle="tooltip" data-html="true" title="Enter how much you think the house would sell for - NOT the asking price"><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="home_value" type="text" class="form-control" name="home-value" value="158000" required>
</div>
</div>
<div class="form-group form-group-text is-required">
<label for="price_paid">Price Paid</label>
<div class="input-group">
<div class="input-group-prepend"><span class="input-group-text">$</span></div>
<input id="price_paid" type="text" class="form-control" name="price-paid" value="158000">
</div>
</div>
<div class="form-group form-group-text is-required">
<label for="original_mortgage">Original Mortgage <span class="info-btn" data-toggle="tooltip" data-html="true" title="Enter the amount of your original mortgage loan amount"><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="original_mortgage" type="text" class="form-control" name="original-mortgage" value="126400">
</div>
</div>
<div class="form-group form-group-text is-required">
<label for="mortgage_balance">Mortgage Balance <span class="info-btn" data-toggle="tooltip" data-html="true" title="Enter the current balance owed on your mortgage loan"><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="mortgage_balance" type="text" class="form-control" name="mortgage-balance" value="98000">
</div>
</div>
<div class="form-group form-group-text is-required">
<label for="interest_rate">Interest Rate <span class="info-btn" data-toggle="tooltip" data-html="true" title="Mortgage interest Rate - Enter the current interest rate on your loan"><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="interest_rate" type="text" class="form-control" name="interest-rate" value="5">
</div>
</div>
<div class="form-group form-group-text is-required">
<label for="mortgage_payment">Mortgage Payment <span class="info-btn" data-toggle="tooltip" data-html="true" title="This amount is calculated automatically. If your actual Principal and Interest payment differs from this amount, add or subtract the difference in the next box"><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="mortgage_payment" type="text" class="form-control" name="mortgage-payment" value="758">
</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">property information, continued</h4>
<div class="calc-form__container">
<div class="form-group form-group-text is-required">
<label for="mortgage_difference">Mortgage Difference<span class="info-btn" data-toggle="tooltip" data-html="true" title="If your actual Principal and Interest payment differs from your Mortgage Payment on the previous step, add or subtract the difference in this box"><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="mortgage_difference" type="text" class="form-control" name="mortgage-difference" value="0">
</div>
</div>
<div class="form-group form-group-text is-required">
<label for="other_costs">Taxes, Ins, Comn Charges <span class="info-btn" data-toggle="tooltip" data-html="true" title="Enter the annual cost of property taxes, insurance and any common charges or association dues for your property."><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="other_costs" type="text" class="form-control" name="taxes-ins-comn-charges" value="2000">
</div>
</div>
<div class="form-group form-group-text is-required">
<label for="monthly_rent">Monthly Rent <span class="info-btn" data-toggle="tooltip" data-html="true" title="Enter or estimate the amount of monthly rent you can get for your property"><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="monthly_rent" type="text" class="form-control" name="monthly-rent" value="1150">
</div>
</div>
<div class="form-group form-group-text is-required">
<label for="appreciation_rate">Appreciation Rate <span class="info-btn" data-toggle="tooltip" data-html="true" title="Enter the % of average annual home price increase/decrease you expect to realize over your holding period."><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="appreciation_rate" type="text" class="form-control" name="appreciation-rate" value="5">
</div>
</div>
<div class="form-group form-group-text is-required">
<label for="years_to_hold">Years to Hold <span class="info-btn" data-toggle="tooltip" data-html="true" title="Enter a number between 1 and 50 - This is your time horizon. i.e. I want to see if it's better to sell now or later, and the impact that this decision has on my wealth"><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="years_to_hold" type="text" class="form-control" name="years-to-hold" value="5">
</div>
</div>
<div class="form-group form-group-radio is-required">
<label for="primary_residence">Primary Residence? <span class="info-btn" data-toggle="tooltip" data-html="true" title="If this qualifies as your primary residence you can exlcude the gain of up to $500,000 from the sale of your property from taxation."><i class="fal fa-info-circle"></i></span></label>
<div class="form-check form-check-inline">
<input class="form-check-input" type="radio" name="primary-residence" id="primary_residence_0" value="Yes" checked>
<label class="form-check-label" for="primary_residence_0">Yes</label>
</div>
<div class="form-check form-check-inline">
<input class="form-check-input" type="radio" name="primary-residence" id="primary_residence_1" value="No">
<label class="form-check-label" for="primary_residence_1">No</label>
</div>
</div>
</div>
<a class="calc-form__advanced-toggle" data-toggle="collapse" href="#collapseAdvancedOptions" role="button" aria-expanded="false" aria-controls="collapseAdvancedOptions">optional advanced inputs <i class="fal fa-angle-down"></i></a>
<div class="collapse" id="collapseAdvancedOptions">
<div class="calc-form__container">
<div class="form-group form-group-text">
<label for="make_ready_costs">Make-Ready Costs <span class="info-btn" data-toggle="tooltip" data-html="true" title="Amnt spent on refurbishing - used in the capital gains tax calc"><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="make_ready_costs" type="text" class="form-control" name="make-ready-costs" value="2000">
</div>
</div>
<div class="form-group form-group-text">
<label for="mortgage_term">Mortgage Term <span class="info-btn" data-toggle="tooltip" data-html="true" title="Enter the term in months of your mortgage. Most mortgages are 360 months (30 years)"><i class="fal fa-info-circle"></i></span></label>
<div class="input-group">
<div class="input-group-prepend"><span class="input-group-text">Months</span></div>
<input id="mortgage_term" type="text" class="form-control" name="mortgage-term" value="360">
</div>
</div>
<div class="form-group form-group-text">
<label for="transfer_costs_now">Transfer Costs Now <span class="info-btn" data-toggle="tooltip" data-html="true" title="Enter as a % of your sales price such costs as excise taxes, filing fees or other closing costs"><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="transfer_costs_now" type="text" class="form-control" name="transfer-costs-now" value="1">
</div>
</div>
<div class="form-group form-group-text">
<label for="transfer_costs_later">Transfer Costs Later <span class="info-btn" data-toggle="tooltip" data-html="true" title="Enter as a % of your sales price estimated future costs such as excise taxes, filing fees or other closing costs"><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="transfer_costs_later" type="text" class="form-control" name="transfer-costs-later" value="1">
</div>
</div>
<div class="form-group form-group-text">
<label for="prepayment_penalty">Prepayment Penalty <span class="info-btn" data-toggle="tooltip" data-html="true" title="There may be a loan prepayment penalty. Enter as a % of outstanding loan amount"><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="prepayment_penalty" type="text" class="form-control" name="prepayment-penalty" value="0">
</div>
</div>
<div class="form-group form-group-text">
<label for="property_management_fee">Property Management Fee <span class="info-btn" data-toggle="tooltip" data-html="true" title="Enter as a % of annual rents the costs to manage your property. Professional management will insure better results in most cases."><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="property_management_fee" type="text" class="form-control" name="property-management-fee" value="8">
</div>
</div>
<div class="form-group form-group-text">
<label for="occupancy_rate">Occupancy Rate <span class="info-btn" data-toggle="tooltip" data-html="true" title="Properties are rarely rented out 100% of the time. Often in between rentals, time is taken to redecorate, and to look for a new tenant."><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="occupancy_rate" type="text" class="form-control" name="occupancy-rate" value="95">
</div>
</div>
<div class="form-group form-group-text">
<label for="tax_rate_on_rental_profit">Tax rate on rental "profit" <span class="info-btn" data-toggle="tooltip" data-html="true" title="If you have income from the rental it will be subject to taxation at your ordinary tax rate. Losses may be dedcutible also."><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="tax_rate_on_rental_profit" type="text" class="form-control" name="tax-rate-on-rental-profit" value="25">
</div>
</div>
<div class="form-group form-group-text">
<label for="effective_capital_gains_tax">Effective Capital Gains Tax <span class="info-btn" data-toggle="tooltip" data-html="true" title="Any gain from sale will be taxed if property does not quality for primary residence exclusion."><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="effective_capital_gains_tax" type="text" class="form-control" name="effective-capital-gains-tax" value="15">
</div>
</div>
<div class="form-group form-group-text">
<label for="selling_costs">Selling Costs <span class="info-btn" data-toggle="tooltip" data-html="true" title="Costs such as brokerage commsion or other selling costs as % of sales price."><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="selling_costs" type="text" class="form-control" name="selling-costs" value="6">
</div>
</div>
<div class="form-group form-group-text">
<label for="after_tax_reinvestment_rate">After-Tax Reinvestment Rate <span class="info-btn" data-toggle="tooltip" data-html="true" title="Investment rate - Enter the rate of return you could have by investing in Bond/Shares OR if you have an outstanding loan, this is the loan rate assuming you use the proceeds from the sale of your property to pay off loans."><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="after_tax_reinvestment_rate" type="text" class="form-control" name="after-tax-reinvestment-rate" value="6">
</div>
</div>
<div class="form-group form-group-text">
<label for="annual_maintenance_costs">Annual Maintenance Costs <span class="info-btn" data-toggle="tooltip" data-html="true" title="Costs as a % of home value for repairs, upkeep, etc."><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="annual_maintenance_costs" type="text" class="form-control" name="annual-maintenance-costs" value="1">
</div>
</div>
<div class="form-group form-group-text">
<label for="annual_change_in_rents">Annual Change In Rents <span class="info-btn" data-toggle="tooltip" data-html="true" title="Annual Change in Rents: Expected annual rent increases."><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="annual_change_in_rents" type="text" class="form-control" name="annual-change-in-rents" value="4">
</div>
</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 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">
</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">
</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">
</div>
</div>
<div class="calc-form__controls">
<button class="calc-form__btn" href="#calcCarousel" role="button" data-slide="prev">Previous</button>
<button type="submit" class="calc-form__btn">Get Results!</button>
</div>
</div>
</div>
</div>
</form>
</section>
<section class="calc-results">
<h2 class="calc-results__heading">Results</h2>
<h3 class="calc-results__value year_value">
If you <span id="rent_or_sell" class="calc-results__option">RENT</span> your property, you'll have <span id="have_value" class="calc-results__amount">$21,355</span> more wealth in <span id="inyear">5</span> years verses
<span id="rent_vs_sell">selling</span> your property today.
</h3>
<div id="graph" class="calc-results__plot">
<div id="legend">
<div class="legend legend--rent">Rent</div>
<div class="legend legend--sell">Sell</div>
</div>
<div id="chart">
<!-- <div id="chartImage"></div> -->
</div>
</div>
<div class="calc-results__table">
<table id="results_table">
<thead>
<tr>
<th>Year</th>
<th>Rental Income</th>
<th>Mortgage Expense</th>
<th>Other Costs</th>
<th>Net Cash Flow</th>
<th>House Value</th>
<th>House Equity</th>
<th class="color_wealth">
Wealth (Rent Out)
</th>
<th>Wealth (Sell Now)</th>
<th class="color_diff">
Difference in Wealth<br> (Rent Out to Sell Now)
</th>
</tr>
</thead>
<tbody>
<tr id="dt_row">
<td aria-label="Year" scope="col">1</td>
<td aria-label="Rental Income"><span id="data_ri">-</span></td>
<td aria-label="Mortgage Expense"><span id="data_me">-</span></td>
<td aria-label="Other Costs"><span id="data_oc">-</span></td>
<td aria-label="Net Cash Flow"><span id="data_nc">-</span></td>
<td aria-label="House Value"><span id="data_hv">-</span></td>
<td aria-label="House Equity"><span id="data_he">-</span></td>
<td aria-label="Wealth (Rent Out)"><span id="data_wro">-</span></td>
<td aria-label="Wealth (Sell Now)"><span id="data_wsn">-</span></td>
<td aria-label="Difference in Wealth (Rent Out to Sell Now)"><span id="data_diff">-</span></td>
</tr>
</tbody>
</table>
</div>
<!-- <div class="calc-results__buttons">
<a id="pdf" href="#" class="calc-form__btn">Download</a>
<a id="print" type="button" name="button" href="#" class="calc-form__btn">Print</a>
<a href="#" class="calc-form__btn">Email</a>
</div> -->
</section>
</div>
<script defer src="https://cdnjs.cloudflare.com/ajax/libs/html2pdf.js/0.10.1/html2pdf.bundle.min.js" integrity="sha512-GsLlZN/3F2ErC5ifS5QtgpiJtWd43JWSuIgh7mbzZ8zBps+dvLusV+eNQATqgA/HdeKFVgA5v3S/cIrLF7QnIg==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
<script defer type="text/javascript" src="https://printjs-4de6.kxcdn.com/print.min.js"></script>
<script defer type="text/javascript" src="/js/rent-sell-calc-v2.js"></script>
</body>
</html>
CSS
/css/rent-sell-calc-v2.css
#rent-sell-calc {
--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; }
#secondary-banner { display: none; }
/* Add margin-top to Calc Hero if #Header is covering the banner - should be height of #header */
.calc-hero { margin-top: 0; }
#rent-sell-calc { 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; }
/* Hero */
.calc-hero { background-color: var(--dark); color: #fff; padding: 0 5vw; background-repeat: no-repeat; background-position: center right; }
.calc-hero__prompt { font-size: 40px; padding: 80px 0; width: 1350px; max-width: 100%; margin: auto; }
.calc-hero__heading { font-size: 1em; text-transform: uppercase; margin: 0; width: 485px; display: inline-block; max-width: 100%; line-height: 1; letter-spacing: .05em; font-weight: 400; font-family: var(--secondary-font); }
.calc-hero__sub { font-size: .5em; font-style: italic; font-family: var(--secondary-font); margin: 10px 0 0; }
@media (min-width: 992px) {
.calc-hero { height: 555px; display: flex; justify-content: center; align-items: center; background-image: url('https://resources.nesthub.com/images/rentsellcalc-banner.png'); }
.calc-hero__prompt { font-size: 60px; }
}
@media (max-width: 991px) {
.calc-hero { text-align: center; }
}
/* Instructions */
.calc-instructions { text-align: center; padding: 70px 5vw 30px; width: 1350px; max-width: 100%; margin: auto; letter-spacing: .05em; }
.calc-instructions__heading { font-size: 22px; letter-spacing: .05em; text-transform: uppercase; color: var(--primary); margin: 0 0 20px; 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); }
/* 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 .input-group-text { color: #737373; font-size: 20px; border: 0; border-radius: 0; background-color: #e0e0e0; min-width: 40px; text-align: center; }
.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; }
}
.calc-results__table { width: 1718px; max-width: 100%; margin: 0 auto; border-radius: 20px; overflow: hidden; text-align: left; }
.calc-results__table tr { background: #f3f3f3; }
.calc-results__table tbody tr:nth-child(odd) { background: #e3e3e3; }
.calc-results__table th { font-size: 18px; width: 10%; 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; }
/* 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 td::before { content: 'Year'; display: block; flex: 0 0 50%; text-align: left; padding-right: 15px; white-space: normal; font-weight: 500; }
.calc-results__table td:nth-child(2)::before { content: 'Rental Income'; }
.calc-results__table td:nth-child(3)::before { content: 'Mortgage Expense'; }
.calc-results__table td:nth-child(4)::before { content: 'Other Costs'; }
.calc-results__table td:nth-child(5)::before { content: 'Net Cash Flow'; }
.calc-results__table td:nth-child(6)::before { content: 'House Value'; }
.calc-results__table td:nth-child(7)::before { content: 'House Equity'; }
.calc-results__table td:nth-child(8)::before { content: 'Wealth (Rent Out)'; }
.calc-results__table td:nth-child(9)::before { content: 'Wealth (Sell Now)'; }
.calc-results__table td:nth-child(10)::before { content: 'Difference in Wealth (Rent Out to Sell Now)'; }
}
.calc-results__buttons { display: flex; margin: -15px; justify-content: center; padding-top: 80px; }
.calc-results__buttons a { margin: 15px; }
Javascript
/js/rent-sell-calc-v2.js