JSFiddle - React, Tailwind, and code Playground

by Vyacheslav Yashnikov

HTML

<script src="//code.jquery.com/jquery-1.10.2.js"></script>
<script src="//code.jquery.com/ui/1.11.4/jquery-ui.js"></script>
<link rel="stylesheet" href="//code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui-touch-punch/0.2.3/jquery.ui.touch-punch.min.js"></script>
<div id="calculator">
    <div id="choise_tarif">
  <p>Выберите тариф</p>
   <p>
   <select id="tarif">
    <option value='5'>Базовый</option>
    <option value='3.3'>Профессиональный</option>
    <option value='2.2'>Корпоративный</option>
   </select>
  </p>
 </div>
<p>
  <label for="amount">Клиентов в месяц:</label>
  <input type="text" id="client" readonly style="border:0; font-weight:bold;">
</p>
 
<div id="client-slider"></div>
    
    <p>
  <label for="amount">Средний чек на 1-го клиента:</label>
  <input type="text" id="check" readonly style="border:0; font-weight:bold;">
</p>
 
<div id="check-slider"></div>
            <p>
  <label for="amount">Срок использования терминала:</label>
  <input type="text" id="date" readonly style="border:0; font-weight:bold;">
</p>
 
<div id="date-slider"></div>
                <p id="revenue">Ваша чистая выручка: <strong><span></span></strong></p>
                <p id="RevenueGrownthTerminal">Прирост выручки от использования терминала: <strong><span></span></strong></p>
                <p id="rent">Аренда терминала: <strong><span></span></strong></p>
                <p id="tarifpercentage">Процент по транзакциям <strong><span></span></strong></p>
                 <p>Невидимые на сайте значения:</p>
                 <p id="ClientsGrowth">Прирст клиентов: <strong><span></span></strong></p>  
                <p id="TransactionCosts">Расходы по транзакциям: <strong><span></span></strong></p>
                </div>
        </div>

CSS

body {
    background-color: #2c3844;
    color: #fff;
}
input {
    background-color: #2c3844;
    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 tarif = 5,
        client = 1,
        revenue = 0,
        check = 4000,
        date = 1,
        RevenueGrowth = 0,
        rent = 0,
        percentage = 0,
        ClientsGrowth = 0,
    	RentPerMonth = 0,
        TransactionCosts = 0,
        RevenueGrownthTerminal = 0;
    
    function recount() {
        ClientsGrowth = client * 0.3;
        ClientsGrowth = +ClientsGrowth.toFixed();
        rent = String(date * RentPerMonth).replace(/(\d)(?=(\d{3})+(\D|$))/g, '$1 ');
        TransactionCosts = ((client + ClientsGrowth) * check * date) / 100 * tarif;
        RevenueGrownthTerminal = check * date * ClientsGrowth - TransactionCosts;
        TransactionCosts = +TransactionCosts.toFixed();
        revenue = (((client + ClientsGrowth) * date * check) - TransactionCosts).toFixed();
        revenue = revenue.replace(/(\d)(?=(\d\d\d)+([^\d]|$))/g, '$1 ');
        RevenueGrownthTerminal = RevenueGrownthTerminal.toFixed();
        RevenueGrownthTerminal = RevenueGrownthTerminal.replace(/(\d)(?=(\d\d\d)+([^\d]|$))/g, '$1 ');
        jQuery("#revenue span").html(revenue + ' руб');
        jQuery("#ClientsGrowth span").html(ClientsGrowth + ' чел.');
        jQuery("#rent span").html(rent + ' руб.');
        jQuery("#TransactionCosts span").html(TransactionCosts + ' руб.');  
        jQuery("#RevenueGrownthTerminal span").html(RevenueGrownthTerminal + ' руб.');
        jQuery("#tarifpercentage span").html(tarif + ' %');
};
	recount();
    jQuery('#tarif').change(function() {
        tarif = jQuery('#tarif option:selected').val();
        RentPerMonth = 0;
        if (tarif == 3.3) {
        RentPerMonth = 300;
        } else if (tarif == 2.2) {
            RentPerMonth = 900;
        }
        recount();
    });
    $(document).on("change keyup", "#client", function() {
        client = +$(this).val();
        $("#client-slider").slider("value", client);
        recount();
    });
    $(document).on("change keyup", "#check", function() {
   ...