Калькуляторы и счетчики

1. Калькуляторы

В базовом варианте суммирует определенные элементы с заранее заданной стоимостью, в более сложном может служить для расчетов с динамическими параметрами, например разными ценами в разных регионах.

<div class="counter">
                <div class="counter__box">
                    <div class="column">
                        <div class="counter-title">Количество друзей в&nbsp;Tele2</div>
                        <div class="friend-selector">
                            <div class="selector">
                                <div class="selector__line">
                                    <div class="line"><div class="line__indicator"></div></div>
                                </div>
                                <div class="selector__controls">
                                    <div class="control--item _is-selected js-gtm-event" data-event="select_1friend" data-section="section-bonus"><div class="caption">1</div></div>
                                    <div class="control--item js-gtm-event" data-event="select_3friend" data-section="section-bonus"><div class="caption">3</div></div>
                                    <div class="control--item js-gtm-event" data-event="select_5friend" data-section="section-bonus"><div class="caption">5</div></div>
                                    <div class="control--item js-gtm-event" data-event="select_10friend" data-section="section-bonus"><div class="caption">10</div></div>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="column column--right wow fadeIn animated" data-wow-delay=".8s" style="visibility: visible;-webkit-animation-delay: .8s; -moz-animation-delay: .8s; animation-delay: .8s;">
                        <div class="counter-title">Сумма бонуса</div>
                        <div class="counter-result">
                            <div class="counter-result__text">до</div>
                            <div class="counter-result__value">
                                <span class="js-counter-result summary-value">2000</span>
                                <span class="cy">₽</span>
                            </div>
                        </div>
                    </div>
                </div>
            </div>

2. Счетчики

Используется для обратного отсчета времени до конца акции

<div class="countdown-box fadeInUpBig js-countdown-el wow animated" data-wow-delay=".6s" style="visibility: visible;-webkit-animation-delay: .6s; -moz-animation-delay: .6s; animation-delay: .6s;">
    <div class="end-message label" style="text-align:center"> Акция завершена. Ищем для вас новые предложения </div>
</div>