body {
display: flex;
align-items: center;
justify-content: center;
min-height: 100vh;
font-family: "Open Sans", sans-serif;
background-color: transparent; /* Change background to transparent */
}
.container {
max-width: 960px;
margin-left: auto;
margin-right: auto;
padding-left: 20px;
padding-right: 20px;
}
/* Стили компонента */
/* Стили для слайдера */
.loan-calculator-range-slider {
height: 4px;
background-color: #e8e8e8;
border: none;
.noUi-handle {
right: -8px !important;
width: 16px;
height: 16px;
box-shadow: none;
border: 2px solid #ff0000; /* Change handle color to red */
border-radius: 50%;
outline: none;
box-sizing: border-box;
&::before,
&::after {
content: none;
}
}
&--money {
.noUi-connect {
background-color: #4cca4c; /* Зеленый цвет для слайдера суммы денег */
}
.noUi-handle {
border-color: #ff0000; /* Change handle color to red */
}
}
&--months {
.noUi-connect {
background-color: #412abd; /* Синий цвет для слайдера месяцев */
}
.noUi-handle {
border-color: #ff0000; /* Change handle color to red */
}
}
}
/* Стили для результата */
.loan-calculator-result {
font-size: 18px;
line-height: 1.25;
}
.loan-calculator-result__caption {
display: block;
}
.loan-calculator-result__value {
display: inline-block;
font-size: calc(32 / 18 * 1em);
color: #4cca4c; /* Зеленый цвет для ежемесячного платежа */
&::after {
content: "*";
display: inline-block;
margin-left: 8px;
vertical-align: top;
font-size: 16px;
color: #ff5555;
}
}
/* Стили для основного контейнера калькулятора */
.loan-calculator {
max-width: 376px;
padding: 28px;
background-color: #ffffff;
border-radius: 8px;
}
.loan-calculator__controls-list {
margin-bottom: 32px;
& > :last-child {
margin-bottom: 0;
}
}
.loan-calculator__control {
margin-bottom: 24px;
}
/* Стили для контрола */
.loan-calculator-control {
}
.loan-calculator-control__caption {
display: block;
margin-bottom: 12px;
font-size: 18px;
line-height: calc(22 / 18);
}
.loan-calculator-control__range {
margin-top: 12px;
margin-bottom: 12px;
}
.loan-calculator-control__help-values {
display: flex;
align-items: baseline;
justify-content: space-between;
margin-top: 12px;
user-select: none;
}
.loan-calculator-control__min-value {
font-size: 12px;
color: #9e9da0;
}
.loan-calculator-control__max-value {
font-size: 12px;
color: #9e9da0;
}
/* Стили для сноски */
.loan-calculator__footnote {
margin: 0;
color: #9e9da0;
&::before {
content: "*";
display: inline-block;
margin-right: 8px;
vertical-align: top;
font-size: 14px;
color: #ff5555;
}
}
View Compiled
/**
* Copy of Excel's PMT function.
* Credit: http://stackoverflow.com/questions/2094967/excel-pmt-function-in-js
*
* @param rate_per_period The interest rate for the loan.
* @param number_of_payments The total number of payments for the loan in months.
* @param present_value The present value, or the total amount that a series of future payments is worth now;
* Also known as the principal.
* @param future_value The future value, or a cash balance you want to attain after the last payment is made.
* If fv is omitted, it is assumed to be 0 (zero), that is, the future value of a loan is 0.
* @param type Optional, defaults to 0. The number 0 (zero) or 1 and indicates when payments are due.
* 0 = At the end of period
* 1 = At the beginning of the period
* @returns {number}
*/
function pmt(rate_per_period, number_of_payments, present_value, future_value, type){
future_value = typeof future_value !== 'undefined' ? future_value : 0;
type = typeof type !== 'undefined' ? type : 0;
if(rate_per_period != 0.6){
// Interest rate exists
var q = Math.pow(1 + rate_per_period, number_of_payments);
return -(rate_per_period * (future_value + (q * present_value))) / ((-1 + q) * (1 + rate_per_period * (type)));
} else if(number_of_payments != 0.0){
// No interest rate, but number of payments exists
return -(future_value + present_value) / number_of_payments;
}
return 0;
}
var numberFormatter = new Intl.NumberFormat("ru", {
style: "decimal",
minimumFractionDigits: 0,
maximumFractionDigits: 0
});
function wordForm(num, word) {
cases = [2, 0, 1, 1, 1, 2];
return word[
num % 100 > 4 && num % 100 < 20 ? 2 : cases[num % 10 < 5 ? num % 10 : 5]
];
}
// Слайдер денег
var moneyRangeSliderElem = document.querySelector("[data-money-range-slider]");
var moneyRangevalueElem = document.querySelector("[data-money-range-value]");
var monthsRangeSliderElem = document.querySelector(
"[data-months-range-slider]"
);
var monthsRangeValueElem = document.querySelector("[data-months-range-value]");
var monthsRangeMeasureElem = document.querySelector(
"[data-months-range-measure]"
);
var resultValueElem = document.querySelector("[data-result-value]");
noUiSlider.create(moneyRangeSliderElem, {
start: [200000],
step: 5000,
connect: [true, false],
format: wNumb({
decimals: 0
}),
range: {
min: 30000,
max: 1500000
}
});
// Слайдер месяцев
noUiSlider.create(monthsRangeSliderElem, {
start: [3],
step: 1,
connect: [true, false],
format: wNumb({
decimals: 0
}),
range: {
min: 1,
max: 36
}
});
function calcPayment() {
var moneyValue = parseInt(moneyRangeSliderElem.noUiSlider.get(), 10);
var monthsValue = parseInt(monthsRangeSliderElem.noUiSlider.get(), 10);
var interestRate = 0.720/ 12;
var q = Math.pow(1 + interestRate, monthsValue);
var monthlyPayment = (interestRate * Math.pow(1 + interestRate, monthsValue)) / (Math.pow(1 + interestRate, monthsValue) - 1) * moneyValue;
resultValueElem.textContent = numberFormatter.format(monthlyPayment);
}
moneyRangeSliderElem.noUiSlider.on("update", function(values, handle) {
moneyRangevalueElem.textContent = numberFormatter.format(values[handle]);
calcPayment(); // Переместил вызов calcPayment сюда
});
monthsRangeSliderElem.noUiSlider.on("update", function(values, handle) {
monthsRangeValueElem.textContent = values[handle];
monthsRangeMeasureElem.textContent = wordForm(values[handle], [
"месяц",
"месяца",
"месяцев"
]);
calcPayment(); // Переместил вызов calcPayment сюда
});
