Есть такой сайт -
*клик*
Я тренируюсь в вёрстке и написании кода на JS, поэтому решил попробовать написать подобный сайт.
Но я столкнулся с проблемой в разработке такого калькулятора, как на этом сайте:
Я пытался его разработать, вот что получилось -
*клик*
(пролистайте вниз до калькулятора)
Вроде-бы работает, при увеличении значения 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>
Подскажите пожалуйста, как правильнее написать такой калькулятор? В каком направлении гуглить?
