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

<script>
document.addEventListener("DOMContentLoaded", function() {
    (function () {
        
        let control = true;
        function countCalc() {
            const summa = +document.querySelector('input[name="summa"]').value.replace(/\s/g, '');
            const vznos = +document.querySelector('input[name="vznos"]').value.replace(/\s/g, '');
            let srok = +document.querySelector('input[name="term"]').value;
            const percent = +document.querySelector('input[name="percent"]').value;
        
            let creditSumm = summa - vznos;
            if (creditSumm <= 0) creditSumm = 0;
            
            const monthPercent = percent / 12 / 100;
            srok = srok * 12;
            const 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;
        
            // Форматирование чисел с пробелами
            const formatNumber = (num) => {
                return num.toFixed().replace(/(\d)(?=(\d\d\d)+([^\d]|$))/g, '$1 ');
            };
        
            monthCredit = formatNumber(monthCredit);
            creditSumm = formatNumber(creditSumm);
            finalSumm = formatNumber(finalSumm);
            percentSumm = formatNumber(percentSumm);
            income = formatNumber(income);
        
            // Обновление DOM
            const updateElement = (selector, value) => {
                const element = document.querySelector(selector);
                if (element) element.innerHTML = value + ' ₽';
            };
        
            updateElement('.month-pay .tn-atom', monthCredit);
            updateElement('.credit .tn-atom', creditSumm);
            updateElement('.percent .tn-atom', percentSumm);
            updateElement('.percent-credit .tn-atom', finalSumm);
            updateElement('.income .tn-atom', income);
        }
        
        function setInpVal() {
            const formatValue = (value) => {
                return value.replace(/(\d)(?=(\d\d\d)+([^\d]|$))/g, '$1 ');
            };
        
            const summaInput = document.querySelector('input[name="summa"]');
            const costInp = document.querySelector('input[name="cost-inp"]');
            if (summaInput && costInp) {
                costInp.value = formatValue(summaInput.value);
            }
        
            const vznosInput = document.querySelector('input[name="vznos"]');
            const prepaidInp = document.querySelector('input[name="prepaid-inp-summ"]');
            if (vznosInput && prepaidInp) {
                prepaidInp.value = formatValue(vznosInput.value);
            }
        
            const termInput = document.querySelector('input[name="term"]');
            const termInp = document.querySelector('input[name="term-inp"]');
            if (termInput && termInp) {
                termInp.value = termInput.value;
            }
        
            const percentInput = document.querySelector('input[name="percent"]');
            const percentInp = document.querySelector('input[name="percent-inp"]');
            if (percentInput && percentInp) {
                percentInp.value = percentInput.value;
            }
        }
        
        function maxCorrect() {
            setTimeout(function() {
                const costInput = document.querySelector('input[name="summa"]');
                const vznosInput = document.querySelector('input[name="vznos"]');
                
                if (costInput && vznosInput) {
                    const costt = costInput.value.replace(/[^0-9]/g, '');
                    const newMax = (+costt) - 500000;
                    vznosInput.setAttribute('max', newMax);
                    vznosInput.dispatchEvent(new Event('input', { bubbles: true }));
                }
            }, 500);
        }
        
        
        
        // Инициализация при загрузке страницы
        function waitForm(selector) {
            return new Promise(resolve => {
                const elements = document.querySelectorAll(selector);
                if (elements.length > 0) {
                    return resolve(elements);
                }
                const observer = new MutationObserver(mutations => {
                    const elements = document.querySelectorAll(selector);
                    if (elements.length > 0) {
                        observer.disconnect();
                        resolve(elements);
                    }
                });
                observer.observe(document.body, {
                    childList: true,
                    subtree: true
                });
            });
        }
    
        waitForm('.uc-ipoteka .investform .t-input-group').then((groups) => {
            maxCorrect();
            setInpVal();
            countCalc();
        });
        
        
        
        
        // Обработчики событий для ползунков
        document.querySelector('.uc-ipoteka')?.addEventListener('input', function(e) {
            if (e.target.classList.contains('t-range') && control) {
                countCalc();
                setInpVal();
            }
        });
        
        document.querySelector('.uc-ipoteka')?.addEventListener('change', function(e) {
            if (e.target.name === 'summa') {
                maxCorrect();
            }
        });
        
        function digits_int(target) {
            let val = target.value.replace(/[^0-9.]/g, '');
            val = val.replace(/\B(?=(\d{3})+(?!\d))/g, ' ');
            target.value = val;
        }
        
        // Обработчики для полей ввода
        document.querySelector('.uc-ipoteka')?.addEventListener('input', function(e) {
            if (e.target.type === 'text') {
                digits_int(e.target);
            }
        });
        
        // Обработчики для потери фокуса
        document.querySelector('.uc-ipoteka')?.addEventListener('blur', function(e) {
            if (e.target.type !== 'text') return;
        
            const input = e.target;
            const value = input.value.replace(/[^0-9]/g, '');
            
            // Стоимость
            if (input.name === 'cost-inp') {
                const costRng = document.querySelector('input[name="summa"]');
                if (!costRng) return;
        
                maxCorrect();
                
                const costMin = +costRng.getAttribute('min');
                const costMax = +costRng.getAttribute('max');
                let correctedValue = +value;
                
                if (correctedValue < costMin) correctedValue = costMin;
                else if (correctedValue > costMax) correctedValue = costMax;
                
                costRng.value = correctedValue;
                costRng.dispatchEvent(new Event('input', { bubbles: true }));
                input.value = correctedValue.toFixed().replace(/(\d)(?=(\d\d\d)+([^\d]|$))/g, '$1 ');
            }
            
            // Первоначальный взнос
            else if (input.name === 'prepaid-inp-summ') {
                const prepaidRng = document.querySelector('input[name="vznos"]');
                if (!prepaidRng) return;
                
                const prepaidSMin = +prepaidRng.getAttribute('min');
                const prepaidSMax = +prepaidRng.getAttribute('max');
                let correctedValue = +value;
                
                if (correctedValue < prepaidSMin) correctedValue = prepaidSMin;
                else if (correctedValue > prepaidSMax) correctedValue = prepaidSMax;
                
                prepaidRng.value = correctedValue;
                prepaidRng.dispatchEvent(new Event('input', { bubbles: true }));
                input.value = correctedValue.toFixed().replace(/(\d)(?=(\d\d\d)+([^\d]|$))/g, '$1 ');
            }
            
            // Срок кредита
            else if (input.name === 'term-inp') {
                const termRng = document.querySelector('input[name="term"]');
                if (!termRng) return;
                
                const termMin = +termRng.getAttribute('min');
                const termMax = +termRng.getAttribute('max');
                let correctedValue = +value;
                
                if (correctedValue < termMin) correctedValue = termMin;
                else if (correctedValue > termMax) correctedValue = termMax;
                
                termRng.value = correctedValue;
                termRng.dispatchEvent(new Event('input', { bubbles: true }));
                input.value = correctedValue.toFixed().replace(/(\d)(?=(\d\d\d)+([^\d]|$))/g, '$1 ');
            }
            
            // Процентная ставка
            else if (input.name === 'percent-inp') {
                const percRng = document.querySelector('input[name="percent"]');
                if (!percRng) return;
                
                const percSMin = +percRng.getAttribute('min');
                const percSMax = +percRng.getAttribute('max');
                let correctedValue = +value;
                
                if (correctedValue < percSMin) correctedValue = percSMin;
                else if (correctedValue > percSMax) correctedValue = percSMax;
                
                percRng.value = correctedValue;
                percRng.dispatchEvent(new Event('input', { bubbles: true }));
                input.value = correctedValue.toFixed().replace(/(\d)(?=(\d\d\d)+([^\d]|$))/g, '$1 ');
            }
        }, true);
        
        // Функция для создания обработчиков кнопок
        function createButtonHandler(className, callback) {
            document.querySelector(className)?.addEventListener('click', callback);
        }
        
        // Обработчики для кнопок процентов
        createButtonHandler('.btn-perc0', function() {
            const summaInput = document.querySelector('input[name="summa"]');
            if (summaInput) {
                const summa = +summaInput.value.replace(/\s/g, '');
                const vznosInput = document.querySelector('input[name="vznos"]');
                if (vznosInput) {
                    vznosInput.value = (summa * 0).toFixed();
                    vznosInput.dispatchEvent(new Event('input', { bubbles: true }));
                }
            }
        });
        
        createButtonHandler('.btn-perc10', function() {
            const summaInput = document.querySelector('input[name="summa"]');
            if (summaInput) {
                const summa = +summaInput.value.replace(/\s/g, '');
                const vznosInput = document.querySelector('input[name="vznos"]');
                if (vznosInput) {
                    vznosInput.value = (summa * 0.1).toFixed();
                    vznosInput.dispatchEvent(new Event('input', { bubbles: true }));
                }
            }
        });
        
        createButtonHandler('.btn-perc15', function() {
            const summaInput = document.querySelector('input[name="summa"]');
            if (summaInput) {
                const summa = +summaInput.value.replace(/\s/g, '');
                const vznosInput = document.querySelector('input[name="vznos"]');
                if (vznosInput) {
                    vznosInput.value = (summa * 0.15).toFixed();
                    vznosInput.dispatchEvent(new Event('input', { bubbles: true }));
                }
            }
        });
        
        createButtonHandler('.btn-perc20', function() {
            const summaInput = document.querySelector('input[name="summa"]');
            if (summaInput) {
                const summa = +summaInput.value.replace(/\s/g, '');
                const vznosInput = document.querySelector('input[name="vznos"]');
                if (vznosInput) {
                    vznosInput.value = (summa * 0.2).toFixed();
                    vznosInput.dispatchEvent(new Event('input', { bubbles: true }));
                }
            }
        });
        
        createButtonHandler('.btn-perc25', function() {
            const summaInput = document.querySelector('input[name="summa"]');
            if (summaInput) {
                const summa = +summaInput.value.replace(/\s/g, '');
                const vznosInput = document.querySelector('input[name="vznos"]');
                if (vznosInput) {
                    vznosInput.value = (summa * 0.25).toFixed();
                    vznosInput.dispatchEvent(new Event('input', { bubbles: true }));
                }
            }
        });
        
        createButtonHandler('.btn-perc30', function() {
            const summaInput = document.querySelector('input[name="summa"]');
            if (summaInput) {
                const summa = +summaInput.value.replace(/\s/g, '');
                const vznosInput = document.querySelector('input[name="vznos"]');
                if (vznosInput) {
                    vznosInput.value = (summa * 0.3).toFixed();
                    vznosInput.dispatchEvent(new Event('input', { bubbles: true }));
                }
            }
        });
        
        // Обработчики для кнопок срока
        createButtonHandler('.btn-term5', function() {
            const termInput = document.querySelector('input[name="term"]');
            if (termInput) {
                termInput.value = 5;
                termInput.dispatchEvent(new Event('input', { bubbles: true }));
            }
        });
        
        createButtonHandler('.btn-term10', function() {
            const termInput = document.querySelector('input[name="term"]');
            if (termInput) {
                termInput.value = 10;
                termInput.dispatchEvent(new Event('input', { bubbles: true }));
            }
        });
        
        createButtonHandler('.btn-term15', function() {
            const termInput = document.querySelector('input[name="term"]');
            if (termInput) {
                termInput.value = 15;
                termInput.dispatchEvent(new Event('input', { bubbles: true }));
            }
        });
        
        createButtonHandler('.btn-term20', function() {
            const termInput = document.querySelector('input[name="term"]');
            if (termInput) {
                termInput.value = 20;
                termInput.dispatchEvent(new Event('input', { bubbles: true }));
            }
        });
        
        // Обработчики для кнопок процентных ставок
        createButtonHandler('.btn-st01', function() {
            const percentInput = document.querySelector('input[name="percent"]');
            if (percentInput) {
                percentInput.value = 0.1;
                percentInput.dispatchEvent(new Event('input', { bubbles: true }));
            }
        });
        
        createButtonHandler('.btn-st45', function() {
            const percentInput = document.querySelector('input[name="percent"]');
            if (percentInput) {
                percentInput.value = 4.5;
                percentInput.dispatchEvent(new Event('input', { bubbles: true }));
            }
        });
        
        createButtonHandler('.btn-st6', function() {
            const percentInput = document.querySelector('input[name="percent"]');
            if (percentInput) {
                percentInput.value = 6;
                percentInput.dispatchEvent(new Event('input', { bubbles: true }));
            }
        });
        
        createButtonHandler('.btn-st75', function() {
            const percentInput = document.querySelector('input[name="percent"]');
            if (percentInput) {
                percentInput.value = 7.5;
                percentInput.dispatchEvent(new Event('input', { bubbles: true }));
            }
        });
        
        createButtonHandler('.btn-st91', function() {
            const percentInput = document.querySelector('input[name="percent"]');
            if (percentInput) {
                percentInput.value = 9.1;
                percentInput.dispatchEvent(new Event('input', { bubbles: true }));
            }
        });
        
        createButtonHandler('.btn-st10', function() {
            const percentInput = document.querySelector('input[name="percent"]');
            if (percentInput) {
                percentInput.value = 10;
                percentInput.dispatchEvent(new Event('input', { bubbles: true }));
            }
        });
        
        // Предотвращение отправки формы по Enter
        document.querySelector('.t-form')?.addEventListener('keydown', function(event) {
            if (event.key === 'Enter') {
                event.preventDefault();
                return false;
            }
        });
        
        
        
    })();    
});    
</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>