calculator

by SamokhinDmitro_33JS

HTML

<div class="flex-wrapper">
        <div class="calculator-content">
            <div class="calculator-content-title">
                <h1>Рассчитайте ипотеку</h1>
            </div>
            <div class="calculator-content-body">
                <div class="calculator-content-body-left">
                    <div class="calculator-content-body-left-inputs">
                        <div class="input-wrapper">
                            <div class="title">Стоимость недвижимости</div>
                            <div class="input">
                                <input type="number" id="total-cost" value="0" class="input-start">
                            </div>
                            <div class="input">
                                <input type="range" min="20000" max="100000" id="total-cost-range" value="0" class="input-range">
                            </div>
                        </div>
                        <div class="input-wrapper">
                            <div class="title">Первоначальный взнос</div>
                            <div class="input">
                                <input type="number" id="an-initial-fee" value="0" class="input-start">
                            </div>
                            <div class="input">
                                <input type="range" min="3000" max="10000000" id="an-initial-fee-range" value="0" class="input-range">
                            </div>
                        </div>
                        <div class="input-wrapper">
                            <div class="title">Срок кредита</div>
                            <div class="input">
                                <input type="number" id="credit-term" value="0" class="input-start">
                            </div>
                            <div class="input">
                                <input type="range" min="1" max="20" id="credit-term-range" value="0" class="input-range">
                            </div>
          ...

CSS

html, body {
    font-family: 'Montserrat', sans-serif;
    background-color: #F9FAFC;
}

h1, h2 {
    margin: 0;
    padding: 0;
    font-weight: 500;
    font-size: 30px;
    line-height: 37px;
    color: #071124;
}

h2 {
    font-size: 25px;
    line-height: 30px;
}

button {
    border: none;
    outline: none;
}

input[type='number'] {
    -moz-appearance:textfield;
}

input[type='range'] {
    width: 100%;
}

input[type=range] {
  -webkit-appearance: none; 
  width: 100%; 
}
 
input[type=range]::-webkit-slider-thumb {
  -webkit-appearance: none;
}
 
input[type=range]:focus {
  outline: none; 
}
 
input[type='range'] {
    width: 100%;
    -webkit-appearance: none;
    background-color: #F9FAFC;
}

input[type='range']::-webkit-slider-thumb {
    -webkit-appearance: none;
    cursor: ew-resize;
    width: 18px;
    height: 18px;
    border-radius: 50%;
    background: #599FF1;
    margin-top: -25px;
}


input::-webkit-outer-spin-button,
input::-webkit-inner-spin-button {
    -webkit-appearance: none;
}

.flex-wrapper {
    display: flex;
    justify-content: center;
    width: 100%;
}

.calculator-content {
    width: 100%;
    max-width: 950px;
    padding-top: 100px;
}

.calculator-content-title {
    padding-bottom: 14px;
    border-bottom: 2px solid #E4E6EE;
}

.calculator-content-body {
    display: flex;
}

.calculator-content-body-left,
.calculator-content-body-right {
    width: 50%;
    border-right: 2px solid #E4E6EE;
    padding-top: 40px;
}

.calculator-content-body-right {
    padding-right: 0;
    padding-left: 30px;
    border-right: none;
}

.calculator-content-body-left-inputs,
.calculator-content-body-left-btns {
    padding-right: 30px;
}

.calculator-content-body-left-inputs {
    margin-bottom: 100px;
}

.input-wrapper {
    margin-bottom: 43px;
}

.input-wrapper:last-child {
    margin-bottom: 0;
}

.input-wrapper .title {
    font-weight: 500;
    font-size: 18px;
    line-height: 22px;
    color: rgba(7, 17, 36, 0.5);
   ...

JavaScript

/*Инпуты*/
    //стоимость недвиж
    const totalCost = document.querySelector('#total-cost'),
        //первоначальный взнос
          anInitialFree = document.querySelector('#an-initial-fee'),
        //срок кредита
          creditTerm = document.querySelector('#credit-term');


    /*Ползунки*/
    //стоимость недвиж-r
    const totalCostRange = document.querySelector('#total-cost-range'),
        //первоначальный взнос-r
        anInitialFreeRange = document.querySelector('#an-initial-fee-range'),
        //срок кредита-r
        creditTermRange = document.querySelector('#credit-term-range');



    const allRange = document.querySelectorAll('.input-range');
    const allInputs = document.querySelectorAll('.input-start');


    //Все ползунки
    allRange.forEach(elem => {
        elem.addEventListener('input', initRange);
    });



    //Обработка ввода данных в инпуты
    allInputs.forEach(elem => {
        elem.addEventListener('focus', clearInputs);
        elem.addEventListener('blur',  checkEmpty);
        elem.addEventListener('change', initInputs);
    });


    function initRange() {

        totalCostRange.min = 20000;
        totalCost.value = totalCostRange.value;

        anInitialFreeRange.min = Math.round((Number(totalCost.value)/100)*25);
        anInitialFreeRange.max = Math.round((Number(totalCost.value)/100)*70);

        //при таком раскладе ползунок передвигается от мин к мах (но если менять ползунок Стоимость недвиж в сторону мин значение не меняется)
        //anInitialFree.value = anInitialFreeRange.min;
        //anInitialFree.value = anInitialFreeRange.value;

        //при таком раскладе ползунок не передвигается однако значения меняются корректно
        anInitialFreeRange.value = anInitialFreeRange.min;
        anInitialFree.value = anInitialFreeRange.value;
        creditTerm.value = creditTermRange.value;

    }




    function initInputs() {
        totalCostRange.min = 20000;
        totalCostRange.value =...