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

Калькулятор стоимости

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

1

Создали ZeroBlock и задали ему класс uc-realestate
В примере нам нужно создать зависимость от выбора первоначального взноса и изменить удорожание и оставить процент первоначального взноса 50% >> 50 ; 35% >> 75 ; 25% >> 100

2

Создали в нём поля с именами и значениями
Стоимость недвижимости (ползунок) / имя price
Размер первоначального взноса (выпадающий список) / имя deposit
Заполнение - 50% , 35% , 25%
Срок рассрочки в мес. (ползунок) / имя deadline
Полная стоимость (поле ввода в одну линию) / имя itog
Сумма выплаты в мес. (поле ввода в одну линию) / имя month

3

Вставили код на страницу в блок Т123

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


<script>
document.addEventListener("DOMContentLoaded", function(){

let riseArr = [
    [50 ,  50],
    [35 ,  75],
    [25 , 100]
];    
    
function divide(x, delimiter) {
  return x.toString().replace(/\B(?=(\d{3})+(?!\d))/g, delimiter || " ");
};

function changePercent() {
    let price = + document.getElementsByName('price')[0].value;
    let deposit = document.getElementsByName('deposit')[0];  
    let deadline = + document.getElementsByName('deadline')[0].value;
    
    let depositPos = deposit.selectedIndex;
    let riseinprice = riseArr[depositPos][1];
    let depositPercent = riseArr[depositPos][0];
    
    let itog =   Math.round( price*(1 + riseinprice/1000));
    let month =  Math.round(  ( itog - price*depositPercent/100 )/deadline );
    
    document.getElementsByName('itog')[0].value =  'Итого: '+divide(itog)+' руб.';  
    document.getElementsByName('month')[0].value = 'В месяц: '+divide(month)+' руб.';  

};
setTimeout(function(){ changePercent()}, 2500); 
let realestate = document.querySelectorAll('.uc-realestate')[0]
realestate.addEventListener( 'input' , function() {  changePercent()  });
});
</script>

<style>

input[name="itog"], input[name="month"] {
    background: none !important;
    border: none !important;
    padding-left: 0;
    font-size: 22px !important;
    font-weight: 600 !important;
    color: #5c5c5c !important;
    pointer-events: none;
}
</style>