Как сделать калькулятор займа в Tilda

<script>
document.addEventListener("DOMContentLoaded", function() { 
    
(function () { 
    
    const percentDiff = 2.7;
    const percentAnn = 3.7;
    
    document.querySelector('.percent_diff .tn-atom').innerText = percentDiff+'%';
    document.querySelector('.percent_ann .tn-atom').innerText = percentAnn+'%';
    
    function divideNumberByPieces(x, delimiter) {
        return x.toString().replace(/\B(?=(\d{3})+(?!\d))/g, delimiter || " ");
    };
    
    
    document.querySelectorAll('.calc_diff .t-range').forEach(function (el, index) {
        el.addEventListener('input',function(e) {
            
            const summDiff = +document.querySelector("input[name='summ_diff']").value;
            const mpDiff = summDiff*(percentDiff/100);

            document.querySelector('.month-p_diff .tn-atom').innerText = divideNumberByPieces(Math.floor(mpDiff))+' ₽';
            
        });    
    });
    
    
    document.querySelectorAll('.calc_ann .t-range').forEach(function (el, index) {
        el.addEventListener('input',function(e) {
            const summAnn = +document.querySelector("input[name='summ_ann']").value;
            const termAnn = +document.querySelector("input[name='term_ann']").value;
            
            const monthPercent = percentAnn/100/12;
            const degree = Math.pow( 1+monthPercent , -termAnn);
            const mpAnn = summAnn*(monthPercent/(1-degree));
            
            document.querySelector('.month-p_ann .tn-atom').innerText = divideNumberByPieces(Math.floor(mpAnn))+' ₽';
            
        });    
    });
    

    document.querySelector('.uc-calc-ann').classList.add('calc-hide');

    document.querySelectorAll('.btn_diff').forEach(function (el, index) {
        el.classList.add('active-calc');
        el.addEventListener('click',function(e) {
        
        document.querySelectorAll('.active-calc').forEach((el) => { el.classList.remove('active-calc') });
        document.querySelectorAll('.btn_diff').forEach((el) => { el.classList.add('active-calc') });
        document.querySelectorAll('.calc-hide').forEach((el) => { el.classList.remove('calc-hide') });
        document.querySelectorAll('.uc-calc-ann').forEach((el) => { el.classList.add('calc-hide') });

        });    
    });

    
    
    document.querySelectorAll('.btn_ann').forEach(function (el, index) {
        el.addEventListener('click',function(e) {
        
        document.querySelectorAll('.active-calc').forEach((el) => { el.classList.remove('active-calc') });
        document.querySelectorAll('.btn_ann').forEach((el) => { el.classList.add('active-calc') });
        document.querySelectorAll('.calc-hide').forEach((el) => { el.classList.remove('calc-hide') });
        document.querySelectorAll('.uc-calc-diff').forEach((el) => { el.classList.add('calc-hide') });

        });    
    });

})();    
 
});    
</script>


<style>
.calc-hide {
    opacity: 0!important;
    min-height: 0!important;
    max-height: 0!important;
    pointer-events: none!important;
    padding-top: 0 !important;
    padding-bottom: 0 !important;
    overflow: hidden !important;
} 
.btn_ann, .btn_diff {
    cursor: pointer;
}
.active-calc .tn-atom {
    border: 3px solid #ffc107 !important;
}
</style>