@paskalov-aris

Как написать такой калькулятор?

Есть такой сайт - *клик*

Я тренируюсь в вёрстке и написании кода на JS, поэтому решил попробовать написать подобный сайт.
Но я столкнулся с проблемой в разработке такого калькулятора, как на этом сайте:

5fa53458233fa712755386.png

Я пытался его разработать, вот что получилось - *клик*
(пролистайте вниз до калькулятора)

Вроде-бы работает, при увеличении значения value у input type="range" сумма в блоках справа увеличивается.
Но если промотать input type="range" назад, сумма должна уменьшаться, но она всё равно увеличивается.

Вот код, который у меня получился:
// Сам <input type="range">
let range = document.querySelector('#calculate__range');

// Блок справа, в котором указывается цена за 5 лет
let $5year = document.querySelector('#calculate-5-years');

// Блок справа, в котором указывается цена за 10 лет
let $10year = document.querySelector('#calculate-10-years');

let step5 = 10;
let step10 = 20;

// Текущая цена за 5 лет
let currentStep5 = 3650;
// Текущая цена за 10 лет
let currentStep10 = 7300;

$5year.textContent = `$${currentStep5}`;
$10year.textContent = `$${currentStep10}`;

range.addEventListener('input', function() {
    for(let i = 0; i <= range.value; i++) {
        currentStep5 += step5;
        $5year.textContent = `$${currentStep5}`;
        currentStep10 += step10;
        $10year.textContent = `$${currentStep10}`;
    }
});


HTML:
<section class="calculate" id="calculate">
            <div class="container">
                <div class="calculate__body">
                    <div class="calculate__column">
                        <h1 class="calculate__title">Calculate your earnings</h1>
                        <h2 class="calculate__subtitle">
                            Earnings depend on the power of your graphics card as well as overall market conditions.
                            Newer PCs can make anywhere from $15-$75* per GPU per month.<br><br>
                            See the potential if you HODL based on annual bitcoin growth rates:
                        </h2>
                        <input type="range" id="calculate__range" min="0" max="100" value="0">
                        <input type="text" id="range__value" disabled></input>
                    </div>
                    <div class="calculate__column">
                        <div class="calculate__item item">
                            <div class="item__head">
                                <p><span>5</span><br> years</p>
                            </div>
                            <div class="item__body">
                                <p id="calculate-5-years"></p>
                            </div>
                        </div>
                        <div class="calculate__item item">
                            <div class="item__head">
                                <p><span>10</span><br> years</p>
                            </div>
                            <div class="item__body">
                                <p id="calculate-10-years"></p>
                            </div>
                        </div>
                        <p class="calculate__text">* Assuming one graphics card. Computers with multiple graphics cards
                            will earn more. Does not include electricity costs.</p>
                    </div>
                </div>
                <p class="calculate__hint">
                    This is a hypothetical model, not a prediction or projection of performance, and assumes you are
                    mining every day and that mining profitability scales with the market. It does not account for fees
                    or taxes and is for illustrative purposes only. Actual return may be more or less than presented
                    above.
                </p>
            </div>
        </section>


Подскажите пожалуйста, как правильнее написать такой калькулятор? В каком направлении гуглить?
  • Вопрос задан
  • 95 просмотров
Пригласить эксперта
Ответы на вопрос 1
@V0vash
НАшКОДИЛ
логично сравнивать с текущим значением, если значение увеличивается => прибавляем стоимость
если значение уменьшается => убавляем стоимость стоимость

на данный момент при любом изменении происходит это:
currentStep5 += step5;
        $5year.textContent = `$${currentStep5}`;
        currentStep10 += step10;
        $10year.textContent = `$${currentStep10}`;
Ответ написан
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы
Artezio Нижний Новгород
от 130 000 до 180 000 ₽
Artezio Москва
от 160 000 до 220 000 ₽
04 дек. 2020, в 10:20
20000 руб./за проект
04 дек. 2020, в 09:56
12000 руб./за проект
04 дек. 2020, в 08:53
10000 руб./за проект