CodePen Embed - Строительный калькулятор

<ul class="ub-grid1 grid-line1">
<li class="ub-grid grid-line">
<div class="ub-grid grid-column">
      <p class="badge badge-warning">Ширина дома, м</p>
      <input type="number" name="quant" class="form-control mtr" id="weight" value="2"/>
 

   
      <p class="badge badge-warning">Высота стен, м</p>
      <select  type="select" id="vol" name="quant2" class="form-control mtr"/>
   <option value="2">2 м</option>
<option  value="2.1">2,1 м</option>
<option  value="2.2">2,2 м</option>
<option  value="2.3">2,3 м</option>
<option  value="2.4">2,4 м</option>
<option  value="2.5">2,5 м</option>
<option  value="2.6">2,6 м</option>
<option  value="2.7">2,7 м</option>
<option  value="2.8">2,8 м</option>
<option  value="2.9">2,9 м</option>
<option  value="3">3 м</option>
<option  value="3.1">3,1 м</option>
<option  value="3.2">3,2 м</option>

</select>
 <p class="badge badge-warning">Тип фундамента</p>
      <select  type="select" id="voll" name="quant2" class="form-control mtr"/>
   <option value="200000">Монолитная лента на глубину промерзания</option>
  <option value="300000">Утепленная монолитная плита (УМП)</option>
<option value="50000">Свайно-винтовой</option>
<option value="75000">Буро-забивной</option>
<option value="100000">Свайно-ленточный</option>
</select>
      <p class="badge badge-warning">Лестница</p>
<div class="field-radio-group">
 <div class="field-body">
     <label class="custom-control-label radioo" for="load1"> <input type="radio" id="load1" name="quant11" class="custom-control-input mtr radio" value="0">
     <span> Да полноценная</span></label>
</div>
 
 
   <div class="field-body">
     <label class="custom-control-label radioo" for="del1"> <input type="radio" id="del1" name="quant11" class="mtr custom-control-input radio" value="0" checked="checked"><span>
      Нет</span></label>
     </div>
   <div class="field-body">
     <label class="custom-control-label radioo" for="frag1"> <input type="radio" id="frag1" name="quant11" class="custom-control-input radio"><span>
      Черновая</span> </label>
    </div>
  </div>
</div>

<div class="ub-grid grid-column">
      <p class="badge badge-warning">Длина дома, м</p>
      <input type="number" name="quant" class="form-control mtr" id="length" value="2"/>

   
     
 
      <p class="badge badge-warning">Проживание</p>
     <div class="field-radio-group">
 <div class="field-body">
 
     <label class="custom-control-label radioo" for="p1"> <input type="radio" id="p1" name="quant31" class="mtr custom-control-input" checked="checked">
      <span>Постоянное</span></label>
   </div>
   <div class="field-body">
     <label class="custom-control-label radioo" for="p2"> <input type="radio" id="p2" name="quant31" class="custom-control-input" >
      <span>Сезонное</span> </label>
    </div>
  </div>
 <p class="badge badge-warning">Дополнения</p>
<div class="field-radio-group">
 <div class="field-body">
      <label class="custom-control-label radioo" for="load" ><input type="radio" id="load" name="quant" class="custom-control-input mtr"/>
      <span>Подпол</span></label>
    </div>
   <div class="field-body">
      <label class="custom-control-label radioo" for="del"><input type="radio" id="del" name="quant" class="mtr custom-control-input"/>
      <span>Подвал</span></label>
   </div>
   <div class="field-body">
      <label class="custom-control-label radioo" for="frag"><input type="radio" id="frag" name="quant" class="custom-control-input" checked="checked"/>
      <span>Нет</span></label>
     </div>
   <div class="field-body">
  <label class="custom-control-label radioo" for="fragg"><input type="radio" id="fragg" name="quant" class="custom-control-input" />
  <span>Отмоска</span></label>
  </div>
   </div>
  
  <p class="badge badge-warning">Этажность дома</p>
      <select  type="select" id="etazh" name="quant2" class="form-control mtr"/>
   <option value="1">Одиноэтажный</option>
<option  value="1.5">Двухэтажный (мансардный)</option>
<option  value="2">Двухэтажный (полноценный)</option>
<option  value="2.5">Трехэтажный (мансардный)</option>
<option  value="3">Трехэтажный (полноценный)</option>
</select>
      </div>
</li>
  <li class="ub-grid grid-line">
 
     <p class="badge badge-warning">Мат. внешних стен</p>
      <select  type="select" id="steny" name="quant2" class="form-control mtr"/>
   <option value="10000">Каркасно-панельное</option>
<option  value="17000">Пено-газо блок (400 мм)</option>
<option  value="12000">Каркасно-щитовое</option>
<option  value="15000">Кирпич (380 мм)</option>
<option  value="19000">Трехэтажный (полноценный)</option>
<option  value="13000">Брусовое</option>
<option  value="14000">Бревенчатое</option>
</select>

</li>
<li class="ub-grid grid-line">
 
     <p class="badge badge-warning">Тип перекрытия</p>
      <select  type="select" id="perekrytie" name="quant2" class="form-control mtr"/>
   <option value="30000">По деревянным балкам</option>
<option  value="60000">Сборное из ЖБ плит</option>
<option  value="90000">Бетонное монолитное</option>
<option  value="100">По двутаврам, LVL-балкам</option>
</select>

</li>
 <li class="ub-grid grid-line">
<div class="ub-grid grid-column"><p class="badge badge-warning">Материал кровли</p>
  <select type="select" id="krov" name="quant21" class="form-control mtr">
   <option value="10000">Металлочерепица</option>
<option value="20000">Мягкая черепица</option>
    <option value="30000">Композитная черепица</option>
    <option value="40000">Плоская кровля</option>
    <option value="50000">Кровельный профнастил</option>
    <option value="60000">Цементно-песчаная черепица</option>
    <option value="70000">Керамическая черепица</option>
    <option value="80000">Металлический сайдинг</option>

</select>
  
  <p class="badge badge-warning">Тип кровли</p>
  <select type="select" id="krov2" name="quant21" class="form-control mtr">
   <option value="10000">Односкатная</option>
<option value="20000">Двухскатная</option>
    <option value="30000">Четырехскатная</option>
    <option value="100">Вальмовая</option>
    <option value="200">Плоская</option>

</select>
   </div>
   <div class="ub-grid grid-column"><p class="badge badge-warning">Вставка окон и дверей</p>
  <div class="field-radio-group">
 <div class="field-body">
 
     <label class="custom-control-label radioo" for="okna"> <input type="radio" id="okna" name="quant3" class="mtr custom-control-input" checked="checked">
      <span>Да</span></label>
   </div>
   <div class="field-body">
     <label class="custom-control-label radioo" for="okna2"> <input type="radio" id="okna2" name="quant3" class="custom-control-input">
      <span>Нет</span> </label>
    </div>
  </div>
  
  <p class="badge badge-warning">Дополнительные постройки</p>
  <select type="select" id="dop" name="quant221" class="form-control mtr">
   <option value="100">Баня, гараж</option>
<option value="200">Балкон, терраса </option>
    <option value="300">Веранда, печка</option>
    <option value="400">Сарай, хоз. блок</option>
    <option value="500">Без построек</option>

</select>
   </div>
</li>

<li class="ub-grid grid-line">
  <div class="row12">
  <div class="half-width" style="display: block"><div class="full-width-el"><p>Итого:</p></div></div>
  <div class="row1 col-12 mb-3"><span id="out">0.0</span> <span class="rub">₽ублей</span></div>
    </div>
  </li>
 </ul>

body {
  margin: 0 20% 0 20%;
}
li.ub-grid.grid-line {
    display: table;
    position: relative;
    width: 100%;
  margin: 10px;
}
.ub-grid.grid-column {
    display: table-cell;
    position: relative;
    vertical-align: top;
    min-width: 160px;
    width: 50%;
    padding: 10px;
}
.grid-column select {
    width: 100%;
    border-radius: 6px;
    font-size: 14px;
    padding: 8px 12px;
    background: #fff;
    border: 2px solid #ffc107;
    color: #212121;
}
input#weight, input#length,
select#krov, select#krov2 {
    width: 94%;
    border-radius: 6px;
    font-size: 14px;
    padding: 8px 12px;
    background: #fff;
    border: 2px solid #ffc107;
    color: #212121;
}
select#steny, select#perekrytie {
    width: 99%;
    border-radius: 6px;
    font-size: 14px;
    padding: 8px 12px;
    background: #fff;
    border: 2px solid #ffc107;
    color: #212121;
}
 /* для элемента input c type="radio" */
.radioo>input {
  position: absolute;
  z-index: -1;
  opacity: 0;
}

/* для элемента label связанного с .custom-radio */
.radioo>span {
  display: inline-flex;
  align-items: center;
  user-select: none;
}

/* создание в label псевдоэлемента  before со следующими стилями */
.radioo>span::before {
  content: '';
  display: inline-block;
  width: 14px;
  height: 14px;
  flex-shrink: 0;
  flex-grow: 0;
  border: 2px solid #ffc107;
  border-radius: 50%;
  margin-right: 0.5em;
  background-repeat: no-repeat;
  background-position: center center;
  background-size: 50% 50%;
}

/* стили при наведении курсора на радио */
.radioo>input:not(:disabled):not(:checked)+span:hover::before {
  border-color: #ffc107;
}

/* стили для активной радиокнопки (при нажатии на неё) */
.radioo>input:not(:disabled):active+span::before {
  background-color: #ffc107;
  border-color: #ffc107;
}

/* стили для радиокнопки, находящейся в фокусе */
.radioo>input:focus+span::before {
  box-shadow: 0 0 0 0.2rem #ffc10799;
}

/* стили для радиокнопки, находящейся в фокусе и не находящейся в состоянии checked */
.radioo>input:focus:not(:checked)+span::before {
  border-color: #ffc107;
}

/* стили для радиокнопки, находящейся в состоянии checked */
.radioo>input:checked+span::before {
  border-color: #ffc107;
  background-color: #ffc107;
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'%3e%3ccircle r='3' fill='%23fff'/%3e%3c/svg%3e");
}

/* стили для радиокнопки, находящейся в состоянии disabled */
.radioo>input:disabled+span::before {
  background-color: #ffc107;
}
.row12 {
    background: #ffc107;
    margin-top: 10px;
    padding: 20px;
    width: 96%;
    text-align: right;
}
.row1.col-12.mb-3 {
    color: #212121;
    font-size: 21px;
    font-weight: 700;
}
.field-radio-group {
    margin-bottom: -8px;
}
p.badge.badge-warning {
    color: #212121;
    font-size: 16px;
    font-weight: 700;
    margin-bottom: 0;
    font-family: PTSans-Regular,sans-serif;
    padding: 10px;
}

$( document ).ready(function() {
var btn = document.querySelector('#btn'),
    out = document.querySelector('#out'),
    weight =document.querySelector('#weight'),
    vol = document.querySelector('#vol'),
    voll = document.querySelector('#voll'),
    perekrytie = document.querySelector('#perekrytie'),
    etazh = document.querySelector('#etazh'),
    steny = document.querySelector('#steny'),
    krov = document.querySelector('#krov'),
    krov2 = document.querySelector('#krov2'),
    dop = document.querySelector('#dop'),
    length = document.querySelector('#length')
    load = document.querySelector('#load'),
    del = document.querySelector('#del'),
    frag = document.querySelector('#frag'),
    range = document.querySelector('#range'),
    weight = document.querySelector('#weight'),
    length = document.querySelector('#length'),
    voll = document.querySelector('#voll'),
      perekrytie = document.querySelector('#perekrytie'),
    etazh = document.querySelector('#etazh'),
    steny = document.querySelector('#steny'),
      krov = document.querySelector('#krov'),
      krov2 = document.querySelector('#krov2'),
      dop = document.querySelector('#dop'),
    vol = document.querySelector('#vol'),
    kg = 5.5,
    kub = 3500,
    km = 2;

 
$('.minpl,.custom-control-input,.custom-range,.form-control,.form-control').click(function() {
/*Находим input*/
	$input = $(this).parent().find('.mtr');
	var qty = Number($input.val());
	/*Передаем функции подсчета, обновления*/
	if (isNaN(qty)) qty = 0;
  /*
	if ($(this).hasClass('plus')) {
		if (qty == 0) {
			qty = $input.data('min');
		} else {
			qty += $input.data('step');
		}
	} else {
		qty -= $input.data('step');
	}
    var min = $input.data('min');
    if (qty >= min)  {
        $input.val(qty).trigger('input');
    } else {
 		$input.val(0).trigger('input');
	}*/
	updateCalc($input);
});
function updateCalc($input) {
  {
      if (load.checked){ 
          load.value = 10000; }
        else 
        {
          load.value = 0;
      }
      if (del.checked){ 
          del.value = -70000; }
        else 
        {
          del.value = 0;
      }
      if (frag.checked){ 
          frag.value = 300; }
        else 
        {
          frag.value = 0;
      }
     if (fragg.checked){ 
          fragg.value = 400; }
        else 
        {
          fragg.value = 0;
      }
    if (load1.checked){ 
          load1.value = 50000; }
        else 
        {
          load1.value = 0;
      }
      if (del1.checked){ 
          del1.value = 0; }
        else 
        {
          del1.value = 0;
      }
      if (frag1.checked){ 
          frag1.value = 300; }
        else 
        {
          frag1.value = 0;
      }
    if (p1.checked){ 
          p1.value = 10000; }
        else 
        {
          p1.value = 0;
      }
    if (p2.checked){ 
          p2.value = -70000; }
        else 
        {
          p2.value = 0;
      }
    if (okna.checked){ 
          okna.value = 50000; }
        else 
        {
          okna.value = 0;
      }
    if (okna2.checked){ 
          okna2.value = 0; }
        else 
        {
          okna2.value = 0;
      }
 
var sum = ((((Number(weight.value) * Number(length.value))+(((2 * Number(weight.value))+(2 * Number(length.value))) * Number(vol.value))) * Number(steny.value)) * 
Number(etazh.value)) +
Number(voll.value) +
Number(perekrytie.value) +
Number(load.value) + Number(del.value) + Number(frag.value) + Number(fragg.value) + 
Number(load1.value) + Number(del1.value) + Number(frag1.value) + Number(p1.value) + Number(p2.value) + 
Number(krov.value) +
Number(krov2.value) + Number(okna.value) + Number(okna2.value) +
Number(dop.value);
      out.innerHTML = sum;
  }
}
  });

This Pen is owned by Создание и продвижение сайтов https://up-sait.ru/ on CodePen.

See more by @xaku666 on CodePen

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

https://code.jquery.com/jquery-2.2.4.min.js