Bootstrap snippet and html example. Stretch Ceiling Cost Calculator

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" />

<div class="container">
<h3 class="my-3 text-center"><a href="https://bootstraptema.ru/stuff/snippets_bootstrap/elements/kalkuljator_stoimosti_natjazhnogo_potolka/33-1-0-5181" target="_blank"></a>Калькулятор стоимости натяжного потолка</a></a></h3>
<div id="calculator" class="calculator">
 
<table class="table table-bordered table-hover table-responsive-md">
<col width="70%">
<col width="30%">
 <tbody><tr class="required">
 <td>Площадь потолка</td>
 <td><input name="area" type="text" value="" class="form-control form-control-sm"></td>
 <td>м<sup>2</sup></td>
 </tr>
 <tr class="required">
 <td>Фактура</td>
 <td colspan="2">
 <select name="texture" class="form-control form-control-sm">
 <option value="mat">Матовый</option>
 <option value="glossy">Глянцевый</option>
 <option value="satin">Сатиновый</option>
 <option value="fabric">Тканевый</option>
 </select>
 </td>
 </tr>
 <tr>
 <td>Количество углов</td>
 <td><input name="corners" type="text" value="" class="form-control form-control-sm"></td>
 <td>шт</td>
 </tr>
 <tr>
 <td>Люстр</td>
 <td><input name="chandelier-hook" type="text" value="" class="form-control form-control-sm"></td>
 <td>шт</td>
 </tr>
 <tr>
 <td>Светильников</td>
 <td><input name="lamp" type="text" value="" class="form-control form-control-sm"></td>
 <td>шт</td>
 </tr>
 <tr>
 <td>Трубы в потолок</td>
 <td><input name="tube" type="text" value="" class="form-control form-control-sm"></td>
 <td>шт</td>
 </tr>
 <tr>
 <td>Стоимость без скидки</td>
 <td colspan="2" class="total"><strong class="d-block h5 total text-center"></strong></td>
 </tr>
 </tbody></table>
 

 </div>
</div>

<script>
(function ($) {
 $(function () {
 
 calculate();
 
 jQuery('#calculator input').keyup(function() {
 this.value = this.value.replace(/[^0-9\.,]/g, '');
 this.value = this.value.replace(/[,]/, '.');
 });
 jQuery('#calculator input, #calculator select').change(function() {
 calculate();
 });
 jQuery('#calculator input').keyup(function() {
 calculate();
 });
 function calculate() {
 $('.calculator').each(function(key, val){
 calcInputs = {};
 $(this).find('input, select').each(function(key, val){
 name = $(this).attr('name');
 val = $(this).val();
 if (!$.isNumeric(val)) {
 switch (name) {
 case 'area':
 val = '';
 break;
 case 'corners':
 val = '';
 break;
 case 'lamp':
 val = '';
 break;
 case 'tube':
 val = '';
 break;
 case 'chandelier-hook':
 val = '';
 break;
 default:
 break;
 }
 $(this).val(val);
 }
 calcInputs[name] = val;
 });
 
 total = 0;
 
 switch (calcInputs.texture) {
 case 'mat':
 total += calcInputs.area * 100; // стоимость матового
 break;
 case 'glossy':
 total += calcInputs.area * 150; // стоимость глянцевого
 break;
 case 'satin':
 total += calcInputs.area * 200; // стоимость сатинового
 break;
 case 'fabric':
 total += calcInputs.area * 300; // стоимость тканевого
 break;
 default:
 break;
 }
 
 // стоимость одного угла
 total += calcInputs.corners * 50;
 
 // стоимость одной люстры
 if (calcInputs['chandelier-hook'] >= 1) {
 total += calcInputs['chandelier-hook'] * 500;
 }
 // стоимость одного светильника
 if (calcInputs.lamp >= 1) {
 total += calcInputs.lamp * 250;
 }
 // стоимость одной трубы
 if (calcInputs.tube >= 1) {
 total += calcInputs.tube * 250;
 }
 // площадь потолка
 install = calcInputs.area * 110;
 total += install;
 
 total += ' руб';
 jQuery(this).find('strong.total').html(total);
 });
 }
 
 });
})(jQuery);
;
</script>

body{margin-top:20px;}