How to write such a calculator?

  • 0
    There is such a site - * click *

    I practice coding and writing JS code, so I decided to try to write a similar site.
    But I ran into a problem in developing a calculator like this one on this site:



    I tried to develop it, this is what happened - * click *
    (scroll down to calculator)

    It seems to work, with an increase in the value of input type = "range", the amount in the blocks on the right increases.
    But if you scroll back the input type = "range", the amount should decrease, but it still increases.

    Here is the code I ended up with:
    // Сам <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>


    Please tell me how to write such a calculator correctly? In which direction to google?
    JavaScript Anna Olsen, Jun 6, 2019

  • 1 Answers
  • 0
    it is logical to compare with the current value if the value is increasing = & gt; add the cost

    if value decreases = & gt; reduce the cost cost



    at the moment any change happens this:

    currentStep5 += step5;
    $5year.textContent = `$${currentStep5}`;
    currentStep10 += step10;
    $10year.textContent = `$${currentStep10}`;
    Anonymous

Your Answer
To place the code, please use CodePen or similar tool. Thanks you!