Как создать инвестиционный калькулятор с изменяемым процентом в ZeroBlock Tilda

1

Создали ZeroBlock и добавили в него форму с двумя range slider
Стартовая сумма и срок инвестирования
Задали имена этим полям start_summ и term
Задали класс для это формы invest-form

2

Создали два элемента Text, которые будут отображать сумму и срок вне наших полей.
Задали им классы соответственно start_summ и term

3

Создали четыре элемента Text для расчёта без залога и задали им классы
interest_rate - (Процентная ставка)
monthly_income - (Ежемесячный доход)
amount_payments - (Сумма выплат)
profitability - (Доходность)

4

Создали четыре элемента Text для расчёта с залогом и задали им классы
interest_rate_coll - (Процентная ставка)
monthly_income_coll - (Ежемесячный доход)
amount_payments_coll - (Сумма выплат)
profitability_coll - (Доходность)

5

Добавили код в блок Другое - Т123

Mo-ti Level Up

Видео инструкции по добавлению кода и работе с Zero Block.

Получить полное видео

Посмотреть все видео

Создаём калькулятор для инвестиций в Zero. Добавляем разрядность к наши числам

Фрагмент видео

Посмотреть видео в личном кабинете ►

Библиотека для примера


<script>
document.addEventListener("DOMContentLoaded", function(){
let percentList = [
    [500000 ,  40],
    [1000000 , 50],
    [2000000 , 55],
    [4000000 , 60]
];
let currency = " ₽";

function divide(x, delimiter) {
  return x.toString().replace(/\B(?=(\d{3})+(?!\d))/g, delimiter || " ");
};

function makeСalculation(){
    //Получаем значение нужных полей
        let startSumm = +document.getElementsByName('start_summ')[0].value;
        let term = +document.getElementsByName('term')[0].value;
        
        //Получаем текст для вывода стартовой суммы и срока
        let start_summ = document.querySelectorAll('.start_summ .tn-atom')[0].innerHTML = divide(startSumm)+currency;
        let termTxt = document.querySelectorAll('.term .tn-atom')[0].innerHTML = divide(term) +' мес';
        
        let percent=0;
        for (let i = 0; i < percentList.length; i++) {
            if (startSumm>=percentList[i][0]){
                percent = percentList[i][1];
            };
        };
        //Считаем без залога
        let interest_rate = percent;
        let monthly_income = Math.round(startSumm*percent/12*0.001)*10;
        let amount_payments = monthly_income*term+startSumm;
        let profitability = monthly_income*term;
        
        //Получаем текст для вывода без залога
        document.querySelectorAll('.interest_rate .tn-atom')[0].innerHTML = interest_rate + ' %';
        document.querySelectorAll('.monthly_income .tn-atom')[0].innerHTML = divide( monthly_income ) + currency;
        document.querySelectorAll('.amount_payments .tn-atom')[0].innerHTML = divide( amount_payments ) + currency;
        document.querySelectorAll('.profitability .tn-atom')[0].innerHTML = divide( profitability ) + currency;
        
        //Считаем с залогом
        let interest_rate_coll = percent - 10;
        let monthly_income_coll = Math.round(startSumm*interest_rate_coll/12*0.001)*10;
        let amount_payments_coll = monthly_income_coll*term+startSumm;
        let profitability_coll = monthly_income_coll*term;
        
        //Получаем текст для вывода с залогом
        document.querySelectorAll('.interest_rate_coll .tn-atom')[0].innerHTML = interest_rate_coll +' %';
        document.querySelectorAll('.monthly_income_coll .tn-atom')[0].innerHTML = divide(monthly_income_coll)+currency;
        document.querySelectorAll('.amount_payments_coll .tn-atom')[0].innerHTML = divide(amount_payments_coll)+currency;
        document.querySelectorAll('.profitability_coll .tn-atom')[0].innerHTML = divide(profitability_coll)+currency;
    
        
};

setTimeout(function(){ makeСalculation()}, 2500); 
let investForm = document.querySelectorAll('.invest-form')[0];    
//При изменении стартовой суммы или срока
investForm.addEventListener( 'input' , function() {   makeСalculation()});
});
</script>

<style>
.profitability .t-calc__wrapper {
    color: #3ab6ec !important;
}    
.invest-form .t-range__value-txt {
    display: none !important;
}
</style>