JSFiddle - React, Tailwind, and code Playground

by Vyacheslav Yashnikov

HTML

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.0/jquery.min.js"></script>
<div id="calculator">
    <div id="choise_tarif">
        <p>Вид котла</p>
            <p>
                <select id="TypeOfBoiler">
                    <option value='5'>Котел 1</option>
                    <option value='3.3'>Котел 2</option>
                    <option value='2.2'>Котел 3</option>
                </select>
            </p>
    </div>
    <p>
        <label for="amount">площадь отапливаемых помещений (в м2):</label>
        <input type="text" value="5000" id="RoomSpace" style="border:0; font-weight:bold;">
    </p>
    
    <p>
        <label for="amount">Количество радиаторов в доме:</label>
        <input type="text" value="21" id="NumberRadiators" style="border:0; font-weight:bold;">
    </p>
    <p id="Price">Приблизительная стоимость работ: <strong><span></span></strong></p>
    <p>
        <label for="amount">Введите Промокод:</label>
        <input type="text" maxlength="4" id="PromoCodeIn" style="border:0; font-weight:bold;">
    </p>
    <p id="PromoCode">Ваш промокод: <strong><span></span></strong></p>
</div>

CSS

body {
    background-color: #2c3844;
    color: #fff;
}
input {
    background-color: #001831;
    color: #34a3db;
}
#tarif {
    background-color: #fff;
    color: #444;
}

span { 
    color: #91e8fc;
}
.ui-widget-content{
    background-color: #6b6b6b;
    border-color: #6b6b6b;
}
.ui-slider-handle {
    background: #c1c2c4;
    border-radius: 0.6em;
}
.ui-slider-range {
    background: #34a3db;
}

JavaScript

jQuery(function() {
    var TypeOfBoiler = 5,
        RoomSpace = 5000, 
        Price = 0,
        NumberRadiators = 21,
        PromoCodeIn,
        PromoCode,
        Discount = 0,
    		PricePerBoiler = 0;
    // Функция расчета
    function GeneratePromoCode () {
    PromoCode = Math.floor(Math.random( ) * (9999 - 1000 + 1)) + 1000;
    jQuery("#PromoCode span").html(PromoCode);
    };
    GeneratePromoCode ();
    function recount() {
        // Считаем чистую выручку преобразуем в строку и округляем ее до целого значения
        Price = (PricePerBoiler + RoomSpace + NumberRadiators -Discount).toFixed();
        // Выводим данные
        jQuery("#Price span").html(Price + ' руб');
};
    // Вызываем функцию расчета
	recount();
    // Если в #tarif изменилось значение то выполняется функция:
    jQuery('#TypeOfBoiler').change(function() {
        TypeOfBoiler = jQuery('#TypeOfBoiler option:selected').val();
        PricePerBoiler = 0;
        if (TypeOfBoiler == 3.3) {
        PricePerBoiler = 300;
        } else if (TypeOfBoiler == 2.2) {
            PricePerBoiler = 900;
        }
        // Вызываем функцию расчета, чтобы пересчитать после зменения 
        recount();
    });
    // Вывод данных из слайдера, при условии что он был сдвинут, слайдер выдает переменную в виде строки, преобразуем ее в число добавив унарный +
    $(document).on("change keyup", "#RoomSpace", function() {
        RoomSpace = +$(this).val();
        // Вызываем функцию расчета, чтобы пересчитать после зменения 
        recount();
    });
        $(document).on("change keyup", "#PromoCodeIn", function() {
        PromoCodeIn = +$(this).val();
        Discount = 0;
        if (PromoCodeIn == PromoCode) {
        Discount = 1200;
        };
        // Вызываем функцию расчета, чтобы пересчитать после зменения 
        recount();
    });
    // Вывод данных из слайдера, при условии что он был сдвинут, слайдер выдает переменную в виде строки, преобразуем ее в число добавив унарный +
  ...