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

<script>
$( document ).ready(function() {

let control = true;

function countCalc(){
        

        let summa = +$('input[name="summa"]').val();//Стоимость недвижимости
        let vznos = +$('input[name="vznos"]').val();//Первоначальный взнос
        let srok = +$('input[name="term"]').val();//Срок кредита
        let percent = +$('input[name="percent"]').val();//Процентная ставка
    
        let creditSumm = summa-vznos; //Сумма кредита
        
        if(creditSumm<=0) creditSumm=0;
        
        let monthPercent = percent/12/100; //ЕЖЕМЕСЯЧНАЯ_СТАВКА
        //Возведение в степень
        srok = srok*12;//Год в месяц
        let degree = Math.pow( 1+monthPercent , -srok);  //ОБЩАЯ_СТАВКА
         
        let monthCredit = creditSumm*(monthPercent/(1-degree));//ЕЖЕМЕСЯЧНЫЙ_ПЛАТЕЖ
         
        //Формируем итоги
         
        //Меясячный платёж

        let finalSumm = monthCredit*srok;//Итоговая сумма
        let percentSumm = finalSumm - creditSumm;//Сумма по Процентам
        let income = monthCredit*1.6667; //Необходимый доход

        monthCredit = (monthCredit.toFixed()).replace(/(\d)(?=(\d\d\d)+([^\d]|$))/g, '$1 ');
        creditSumm = (creditSumm.toFixed()).replace(/(\d)(?=(\d\d\d)+([^\d]|$))/g, '$1 ');
        finalSumm = (finalSumm.toFixed()).replace(/(\d)(?=(\d\d\d)+([^\d]|$))/g, '$1 ');
        percentSumm = (percentSumm.toFixed()).replace(/(\d)(?=(\d\d\d)+([^\d]|$))/g, '$1 ');
        income = (income.toFixed()).replace(/(\d)(?=(\d\d\d)+([^\d]|$))/g, '$1 ');

        
        //Выводим данные в текст 
        $('.month-pay .tn-atom').html(monthCredit+' ₽'); //Меясячный платёж
        $('.credit .tn-atom').html(creditSumm+' ₽'); //Кредит
        $('.percent .tn-atom').html(percentSumm+' ₽'); //Проценты
        $('.percent-credit .tn-atom').html(finalSumm+' ₽'); //Проценты+Кредит
        $('.income  .tn-atom').html(income+' ₽'); //Необходимый доход

};


// Обновляем значения в полях ввода
function setInpVal(){

    $('input[name="cost-inp"]').val( $('input[name="summa"]').val().replace(/(\d)(?=(\d\d\d)+([^\d]|$))/g, '$1 '));
    
    let prc = $('input[name="vznos"]').val();
    $('input[name="prepaid-inp-summ"]').val(prc.replace(/(\d)(?=(\d\d\d)+([^\d]|$))/g, '$1 ')); 
    
    $('input[name="term-inp"]').val( $('input[name="term"]').val());
    $('input[name="percent-inp"]').val( $('input[name="percent"]').val());
    
 
};


function maxCorrect(){
     //Корректировка максимума
        setTimeout(function () {
            let costt = $('input[name="summa"]').val();
            costt=costt.replace(/[^0-9]/g, '');
            let newMax = (+costt) - 500000;
            $('input[name="vznos"]').attr('max', newMax)
            $('input[name="vznos"]')[0].dispatchEvent(new Event('input', { bubbles: true }));            
        }, 500);
    
      
};


//Проставляем номиналы в полях при загрузке страницы
setTimeout(function () { 
    
    
    maxCorrect();
    
    setInpVal();
    countCalc();  
}, 1500);
     

//При изменении ползунка
$(".uc-ipoteka").on('input', ".t-range", function() {
    if(control){
        countCalc();
        setInpVal();
    };
    
    
});    


$(".uc-ipoteka").on('change', 'input[name="summa"]', function() {
    
       maxCorrect();
    
});  


function digits_int(target){
	val = $(target).val().replace(/[^0-9.]/g, '');
	val = val.replace(/\B(?=(\d{3})+(?!\d))/g, ' ');
	$(target).val(val);
}
 


//При вводе данных в поля
$(".uc-ipoteka").on('input', "input[type='text']", function() {
    //this.value = this.value.replace(/[^0-9]/g, '');
    digits_int(this);
});


//При потере фокуса полем
$(".uc-ipoteka").on('blur', "input[type='text']", function() {
    //****Корректируем диапазоны ввода полей
    
    //Стоимость 
    if( $(this).attr('name') == 'cost-inp' ){
        let costVal = this.value.replace(/[^0-9]/g, '');
        let costRng = $('input[name="summa"]');
        
       maxCorrect();
        

        let costMin = +costRng.attr('min');
        let costMax = +costRng.attr('max');
        if (costVal < costMin) {this.value = costMin} else if (costVal > costMax) {
	        this.value = costMax} else {this.value = costVal};
	    //Изменяем позицию ползунка
	    costRng.val(this.value);
	    costRng[0].dispatchEvent(new Event('input', { bubbles: true }));
	    this.value = this.value.replace(/(\d)(?=(\d\d\d)+([^\d]|$))/g, '$1 ');
    };
    

    //Первоначальный взнос
    if( $(this).attr('name') == 'prepaid-inp-summ' ){
        let prepaidSumm = this.value.replace(/[^0-9]/g, '');
        let prepaidRng = $('input[name="vznos"]');
        let prepaidSMin = +prepaidRng.attr('min');
        let prepaidSMax = +prepaidRng.attr('max');

        if (prepaidSumm < prepaidSMin) {this.value = prepaidSMin} else if (prepaidSumm > prepaidSMax) {
	        this.value = prepaidSMax} else {this.value = prepaidSumm};
	    //Изменяем позицию ползунка

	    prepaidRng.val(this.value);
	    prepaidRng[0].dispatchEvent(new Event('input', { bubbles: true }));
	    this.value = this.value.replace(/(\d)(?=(\d\d\d)+([^\d]|$))/g, '$1 ');
	    
    };    
    

    //Срок 
    if( $(this).attr('name') == 'term-inp' ){
        let termVal = this.value.replace(/[^0-9]/g, '');
        let termRng = $('input[name="term"]');
        let termMin = +termRng.attr('min');
        let termMax = +termRng.attr('max');
        if (termVal < termMin) {this.value = termMin} else if (termVal > termMax) {
	        this.value = termMax} else {this.value = termVal};
	    //Изменяем позицию ползунка
	    termRng.val(this.value);
	    termRng[0].dispatchEvent(new Event('input', { bubbles: true }));
	    this.value = this.value.replace(/(\d)(?=(\d\d\d)+([^\d]|$))/g, '$1 ');
    };
    
    //Процент
    if( $(this).attr('name') == 'percent-inp' ){
        let percSumm = this.value.replace(/[^0-9]/g, '');
        let percRng = $('input[name="percent"]');
        let percSMin = +percRng.attr('min');
        let percSMax = +percRng.attr('max');

        if (percSumm < percSMin) {this.value = percSMin} else if (percSumm > percSMax) {
	        this.value = percSMax} else {this.value = percSumm};
	    //Изменяем позицию ползунка

	    percRng.val(this.value);
	    percRng[0].dispatchEvent(new Event('input', { bubbles: true }));
	    this.value = this.value.replace(/(\d)(?=(\d\d\d)+([^\d]|$))/g, '$1 ');
	    
    }; 
    

});



$('.btn-perc0').click(function(){
    let summa = +$('input[name="summa"]').val();//Стоимость недвижимости
    let vznos = summa*0; vznos = vznos.toFixed(); 
    $('input[name="vznos"]').val(vznos);
    $('input[name="vznos"]')[0].dispatchEvent(new Event('input', { bubbles: true }));
});

$('.btn-perc10').click(function(){
    let summa = +$('input[name="summa"]').val();//Стоимость недвижимости
    let vznos = summa*0.1; vznos = vznos.toFixed(); 
    $('input[name="vznos"]').val(vznos);
    $('input[name="vznos"]')[0].dispatchEvent(new Event('input', { bubbles: true }));
});

$('.btn-perc15').click(function(){
    let summa = +$('input[name="summa"]').val();//Стоимость недвижимости
    let vznos = summa*0.15; vznos = vznos.toFixed(); 
    $('input[name="vznos"]').val(vznos);
    $('input[name="vznos"]')[0].dispatchEvent(new Event('input', { bubbles: true }));
});

$('.btn-perc20').click(function(){
    let summa = +$('input[name="summa"]').val();//Стоимость недвижимости
    let vznos = summa*0.2; vznos = vznos.toFixed(); 
    $('input[name="vznos"]').val(vznos);
    $('input[name="vznos"]')[0].dispatchEvent(new Event('input', { bubbles: true }));
});

$('.btn-perc25').click(function(){
    let summa = +$('input[name="summa"]').val();//Стоимость недвижимости
    let vznos = summa*0.25; vznos = vznos.toFixed(); 
    $('input[name="vznos"]').val(vznos);
    $('input[name="vznos"]')[0].dispatchEvent(new Event('input', { bubbles: true }));
});

$('.btn-perc30').click(function(){
    let summa = +$('input[name="summa"]').val();//Стоимость недвижимости
    let vznos = summa*0.3; vznos = vznos.toFixed(); 
    $('input[name="vznos"]').val(vznos);
    $('input[name="vznos"]')[0].dispatchEvent(new Event('input', { bubbles: true }));
});




$('.btn-term5').click(function(){
    $('input[name="term"]').val(5);
    $('input[name="term"]')[0].dispatchEvent(new Event('input', { bubbles: true }));
});

$('.btn-term10').click(function(){
    $('input[name="term"]').val(10);
    $('input[name="term"]')[0].dispatchEvent(new Event('input', { bubbles: true }));
});

$('.btn-term15').click(function(){
    $('input[name="term"]').val(15);
    $('input[name="term"]')[0].dispatchEvent(new Event('input', { bubbles: true }));
});

$('.btn-term20').click(function(){
    $('input[name="term"]').val(20);
    $('input[name="term"]')[0].dispatchEvent(new Event('input', { bubbles: true }));
});


$('.btn-st01').click(function(){
    $('input[name="percent"]').val(0.1);
    $('input[name="percent"]')[0].dispatchEvent(new Event('input', { bubbles: true }));
});

$('.btn-st45').click(function(){
    $('input[name="percent"]').val(4.5);
    $('input[name="percent"]')[0].dispatchEvent(new Event('input', { bubbles: true }));
});

$('.btn-st6').click(function(){
    $('input[name="percent"]').val(6);
    $('input[name="percent"]')[0].dispatchEvent(new Event('input', { bubbles: true }));
});

$('.btn-st75').click(function(){
    $('input[name="percent"]').val(7.5);
    $('input[name="percent"]')[0].dispatchEvent(new Event('input', { bubbles: true }));
});

$('.btn-st91').click(function(){
    $('input[name="percent"]').val(9.1);
    $('input[name="percent"]')[0].dispatchEvent(new Event('input', { bubbles: true }));
});


$('.btn-st10').click(function(){
    $('input[name="percent"]').val(10);
    $('input[name="percent"]')[0].dispatchEvent(new Event('input', { bubbles: true }));
});


    
$(document).on("keydown", ".t-form", function(event) {return event.key != "Enter";});    
});
</script>



<style>
.uc-ipoteka .t-range__value-txt,
.uc-ipoteka .t-range__interval-txt{
    display: none !important;
}

input[name="vznos"],
input[name="term"],
input[name="percent"]{
    margin-bottom: 20px;
}

.uc-ipoteka .t-range__wrapper {
    padding-top: 0;
    margin-top: -20px;
}

div[class*="btn-perc"],
div[class*="btn-term"],
div[class*="btn-st"]
{
    cursor: pointer;
}

.uc-ipoteka .t-form__inputsbox .t-input-group .t-input-block:after {
    font-family: 'TildaSans',Arial,sans-serif;
    position: absolute;
    right: 10px;
    font-size: 18px;
    top: 50%;
    transform: translateY(-50%);
    opacity:0.8;
}

.uc-ipoteka .t-form__inputsbox .t-input-group:nth-child(1) .t-input-block:after {
    content: "₽";
}

.uc-ipoteka .t-form__inputsbox .t-input-group:nth-child(3) .t-input-block:after {
    content: "₽";
}

.uc-ipoteka .t-form__inputsbox .t-input-group:nth-child(5) .t-input-block:after {
    content: "Лет";
}

.uc-ipoteka .t-form__inputsbox .t-input-group:nth-child(7) .t-input-block:after {
    content: "%";
}

</style>