Bootstrap Snippet Bootstrap Loan Calculator using HTML CSS Bootstrap jQuery

Bootstrap Snippet Bootstrap Mortgage Calculator utilizing HTML CSS Bootstrap jQuery



Quantity

Minimal $100K is required

Length

Please select one

Time period

Please select one



Quantity that it’s worthwhile to pay



Quantity that it’s worthwhile to pay



Quantity that it’s worthwhile to pay



Created by AmirolAhmad

physique {
padding-top: 60px;
}

.price-box {
margin: 0 auto;
background: #E9E9E9;
border-radius: 10px;
padding: 40px 15px;
/*width: 500px;*/
}

.ui-widget-content {
border: 1px stable #bdc3c7;
background: #e1e1e1;
coloration: #222222;
margin-top: 4px;
}

.ui-slider .ui-slider-handle {
place: absolute;
z-index: 2;
width: 7.2em;
peak: 2.7em;
cursor: default;
margin: 0 -40px auto !necessary;
text-align: middle;
line-height: 30px;
coloration: #FFFFFF;
font-size: 12px;
}

.ui-slider .ui-slider-handle .glyphicon {
coloration: #FFFFFF;
margin: 0 1px;
font-size: 11px;
opacity: 0.7;
}

.ui-corner-all {
border-radius: 20px;
}

.ui-slider-horizontal .ui-slider-handle {
best: -.9em;
}

.ui-state-default,
.ui-widget-content .ui-state-default {
border: 1px stable #f9f9f9;
background: #3498db;
}

.ui-slider-horizontal .ui-slider-handle {
margin-left: -0.5em;
}

.ui-slider .ui-slider-handle {
cursor: pointer;
}

.ui-slider a,
.ui-slider a:focus {
cursor: pointer;
define: none;
}

.cost, .lead p {
font-weight: 600;
font-size: 32px;
show: inline-block;
line-height: 60px;
border:0;
width: 245px;
}

h4.nice {
background: #00ac98;
margin: 0 0 25px -60px;
padding: 7px 15px;
coloration: #ffffff;
font-size: 18px;
font-weight: 600;
border-radius: 5px;
show: inline-block;
-moz-box-shadow: 2px 4px 5px 0 #ccc;
-webkit-box-shadow: 2px 4px 5px 0 #ccc;
box-shadow: 2px 4px 5px 0 #ccc;
}

.complete {
border-bottom: 1px stable #7f8c8d;
/*show: inline;
padding: 10px 5px;*/
place: relative;
padding-bottom: 20px;
}

.complete:earlier than {
content material: “”;
show: inline;
place: absolute;
left: 0;
backside: 5px;
width: 100%;
peak: 3px;
background: #7f8c8d;
opacity: 0.5;
}

Read about:   Dwelling Fairness Mortgage - What Is It?

.price-slider {
margin-bottom: 70px;
}

.price-slider span {
font-weight: 200;
show: inline-block;
coloration: #7f8c8d;
font-size: 13px;
}

.form-pricing {
background: #ffffff;
padding: 20px;
border-radius: 4px;
}

.price-form {
background: #ffffff;
margin-bottom: 10px;
padding: 20px;
border: 1px stable #eeeeee;
min-height: 520px;
border-radius: 4px;
/*-moz-box-shadow: 0 5px 5px 0 #ccc;
-webkit-box-shadow: 0 5px 5px 0 #ccc;
box-shadow: 0 5px 5px 0 #ccc;*/
}

.form-group {
margin-bottom: 0;
}

.form-group span.cost {
font-weight: 200;
show: inline-block;
coloration: #7f8c8d;
font-size: 14px;
}

.help-text {
show: block;
margin-top: -10px;
margin-bottom: 10px;
coloration: #737373;
/*place: absolute;*/
/*margin-left: 20px;*/
font-weight: 200;
/*text-align: correct;*/
width: 188px;
}

.price-form label {
font-weight: 200;
font-size: 21px;
}

img.fee {
show: block;
margin-left: auto;
margin-right: auto
}

.ui-slider-range-min {
background: #2980b9;
}

.active-month,
.active-term {
background: #3276b1;
}

/* HR */

hr.type {
margin-top: 0;
border: 0;
border-bottom: 1px dashed #ccc;
background: #999;
}

// JavaScript Doc
var p = {

0: “100K”,
1: “150K”,
2: “200K”,
3: “250K”,
4: “300K”,
5: “350K”,
6: “400K”,
7: “450K”,
8: “500K”,
9: “550K”,
10: “600K”,
11: “650K”,
12: “700K”,
13: “750K”,
14: “800K”,
15: “850K”,
16: “900K”,
17: “950K”,
18: “1,000K”,
19: “1,100K”,
20: “1,200K”,
21: “1,300K”,
22: “1,400K”,
23: “1,500K”,
24: “1,600K”,
25: “1,700K”,
26: “1,800K”,
27: “19,00K”,
28: “2,000K”,
};

var t = {

0: “100000”,
1: “150000”,
2: “200000”,
3: “250000”,
4: “300000”,
5: “350000”,
6: “400000”,
7: “450000”,
8: “500000”,
9: “550000”,
10: “600000”,
11: “650000”,
12: “700000”,
13: “750000”,
14: “800000”,
15: “850000”,
16: “900000”,
17: “950000”,
18: “1000000”,
19: “1100000”,
20: “1200000”,
21: “1300000”,
22: “1400000”,
23: “1500000”,
24: “1600000”,
25: “1700000”,
26: “1800000”,
27: “1900000”,
28: “2000000”,

}

var obj = {
’24month’ : {
‘quarterly’ : ‘1.41’,
‘month-to-month’ : ‘1.28’,
‘weekly’ : ‘1.2’
},
’18month’ : {
‘quarterly’ : ‘1.38’,
‘month-to-month’ : ‘1.25’,
‘weekly’ : ‘1.8’
},
’12month’ : {

Read about:   Employees' compensation - Loans

‘quarterly’ : ‘1.35’,
‘month-to-month’ : ‘1.225’,
‘weekly’ : ‘1.15’
}
};

$(doc).prepared(operate() {

$(“#complete”).val(“10000”);

$(“#slider_amirol”).slider({
latitude: “min”,
animate: true,

min: 0,
max: 28,
step: 1,
slide:
operate(occasion, ui)
{
replace(1,ui.worth); //modified
calcualtePrice(ui.worth);
}
});

$(‘.month’).on(‘click on’,operate(occasion) {
var id = $(this).attr(‘id’);

$(‘.month’).removeClass(‘selected-month’);
$(this).addClass(‘selected-month’);
$(“.month”).removeClass(“active-month”);
$(this).addClass(“active-month”);

$(‘#month’).val(id);

calcualtePrice()
});

$(‘.time period’).on(‘click on’,operate(occasion) {
var id = $(this).attr(‘id’);

$(‘.time period’).removeClass(‘selected-term’);
$(this).addClass(‘selected-term’);
$(“.time period”).removeClass(“active-term”);
$(this).addClass(“active-term”);
$(‘#time period’).val(id);

calcualtePrice()
});

replace();
calcualtePrice();
});

operate replace(slider,val) {

if(undefined === val) val = 0;
var quantity = p[val];

$(‘#sliderVal’).val(val);

$(‘#slider_amirol a’).html(‘‘);
}

operate calcualtePrice(val){

if(undefined === val)
val = $(‘#sliderVal’).val();

var month = $(‘#month’).val();
var time period = obj[month][$(‘#term’).val()];

var totalPrice = t[val]*time period;

$(“#complete”).val(totalPrice.toFixed(2));
$(“#total12”).val(Math.spherical((totalPrice)/12).toFixed(2));
$(“#total52”).val(Math.spherical((totalPrice)/52).toFixed(2));
}