oreolek
/
mortgage
1
1
Fork 0
Code Issues Pull Requests Releases Wiki Activity
Browse Source

Reworked the details screen

master
Alexander Yakovlev 5 years ago
parent
b35cb2a1dc
commit
bd98588b2b
4 changed files with 143 additions and 18 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Split View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 42
      custom.js
  2. 25
      index.html
  3. 22
      mortgage.php
  4. 72
      style.scss

42
custom.js
Unescape View File

@ -10,6 +10,9 @@ function parseField(id, isInt) {
}
function round(num) {
if (num == null) {
return 0;
}
return parseFloat(num.toFixed(2));
}
@ -111,8 +114,11 @@ jQuery(function($){
let yearly_sum = PMT(0.01*interest, term, -(price - payment_absolute));
let monthly_sum = PMT(0.01*interest/12, term*12, -(price - payment_absolute));
let month = new Date().getMonth() + 1; // current month
let pay_month = undefined;
let months = 1;
for (let i = 0; i < term; i++) {
let i = 0;
let total = 0;
while(months < term * 12) {
let year_cur = year + i;
if (payments[year_cur] === undefined) {
payments[year_cur] = {}
@ -120,31 +126,37 @@ jQuery(function($){
payments[year_cur].principal = 0;
payments[year_cur].interest = 0;
payments[year_cur].tax = insurance + tax;
while(month <= 12) {
while(months < term * 12 && month <= 12) {
let principal_monthly = round(PPMT(interest*0.01/12, months, term*12, -(price - payment_absolute)));
let interest_monthly = round(monthly_sum - round(PPMT(interest*0.01/12, months, term*12, -(price - payment_absolute))));
let pmi_monthly = round(pmi*0.01*due/12);
payments[year_cur].principal += principal_monthly;
payments[year_cur].interest += interest_monthly;
due = due - principal_monthly;
total += round(principal_monthly);
total += round(interest_monthly);
total += round(tax / 12);
total += round(insurance / 12);
if (due / (price - payment_absolute) > 0.8) { // there's still PMI
payments[year_cur].tax += pmi_monthly;
}
if (year_cur === 2018) {
console.log(""+months+"-"+principal_monthly+"-"+interest_monthly+"-"+pmi_monthly);
total += round(pmi_monthly);
} else {
if (pay_month === undefined) {
pay_month = new Date(year_cur, month, 1);
}
}
month++;
months++;
}
month = 1;
i++;
}
console.log(payments);
// Compiling a nice visual table
let html = "<thead><th>Year</th><th>Principal</th><th>Interest</th><th>Tax, PMI, Insurance</th><th class='hidden-sm-down'>Remaining due</th></thead><tbody>";
let html = "<thead><th>Date</th><th>Principal</th><th>Interest</th><th class='tax'>Tax, PMI, Insurance</th><th class='hidden-sm-down'>Balance</th></thead><tbody>";
let pay = price * (1 - 0.01*payment);
for (let i = 0; i < term; i++) {
let year_cur = year + i;
pay = pay - payments[year_cur].principal;
pay = pay - round(payments[year_cur].principal);
html += "<tr>";
html += "<td>"+year_cur+"</td>";
html += "<td>"+round(payments[year_cur].principal)+"</td>";
@ -153,12 +165,20 @@ jQuery(function($){
html += "<td class='hidden-sm-down'>"+round(pay)+"</td>";
html += "</tr>";
}
jQuery("#total-payments").text(months);
jQuery("#total").text("$"+total.toLocaleString());
let shortmonth = new Date("2000", new Date().getMonth(), 0).toLocaleString("en-us", { month: "short" });
jQuery("#payoff").text(shortmonth+". "+(year + term));
jQuery("#cost-after").text("$"+round(monthly_sum + tax/12 + insurance/12).toLocaleString());
html += "</tbody>";
jQuery("#paymentdetails").html(html);
let monthly = PMT(0.01*interest/12, term*12, -(price - payment_absolute));
monthly += pmi*0.01*(price-payment_absolute)/12;
monthly += insurance/12 + tax/12;
jQuery("#calculated-cost").text("$" + monthly.toLocaleString());
jQuery(".pay-month").text(pay_month.toLocaleString("en-us", {
month: "long"
})+", "+pay_month.getFullYear());
jQuery("#estimations").modal();
});
updatePrice();
@ -206,4 +226,10 @@ jQuery(function($){
'phone': phone
});
});
jQuery(".mod-more").on('click', function(){
jQuery(".mod-more").slideUp();
jQuery("#initial-cost-card").addClass('narrow');
jQuery(".cost-card").removeClass('hidden');
jQuery(".pay-month").parent().removeClass("hidden");
});
});

25
index.html
Unescape View File

@ -63,8 +63,24 @@
</div>
<div class="modal-body">
<h2 class="form-mortgage-heading">Mortgage Estimations</h2>
<div id="calculated-cost">$000.00</div>
<div class="subtitle">Total Monthly Payment</div>
<div class="row">
<div class="cost-card" id="initial-cost-card">
<div class="cost" id="calculated-cost">$000.00</div>
<div class="subtitle">Total Monthly Payment<span class="hidden"> until <span class="pay-month"></span></span></div>
</div>
<div class="cost-card narrow hidden">
<div class="cost" id="cost-after">$000.00</div>
<div class="subtitle">Total Monthly Payment after <span class="pay-month"></span></div>
</div>
<div class="cost-card narrow hidden">
<div class="cost" id="total">$000.00</div>
<div class="subtitle">Total of <span id="total-payments">000</span> Payments</div>
</div>
<div class="cost-card narrow hidden">
<div class="cost" id="payoff">$000.00</div>
<div class="subtitle">Payoff Date</div>
</div>
</div>
<button type="button" class="mortgage-btn btn btn-primary" type="submit" id="apply">
Apply now!
</button>
@ -77,8 +93,11 @@
</div>
<div class="collapse" id="details">
<div class="card card-block">
<table class="table table-sm table-hover table-responsive" id="paymentdetails">
<table class="table table-sm table-hover table-striped" id="paymentdetails">
</table>
<button type="button" class="mortgage-btn btn btn-primary" type="submit" id="apply">
Apply now!
</button>
</div>
</div>
</div>

22
mortgage.php
Unescape View File

@ -14,11 +14,7 @@ Author URI: https://oreolek.ru/
function calculator() {
$out = '';
wp_enqueue_style( 'mortgage-style', plugin_dir_url( __FILE__ ) . '/style.css' );
wp_enqueue_style( 'mortgage-font', 'https://fonts.googleapis.com/css?family=Open+Sans:300,40' );
wp_enqueue_script( 'mortgage-script', plugin_dir_url( __FILE__ ) . '/custom.js', array('jquery'), '1.0.0', true );
wp_enqueue_script( 'tether', 'https://cdnjs.cloudflare.com/ajax/libs/tether/1.4.0/js/tether.min.js', array('jquery'));
wp_enqueue_script( 'bootstrap', 'https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.5/js/bootstrap.min.js', array('jquery'));
wp_enqueue_script( 'inputmask', 'https://cdnjs.cloudflare.com/ajax/libs/jquery.inputmask/3.3.4/jquery.inputmask.bundle.min.js', array('jquery'));
wp_enqueue_style( 'mortgage-font', 'https://fonts.googleapis.com/css?family=Open+Sans:300,400' );
$myfile = fopen(__DIR__.'/index.html', "r") or die("Unable to open file!");
$out = fread($myfile,filesize(__DIR__.'/index.html'));
fclose($myfile);
@ -26,3 +22,19 @@ function calculator() {
}
add_shortcode('mortgage', 'calculator');
add_action( 'wp_enqueue_scripts', 'calculator_scripts' );
function calculator_scripts()
{
wp_register_script( 'tether', 'https://cdnjs.cloudflare.com/ajax/libs/tether/1.4.0/js/tether.min.js',array('jquery') );
wp_enqueue_script( 'tether' );
wp_register_script( 'bootstrap', 'https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.5/js/bootstrap.min.js', array('jquery') );
wp_enqueue_script( 'bootstrap' );
wp_register_script( 'inputmask', 'https://cdnjs.cloudflare.com/ajax/libs/jquery.inputmask/3.3.4/jquery.inputmask.bundle.min.js', array('jquery') );
wp_enqueue_script( 'inputmask' );
wp_register_script( 'mortgage-script', plugin_dir_url( __FILE__ ) . '/custom.js', array('jquery'), '1.1.0', true );
wp_enqueue_script( 'mortgage-script' );
}

72
style.scss
Unescape View File

@ -6,6 +6,7 @@ $modal-md: 700px;
$modal-sm: 300px;
$enable-flex: false;
$modal-backdrop-bg: rgba(100, 100, 100, 0.5);
$table-bg-accent: #fff;
@import "bower_components/bootstrap/scss/variables";
@import "bower_components/bootstrap/scss/mixins";
@ -14,10 +15,14 @@ $modal-backdrop-bg: rgba(100, 100, 100, 0.5);
@import "bower_components/bootstrap/scss/modal";
@import "bower_components/bootstrap/scss/forms";
@import "bower_components/bootstrap/scss/animation";
@import "bower_components/bootstrap/scss/tables";
// Utility classes
@import "bower_components/bootstrap/scss/utilities";
.hidden {
display: none;
}
.hidden-sm-down {
@include media-breakpoint-down(sm) {
display: none;
@ -26,6 +31,9 @@ $modal-backdrop-bg: rgba(100, 100, 100, 0.5);
@mixin make-block {
//display: flex;
}
@mixin borderedcell {
border-right: 1px solid #000;
}
body {
padding-top: 40px;
@ -45,6 +53,8 @@ body {
border: 1px solid #333;
padding: 3em;
.note {
font-family: $font-family-sans-serif;
font-weight: 300;
padding-left: 1em;
@include make-col(3, $grid-columns);
color: #555;
@ -55,6 +65,7 @@ body {
}
.form-name,
.form-mortgage {
background-color: #f5f5f5;
.row {
@include make-row();
}
@ -67,6 +78,8 @@ body {
@include make-block();
}
label {
font-family: $font-family-sans-serif;
font-weight: 400;
@extend .col-form-label;
@include make-col(6, $grid-columns);
padding-right: 1em;
@ -79,20 +92,27 @@ body {
}
.modal-header {
text-align: right;
padding: 0;
border-bottom: 0;
.close {
padding: 0.1em 0.5em;
background-color: transparent;
color: #777;
font-size: 24pt;
}
}
.mod-more {
text-align: center;
font-family: $font-family-sans-serif;
font-weight: 400;
margin-top: 1.5em;
a {
margin-top: 1em;
text-decoration: underline;
color: #333;
}
}
.form-mortgage-heading {
font-family: $font-family-sans-serif;
text-align: center;
width: 100%;
padding-bottom: 0.5em;
@ -101,7 +121,12 @@ body {
letter-spacing: 3px;
}
.mortgage-btn {
font-family: $font-family-sans-serif;
font-weight: 400;
font-size: 14pt;
margin: 0 auto;
padding: 0.5em 1.5em;
@include border-radius(5px);
display: block;
background-color: $brand-primary;
}
@ -113,6 +138,13 @@ body {
transform: rotate(45deg);
}
#estimations {
.form-mortgage-heading {
font-size: $font-size-base * 2;
}
.modal-content {
font-family: $font-family-sans-serif;
background-color: #f5f5f5;
}
.modal-header {
border: none;
padding-bottom: 0;
@ -120,14 +152,50 @@ body {
.modal-body {
padding-top: 0;
}
#calculated-cost {
.cost-card.narrow {
@include make-col(3, $grid-columns);
@include make-block();
}
.cost {
font-family: $font-family-sans-serif;
font-weight: 400;
text-align: center;
font-size: $font-size-base * 1.3;
}
.subtitle {
padding: 0 1em;
font-family: $font-family-sans-serif;
text-align: center;
font-weight: 300;
font-size: $font-size-base * 0.9;
margin-bottom: 2em;
}
#paymentdetails {
margin-top: 2em;
width: 100%;
overflow-x: auto;
td, th {
text-align: center;
}
th {
text-transform: uppercase;
}
th.tax {
width: 25%;
}
th:nth-child(1),
th:nth-child(2),
th:nth-child(3),
td:nth-child(1),
td:nth-child(2),
td:nth-child(3) {
@include borderedcell();
}
@include media-breakpoint-up(sm) {
th:nth-child(4),
td:nth-child(4) {
@include borderedcell();
}
};
}
}

Write Preview
Loading…
Cancel
Save