<html lang="en"> <head> <meta charset="utf-8" /> <meta name="viewport" content="width=device-width,initial-scale=1,shrink-to-fit=no" /> <meta name="theme-color" content="#000000" /> <style type="text/css"> svg:not(:root).svg-inline--fa { overflow: visible; } .svg-inline--fa { display: inline-block; font-size: inherit; height: 1em; overflow: visible; vertical-align: -.125em; } .svg-inline--fa.fa-lg { vertical-align: -.225em; } .svg-inline--fa.fa-w-1 { width: 0.0625em; } .svg-inline--fa.fa-w-2 { width: 0.125em; } .svg-inline--fa.fa-w-3 { width: 0.1875em; } .svg-inline--fa.fa-w-4 { width: 0.25em; } .svg-inline--fa.fa-w-5 { width: 0.3125em; } .svg-inline--fa.fa-w-6 { width: 0.375em; } .svg-inline--fa.fa-w-7 { width: 0.4375em; } .svg-inline--fa.fa-w-8 { width: 0.5em; } .svg-inline--fa.fa-w-9 { width: 0.5625em; } .svg-inline--fa.fa-w-10 { width: 0.625em; } .svg-inline--fa.fa-w-11 { width: 0.6875em; } .svg-inline--fa.fa-w-12 { width: 0.75em; } .svg-inline--fa.fa-w-13 { width: 0.8125em; } .svg-inline--fa.fa-w-14 { width: 0.875em; } .svg-inline--fa.fa-w-15 { width: 0.9375em; } .svg-inline--fa.fa-w-16 { width: 1em; } .svg-inline--fa.fa-w-17 { width: 1.0625em; } .svg-inline--fa.fa-w-18 { width: 1.125em; } .svg-inline--fa.fa-w-19 { width: 1.1875em; } .svg-inline--fa.fa-w-20 { width: 1.25em; } .svg-inline--fa.fa-pull-left { margin-right: .3em; width: auto; } .svg-inline--fa.fa-pull-right { margin-left: .3em; width: auto; } .svg-inline--fa.fa-border { height: 1.5em; } .svg-inline--fa.fa-li { width: 2em; } .svg-inline--fa.fa-fw { width: 1.25em; } .fa-layers svg.svg-inline--fa { bottom: 0; left: 0; margin: auto; position: absolute; right: 0; top: 0; } .fa-layers { display: inline-block; height: 1em; position: relative; text-align: center; vertical-align: -.125em; width: 1em; } .fa-layers svg.svg-inline--fa { -webkit-transform-origin: center center; transform-origin: center center; } .fa-layers-text, .fa-layers-counter { display: inline-block; position: absolute; text-align: center; } .fa-layers-text { left: 50%; top: 50%; -webkit-transform: translate(-50%, -50%); transform: translate(-50%, -50%); -webkit-transform-origin: center center; transform-origin: center center; } .fa-layers-counter { background-color: #ff253a; border-radius: 1em; -webkit-box-sizing: border-box; box-sizing: border-box; color: #fff; height: 1.5em; line-height: 1; max-width: 5em; min-width: 1.5em; overflow: hidden; padding: .25em; right: 0; text-overflow: ellipsis; top: 0; -webkit-transform: scale(0.25); transform: scale(0.25); -webkit-transform-origin: top right; transform-origin: top right; } .fa-layers-bottom-right { bottom: 0; right: 0; top: auto; -webkit-transform: scale(0.25); transform: scale(0.25); -webkit-transform-origin: bottom right; transform-origin: bottom right; } .fa-layers-bottom-left { bottom: 0; left: 0; right: auto; top: auto; -webkit-transform: scale(0.25); transform: scale(0.25); -webkit-transform-origin: bottom left; transform-origin: bottom left; } .fa-layers-top-right { right: 0; top: 0; -webkit-transform: scale(0.25); transform: scale(0.25); -webkit-transform-origin: top right; transform-origin: top right; } .fa-layers-top-left { left: 0; right: auto; top: 0; -webkit-transform: scale(0.25); transform: scale(0.25); -webkit-transform-origin: top left; transform-origin: top left; } .fa-lg { font-size: 1.33333em; line-height: 0.75em; vertical-align: -.0667em; } .fa-xs { font-size: .75em; } .fa-sm { font-size: .875em; } .fa-1x { font-size: 1em; } .fa-2x { font-size: 2em; } .fa-3x { font-size: 3em; } .fa-4x { font-size: 4em; } .fa-5x { font-size: 5em; } .fa-6x { font-size: 6em; } .fa-7x { font-size: 7em; } .fa-8x { font-size: 8em; } .fa-9x { font-size: 9em; } .fa-10x { font-size: 10em; } .fa-fw { text-align: center; width: 1.25em; } .fa-ul { list-style-type: none; margin-left: 2.5em; padding-left: 0; } .fa-ul>li { position: relative; } .fa-li { left: -2em; position: absolute; text-align: center; width: 2em; line-height: inherit; } .fa-border { border: solid 0.08em #eee; border-radius: .1em; padding: .2em .25em .15em; } .fa-pull-left { float: left; } .fa-pull-right { float: right; } .fa.fa-pull-left, .fas.fa-pull-left, .far.fa-pull-left, .fal.fa-pull-left, .fab.fa-pull-left { margin-right: .3em; } .fa.fa-pull-right, .fas.fa-pull-right, .far.fa-pull-right, .fal.fa-pull-right, .fab.fa-pull-right { margin-left: .3em; } .fa-spin { -webkit-animation: fa-spin 2s infinite linear; animation: fa-spin 2s infinite linear; } .fa-pulse { -webkit-animation: fa-spin 1s infinite steps(8); animation: fa-spin 1s infinite steps(8); } @-webkit-keyframes fa-spin { 0% { -webkit-transform: rotate(0deg); transform: rotate(0deg); } 100% { -webkit-transform: rotate(360deg); transform: rotate(360deg); } } @keyframes fa-spin { 0% { -webkit-transform: rotate(0deg); transform: rotate(0deg); } 100% { -webkit-transform: rotate(360deg); transform: rotate(360deg); } } .fa-rotate-90 { -ms-filter: "progid:DXImageTransform.Microsoft.BasicImage(rotation=1)"; -webkit-transform: rotate(90deg); transform: rotate(90deg); } .fa-rotate-180 { -ms-filter: "progid:DXImageTransform.Microsoft.BasicImage(rotation=2)"; -webkit-transform: rotate(180deg); transform: rotate(180deg); } .fa-rotate-270 { -ms-filter: "progid:DXImageTransform.Microsoft.BasicImage(rotation=3)"; -webkit-transform: rotate(270deg); transform: rotate(270deg); } .fa-flip-horizontal { -ms-filter: "progid:DXImageTransform.Microsoft.BasicImage(rotation=0, mirror=1)"; -webkit-transform: scale(-1, 1); transform: scale(-1, 1); } .fa-flip-vertical { -ms-filter: "progid:DXImageTransform.Microsoft.BasicImage(rotation=2, mirror=1)"; -webkit-transform: scale(1, -1); transform: scale(1, -1); } .fa-flip-horizontal.fa-flip-vertical { -ms-filter: "progid:DXImageTransform.Microsoft.BasicImage(rotation=2, mirror=1)"; -webkit-transform: scale(-1, -1); transform: scale(-1, -1); } :root .fa-rotate-90, :root .fa-rotate-180, :root .fa-rotate-270, :root .fa-flip-horizontal, :root .fa-flip-vertical { -webkit-filter: none; filter: none; } .fa-stack { display: inline-block; height: 2em; position: relative; width: 2em; } .fa-stack-1x, .fa-stack-2x { bottom: 0; left: 0; margin: auto; position: absolute; right: 0; top: 0; } .svg-inline--fa.fa-stack-1x { height: 1em; width: 1em; } .svg-inline--fa.fa-stack-2x { height: 2em; width: 2em; } .fa-inverse { color: #fff; } .sr-only { border: 0; clip: rect(0, 0, 0, 0); height: 1px; margin: -1px; overflow: hidden; padding: 0; position: absolute; width: 1px; } .sr-only-focusable:active, .sr-only-focusable:focus { clip: auto; height: auto; margin: 0; overflow: visible; position: static; width: auto; } </style> <link rel="manifest" href="./manifest.json" /> <link rel="shortcut icon" href="./favicon.ico" /> <title>Mortgage Calculator</title> <link href="./static/css/main.7b5ec56a.css" rel="stylesheet" /> </head> <body><div id="root"> <div class="container"> <div class="row"> <div class="p-3 col-sm-12 col-md-7"> <form class="my-2"> <div class="row form-group"><label for="1" class="col-form-label-sm col-sm-4 col-form-label">Home Value:</label> <div class="col-sm-8"> <div class="input-group input-group-sm"> <div class="input-group-prepend"><span class="input-group-text">$</span></div> <input id="1" type="number" class="form-control" value="1489000" /> </div> </div> </div> <div class="mb-0 row form-group"><label for="downpayment" class="col-form-label-sm col-sm-4 col-form-label">Down Payment:</label> <div class="col-sm-8"> <div class="input-group input-group-sm"> <div class="input-group-prepend"><span class="input-group-text">$</span></div> <input id="downpayment" type="number" class="form-control" value="312690.00" /><input id="downpayment_p" step="0.01" type="number" class="col-sm-4 form-control" value="21.00" /> <div class="input-group-append"><span class="input-group-text">%</span></div> </div> </div> </div> <div class="px-4 pt-1 row form-group"> <div class="rc-slider"> <div class="rc-slider-rail"></div> <div class="rc-slider-track" style="left: 0%; width: 21%;"></div> <div class="rc-slider-step"></div> <div tabindex="0" class="rc-slider-handle" role="slider" aria-valuemin="0" aria-valuemax="100" aria-valuenow="21" aria-disabled="false" style="left: 21%;"> </div> <div class="rc-slider-mark"></div> </div> </div> <div class="row form-group"><label for="2" class="col-form-label-sm col-sm-4 col-form-label">Loan Amount:</label> <div class="col-sm-8"> <div class="input-group input-group-sm"> <div class="input-group-prepend"><span class="input-group-text">$</span></div> <input id="2" type="number" class="form-control" value="1176310" /> </div> </div> </div> <div class="mb-0 row form-group"><label for="interestRate" class="col-form-label-sm col-sm-4 col-form-label">Interest Rate:</label> <div class="col-sm-8"> <div class="input-group input-group-sm"><input id="interestRate" step="0.01" type="number" class="form-control" value="6.39" /> <div class="input-group-append"><span class="input-group-text">%</span></div> </div> </div> </div> <div class="px-4 pt-1 row form-group"> <div class="rc-slider"> <div class="rc-slider-rail"></div> <div class="rc-slider-track" style="left: 0%; width: 21.3%;"></div> <div class="rc-slider-step"></div> <div tabindex="0" class="rc-slider-handle" role="slider" aria-valuemin="0" aria-valuemax="30" aria-valuenow="6.39" aria-disabled="false" style="left: 21.3%;"></div> <div class="rc-slider-mark"></div> </div> </div> <div class="row form-group"><label for="loanTerm" class="col-form-label-sm col-sm-4 col-form-label">Loan Term:</label> <div class="col-sm-8"> <div class="input-group input-group-sm"><input id="loanTerm" type="number" class="form-control" value="30" /> <div class="input-group-append"><span class="input-group-text">years</span> </div> </div> </div> </div> <div class="row form-group"><label for="3" class="col-form-label-sm col-sm-4 col-form-label">Start Date:</label> <div class="col-sm-8"> <div class="input-group input-group-sm"><select type="select" class="form-control"> <option value="0">January</option> <option value="1">February</option> <option value="2">March</option> <option value="3">April</option> <option value="4">May</option> <option value="5">June</option> <option value="6">July</option> <option value="7">August</option> <option value="8">September</option> <option value="9">October</option> <option value="10">November</option> <option value="11">December</option> </select><input id="3" type="number" class="form-control" value="2022" /></div> </div> </div> <div class="row form-group"><label for="propertyTax" class="col-form-label-sm col-sm-4 col-form-label">Property Tax:</label> <div class="col-sm-8"> <div class="input-group input-group-sm"><input id="propertyTax" type="number" class="form-control" value="2400" /> <div class="input-group-append"><span class="input-group-text">$/year</span> </div> </div> </div> </div> <div class="mb-0 row form-group"><label for="PMI" class="col-form-label-sm col-sm-4 col-form-label">PMI:</label> <div class="col-sm-8"> <div class="input-group input-group-sm"><input id="PMI" step="0.01" type="number" class="form-control" value="1.00" /> <div class="input-group-append"><span class="input-group-text">%</span></div> </div> </div> </div> <div class="px-4 pt-1 row form-group"> <div class="rc-slider"> <div class="rc-slider-rail"></div> <div class="rc-slider-track" style="left: 0%; width: 10%;"></div> <div class="rc-slider-step"></div> <div tabindex="0" class="rc-slider-handle" role="slider" aria-valuemin="0" aria-valuemax="10" aria-valuenow="1" aria-disabled="false" style="left: 10%;"> </div> <div class="rc-slider-mark"></div> </div> </div> <div class="row form-group"><label for="homeInsurance" class="col-form-label-sm col-sm-4 col-form-label">Home Insurance:</label> <div class="col-sm-8"> <div class="input-group input-group-sm"><input id="homeInsurance" type="number" class="form-control" value="1000" /> <div class="input-group-append"><span class="input-group-text">$/year</span> </div> </div> </div> </div> <div class="row form-group"><label for="monthlyHOA" class="col-form-label-sm col-sm-4 col-form-label">Monthly HOA:</label> <div class="col-sm-8"> <div class="input-group input-group-sm"> <div class="input-group-prepend"><span class="input-group-text">$</span></div> <input id="monthlyHOA" type="number" class="form-control" value="0" /> </div> </div> </div> </form> </div> <div class="p-3 col-sm-12 col-md-5"> <div class="loan-card card"> <div class="card-header"> <p class="h3 m-0">$7,633.52</p><small class="text-muted">Your estimated monthly payment.</small> </div> <div class="card-body"> <table class="borderless-table small mb-0 table table-sm"> <tbody> <tr> <td class="align-middle">Monthly Tax Paid:</td> <td>$200.00</td> </tr> <tr> <td class="align-middle">Monthly Home Insurance:</td> <td>$83.33</td> </tr> <tr> <td colspan="2"> <hr /> </td> </tr> </tbody> </table> <p class="small"><strong>Loan Breakdown</strong></p> <div data-highcharts-chart="69"> <div id="highcharts-jn4sap0-487" dir="ltr" class="highcharts-container " style="position: relative; overflow: hidden; width: 403px; height: 200px; text-align: left; line-height: normal; z-index: 0; -webkit-tap-highlight-color: rgba(0, 0, 0, 0);"> <desc>Created with Highcharts 6.2.0</desc> <defs> <clippath id="highcharts-jn4sap0-493"> <rect x="0" y="0" width="383" height="175" fill="none"></rect> </clippath> </defs> <rect fill="#ffffff" class="highcharts-background" x="0" y="0" width="403" height="200" rx="0" ry="0"></rect> <rect fill="none" class="highcharts-plot-background" x="10" y="10" width="383" height="175"></rect> <rect fill="none" class="highcharts-plot-border" data-z-index="1" x="10" y="10" width="383" height="175"></rect> <g class="highcharts-series-group" data-z-index="3"> <g data-z-index="0.1" class="highcharts-series highcharts-series-0 highcharts-pie-series highcharts-tracker " transform="translate(10,10) scale(1 1)" style="cursor: pointer;"> <path fill="#006DAA" visibility="hidden" d="M 234.37201691411428 144.21745991053018 A 58.5 58.5 0 0 1 151.45798562581325 61.996091498863045 L 152.21084057238053 62.654277968967946 A 57.5 57.5 0 0 0 233.70753799250548 143.47015290351257 Z" class="highcharts-halo highcharts-color-1" data-z-index="-1" fill-opacity="0.25"></path> <path fill="rgb(0,53,89)" d="M 195.48808511758384 42.00000121337115 A 58.5 58.5 0 0 1 234.41571493073172 144.1785660413666 L 214.95785746536586 122.3392830206833 A 29.25 29.25 0 0 0 195.4940425587919 71.25000060668557 Z" transform="translate(0,0)" stroke="#ffffff" stroke-width="1" stroke-linejoin="round" class="highcharts-point highcharts-color-0 "></path> <path fill="rgb(0,109,170)" d="M 234.37201691411428 144.21745991053018 A 58.5 58.5 0 0 1 151.45798562581325 61.996091498863045 L 173.47899281290663 81.24804574943153 A 29.25 29.25 0 0 0 214.93600845705714 122.35872995526509 Z" transform="translate(0,0)" stroke="#ffffff" stroke-width="1" stroke-linejoin="round" class="highcharts-point highcharts-color-1 "></path> <path fill="#0353A4" d="M 151.4965115489024 61.952068743781844 A 58.5 58.5 0 0 1 157.61725158366914 55.92256879961585 L 176.55862579183457 78.21128439980792 A 29.25 29.25 0 0 0 173.4982557744512 81.22603437189092 Z" transform="translate(0,0)" stroke="#ffffff" stroke-width="1" stroke-linejoin="round" class="highcharts-point highcharts-color-2"></path> <path fill="rgb(6,26,64)" d="M 157.66184794881258 55.88470834622704 A 58.5 58.5 0 0 1 160.40524783016352 53.696064587069635 L 177.95262391508174 77.09803229353481 A 29.25 29.25 0 0 0 176.5809239744063 78.19235417311353 Z" transform="translate(0,0)" stroke="#ffffff" stroke-width="1" stroke-linejoin="round" class="highcharts-point highcharts-color-3 "></path> <path fill="#B9D6F2" d="M 160.45206930515042 53.66099324271467 A 58.5 58.5 0 0 1 195.41874467362283 42.00005643103631 L 195.4593723368114 71.25002821551816 A 29.25 29.25 0 0 0 177.9760346525752 77.08049662135733 Z" transform="translate(0,0)" stroke="#ffffff" stroke-width="1" stroke-linejoin="round" class="highcharts-point highcharts-color-4"></path> </g> <g data-z-index="0.1" class="highcharts-markers highcharts-series-0 highcharts-pie-series " transform="translate(10,10) scale(1 1)"></g> </g><text x="10" text-anchor="undefined" class="highcharts-title" data-z-index="4" style="color: #333333; font-size: 18px; fill: #333333;" y="24"></text><text x="202" text-anchor="middle" class="highcharts-subtitle" data-z-index="4" style="color: #666666; fill: #666666;" y="24"></text> <g data-z-index="6" class="highcharts-data-labels highcharts-series-0 highcharts-pie-series highcharts-tracker " transform="translate(10,10) scale(1 1)" opacity="1" style="cursor: pointer;"> <path fill="none" class="highcharts-data-label-connector highcharts-color-0" stroke="#000000" stroke-width="1" d="M 283.2197661078227 69.0406564743142 C 278.2197661078227 69.0406564743142 261.395406899452 75.43916702191132 255.78728716332841 77.57200387111035 L 250.17916742720485 79.70484072030939"> </path> <path fill="none" class="highcharts-data-label-connector highcharts-color-1" stroke="#000000" stroke-width="1" d="M 128.15074016689414 163.30780045713948 C 133.15074016689414 163.30780045713948 145.83194555667836 150.53333256755178 150.05901401993978 146.2751766043559 L 154.2860824832012 142.01702064116"> </path> <path fill="none" class="highcharts-data-label-connector highcharts-color-2" stroke="#000000" stroke-width="1" d="M 111.810737708376 60 C 116.810737708376 60 146.05015922133887 50.25098760209249 150.2586563088845 54.52749929553143 L 154.46715339643012 58.80401098897036"> </path> <path fill="none" class="highcharts-data-label-connector highcharts-color-3" stroke="#000000" stroke-width="1" d="M 129.90297036982753 36 C 134.90297036982753 36 151.57207309960316 45.358479906395466 155.3106200698497 50.05137523351075 L 159.04916704009625 54.74427056062603"> </path> <path fill="none" class="highcharts-data-label-connector highcharts-color-4" stroke="#000000" stroke-width="1" d="M 162.58121840157713 12 C 167.58121840157713 12 173.25961465888346 33.59996068851193 175.15241341131892 39.293581055447085 L 177.04521216375437 44.98720142238224"> </path> <g class="highcharts-label highcharts-data-label highcharts-data-label-color-0 " data-z-index="1" transform="translate(288,59)"><text x="5" data-z-index="1" style="font-size: 11px; font-weight: bold; color: #000; cursor: pointer; fill: #000;" y="16"> <tspan x="5" y="16" class="highcharts-text-outline" fill="#FFFFFF" stroke="#FFFFFF" stroke-width="2px" stroke-linejoin="round" style="">Principal</tspan> <tspan x="5" y="16">Principal</tspan> </text></g> <g class="highcharts-label highcharts-data-label highcharts-data-label-color-1 " data-z-index="1" transform="translate(71,153)"><text x="5" data-z-index="1" style="font-size: 11px; font-weight: bold; color: #000; cursor: pointer; fill: #000;" y="16"> <tspan x="5" y="16" class="highcharts-text-outline" fill="#FFFFFF" stroke="#FFFFFF" stroke-width="2px" stroke-linejoin="round" style="">Interest</tspan> <tspan x="5" y="16">Interest</tspan> </text></g> <g class="highcharts-label highcharts-data-label highcharts-data-label-color-2 " data-z-index="1" transform="translate(74,50)"><text x="5" data-z-index="1" style="font-size: 11px; font-weight: bold; color: #000; cursor: pointer; fill: #000;" y="16"> <tspan x="5" y="16" class="highcharts-text-outline" fill="#FFFFFF" stroke="#FFFFFF" stroke-width="2px" stroke-linejoin="round" style="">Tax</tspan> <tspan x="5" y="16">Tax</tspan> </text></g> <g class="highcharts-label highcharts-data-label highcharts-data-label-color-3 " data-z-index="1" transform="translate(23,26)"><text x="5" data-z-index="1" style="font-size: 11px; font-weight: bold; color: #000; cursor: pointer; fill: #000;" y="16"> <tspan x="5" y="16" class="highcharts-text-outline" fill="#FFFFFF" stroke="#FFFFFF" stroke-width="2px" stroke-linejoin="round" style="">HOA & Insurance</tspan> <tspan x="5" y="16">HOA & Insurance</tspan> </text></g> <g class="highcharts-label highcharts-data-label highcharts-data-label-color-4 " data-z-index="1" transform="translate(69,2)"><text x="5" data-z-index="1" style="font-size: 11px; font-weight: bold; color: #000; cursor: pointer; fill: #000;" y="16"> <tspan x="5" y="16" class="highcharts-text-outline" fill="#FFFFFF" stroke="#FFFFFF" stroke-width="2px" stroke-linejoin="round" style="">Downpayment</tspan> <tspan x="5" y="16">Downpayment</tspan> </text></g> </g> <g class="highcharts-legend" data-z-index="7"> <rect fill="none" class="highcharts-legend-box" rx="0" ry="0" x="0" y="0" width="8" height="8" visibility="hidden"></rect> <g data-z-index="1"> <g></g> </g> </g> <g class="highcharts-label highcharts-tooltip highcharts-color-1" style="pointer-events: none; white-space: nowrap;" data-z-index="8" transform="translate(139,-9999)" opacity="0" visibility="visible"> <path fill="none" class="highcharts-label-box highcharts-tooltip-box highcharts-shadow" d="M 3.5 0.5 L 51.5 0.5 C 54.5 0.5 54.5 0.5 54.5 3.5 L 54.5 44.5 C 54.5 47.5 54.5 47.5 51.5 47.5 L 3.5 47.5 C 0.5 47.5 0.5 47.5 0.5 44.5 L 0.5 3.5 C 0.5 0.5 0.5 0.5 3.5 0.5" stroke="#000000" stroke-opacity="0.049999999999999996" stroke-width="5" transform="translate(1, 1)"></path> <path fill="none" class="highcharts-label-box highcharts-tooltip-box highcharts-shadow" d="M 3.5 0.5 L 51.5 0.5 C 54.5 0.5 54.5 0.5 54.5 3.5 L 54.5 44.5 C 54.5 47.5 54.5 47.5 51.5 47.5 L 3.5 47.5 C 0.5 47.5 0.5 47.5 0.5 44.5 L 0.5 3.5 C 0.5 0.5 0.5 0.5 3.5 0.5" stroke="#000000" stroke-opacity="0.09999999999999999" stroke-width="3" transform="translate(1, 1)"></path> <path fill="none" class="highcharts-label-box highcharts-tooltip-box highcharts-shadow" d="M 3.5 0.5 L 51.5 0.5 C 54.5 0.5 54.5 0.5 54.5 3.5 L 54.5 44.5 C 54.5 47.5 54.5 47.5 51.5 47.5 L 3.5 47.5 C 0.5 47.5 0.5 47.5 0.5 44.5 L 0.5 3.5 C 0.5 0.5 0.5 0.5 3.5 0.5" stroke="#000000" stroke-opacity="0.15" stroke-width="1" transform="translate(1, 1)"></path> <path fill="rgba(247,247,247,0.85)" class="highcharts-label-box highcharts-tooltip-box" d="M 3.5 0.5 L 51.5 0.5 C 54.5 0.5 54.5 0.5 54.5 3.5 L 54.5 44.5 C 54.5 47.5 54.5 47.5 51.5 47.5 L 3.5 47.5 C 0.5 47.5 0.5 47.5 0.5 44.5 L 0.5 3.5 C 0.5 0.5 0.5 0.5 3.5 0.5" stroke="#006DAA" stroke-width="1"></path><text x="8" data-z-index="1" style="font-size: 12px; color: #333333; cursor: default; fill: #333333;" y="20"> <tspan style="font-size: 10px;">Interest</tspan> <tspan style="font-weight: bold;" x="8" dy="15">48.0%</tspan> </text> </g> </div> </div> <p class="d-flex justify-content-end"><button type="button" class="btn btn-outline-primary btn-sm">Show Amortization Table</button></p> </div> </div> </div> </div> <div class="row"> <div class="p-3 d-sm-none d-md-block col-sm-12 col-md-7"> <div class="loan-card card"> <div class="d-flex align-items-center card-header"><path fill="currentColor" d="M488 312.7V456c0 13.3-10.7 24-24 24H348c-6.6 0-12-5.4-12-12V356c0-6.6-5.4-12-12-12h-72c-6.6 0-12 5.4-12 12v112c0 6.6-5.4 12-12 12H112c-13.3 0-24-10.7-24-24V312.7c0-3.6 1.6-7 4.4-9.3l188-154.8c4.4-3.6 10.8-3.6 15.3 0l188 154.8c2.7 2.3 4.3 5.7 4.3 9.3zm83.6-60.9L488 182.9V44.4c0-6.6-5.4-12-12-12h-56c-6.6 0-12 5.4-12 12V117l-89.5-73.7c-17.7-14.6-43.3-14.6-61 0L4.4 251.8c-5.1 4.2-5.8 11.8-1.6 16.9l25.5 31c4.2 5.1 11.8 5.8 16.9 1.6l235.2-193.7c4.4-3.6 10.8-3.6 15.3 0l235.2 193.7c5.1 4.2 12.7 3.5 16.9-1.6l25.5-31c4.2-5.2 3.4-12.7-1.7-16.9z"> </path> <div class="mt-0">Mortgage Details</div> </div> <div class="card-body"> <table class="borderless-table small table table-sm"> <tbody> <tr> <td class="align-middle">Loan Amount:</td> <td>$1,176,310.00</td> <td class="custom-progress-container"> <div class="custom-progress"> <div class="mr-1 bar" style="width: 42.805px;"></div> <div class="label">42.80%</div> </div> </td> </tr> <tr> <td class="align-middle">Down Payment:</td> <td>$312,690.00 (21.00%)</td> <td class="custom-progress-container"> <div class="custom-progress"> <div class="mr-1 bar" style="width: 11.3785px;"></div> <div class="label">11.38%</div> </div> </td> </tr> <tr> <td class="align-middle">Total Interest Paid:</td> <td>$1,469,757.74</td> <td class="custom-progress-container"> <div class="custom-progress"> <div class="mr-1 bar" style="width: 53.4833px;"></div> <div class="label">53.48%</div> </div> </td> </tr> <tr> <td class="align-middle">Total PMI to Oct, 2022:</td> <td>$0.00</td> <td class="custom-progress-container"> <div class="custom-progress"> <div class="mr-1 bar" style="width: 0px;"></div> <div class="label">0.00%</div> </div> </td> </tr> <tr> <td class="align-middle">Total Tax Paid:</td> <td>$72,000.00</td> <td class="custom-progress-container"> <div class="custom-progress"> <div class="mr-1 bar" style="width: 2.62002px;"></div> <div class="label">2.62%</div> </div> </td> </tr> <tr> <td class="align-middle">Total Home Insurance:</td> <td>$30,000.00</td> <td class="custom-progress-container"> <div class="custom-progress"> <div class="mr-1 bar" style="width: 1.09168px;"></div> <div class="label">1.09%</div> </div> </td> </tr> <tr> <td colspan="2"> <hr /> </td> </tr> <tr> <td class="align-middle">Total of 360 Payments:</td> <td><strong>$2,748,067.74</strong></td> </tr> <tr> <td class="align-middle">Loan pay-off date:</td> <td><strong>Sep, 2052</strong></td> </tr> </tbody> </table> </div> </div> </div> <div class="p-3 d-sm-none d-md-block col-sm-12 col-md-5"> <div class="loan-card card"> <div class="d-flex align-items-center card-header"><path fill="currentColor" d="M256 336h-.02c0-16.18 1.34-8.73-85.05-181.51-17.65-35.29-68.19-35.36-85.87 0C-2.06 328.75.02 320.33.02 336H0c0 44.18 57.31 80 128 80s128-35.82 128-80zM128 176l72 144H56l72-144zm511.98 160c0-16.18 1.34-8.73-85.05-181.51-17.65-35.29-68.19-35.36-85.87 0-87.12 174.26-85.04 165.84-85.04 181.51H384c0 44.18 57.31 80 128 80s128-35.82 128-80h-.02zM440 320l72-144 72 144H440zm88 128H352V153.25c23.51-10.29 41.16-31.48 46.39-57.25H528c8.84 0 16-7.16 16-16V48c0-8.84-7.16-16-16-16H383.64C369.04 12.68 346.09 0 320 0s-49.04 12.68-63.64 32H112c-8.84 0-16 7.16-16 16v32c0 8.84 7.16 16 16 16h129.61c5.23 25.76 22.87 46.96 46.39 57.25V448H112c-8.84 0-16 7.16-16 16v32c0 8.84 7.16 16 16 16h416c8.84 0 16-7.16 16-16v-32c0-8.84-7.16-16-16-16z"> </path> <div class="mb-0">Monthly Vs Bi-Weekly Payment</div> </div> <div class="card-body"> <table class="borderless-table small mb-0 table table-sm"> <tbody> <tr> <td> <p class="h5 m-0">$7,633.52</p> <p class="text-muted">Monthly Payment</p> </td> <td> <p class="h5 m-0">$3,816.76</p> <p class="text-muted">Bi-weekly Payment</p> </td> </tr> <tr> <td> <p class="h5 m-0">Sep, 2052</p> <p class="text-muted">Monthly Pay-off Date</p> </td> <td> <p class="h5 m-0">Nov, 2046</p> <p class="text-muted">Bi-weekly Pay-off Date</p> </td> </tr> <tr> <td> <p class="h5 m-0">$1,469,757.74</p> <p class="text-muted">Total Interest Paid</p> </td> <td> <p class="h5 m-0">$1,135,324.18</p> <p class="text-muted">Total Interest Paid</p> </td> </tr> </tbody> </table> <p class="text-center">Total Interest Savings: $334,433.56</p> </div> </div> </div> </div> </div> </div> <div style="position: static !important;"></div> </body> </html>
You’ve got questions and we can’t wait to answer them.
CoastWoods Real Estate
(831) 234-1233
[email protected]
3912 Portola Drive #7
Santa Cruz, CA 95062