Browse Source

Reworked the details screen

master
Alexander Yakovlev 5 years ago
parent
commit
bd98588b2b
  1. 42
      custom.js
  2. 25
      index.html
  3. 22
      mortgage.php
  4. 72
      style.scss

42
custom.js

@ -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

@ -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

@ -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

@ -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();
}
};
}
}

Loading…
Cancel
Save