JSFiddle - React, Tailwind, and code Playground
HTML
<script type="text/javascript" src="http://www.cottedge.com/bitrix/cache/js/s1/expert/template_aa051448c177a5b872daa7636161713f/template_aa051448c177a5b872daa7636161713f_v1.js?1555163723411689"></script>
<div id="print_form">
<form method="post">
<div class="calc">
<div class="calc_form">
<div class="calc_row">
<label for="dom_s_all_pola" id="s_kottedga" class="pl_pola">Площадь дома, м2</label>
<input type="number" step="1" value="100" id="s_dom">
</div>
<div class="br30">
</div>
<div class="hr">
</div>
<div class="block_stroy block_stroy_fund">
<h2>Фундамент</h2>
<p class="cena fund">Стоимость: <span>0</span> руб.</p>
<div id="fund_1" class="block_img">
<img src="./calc_files/no_photo.jpg" alt="Без фундамента">
<p>Без фундамента</p>
</div>
<div id="fund_2" class="block_img">
<img src="./calc_files/fund_1.jpg" alt="Свайно-ростверковый">
<p>Свайно-ростверковый</p>
</div>
<div id="fund_3" class="block_img">
<img src="./calc_files/fund_2.jpg" alt="Блоки ФБС">
<p>Блоки ФБС</p>
</div>
<div id="fund_4" class="block_img">
<img src="./calc_files/fund_3.jpg" alt="Ленточный железобетонный">
<p>Ленточный железобетонный</p>
</div>
<div id="fund_5" class="block_img">
<img src="./calc_files/fund_4.jpg" alt="Плитный фундамент">
<p>Плитный</p>
</div>
</div>
<div class="hr">
</div>
<div class="block_stroy block_stroy_per_cok">
<h2>Перекрытие цоколя</h2>
<p class="cena per_cok">Стоимость: <span>0</span> руб.</p>
<div id="per_cok_1" class="block_img">
<img src="./calc_files/perekrytie_1.jpg" alt="Плиты перекрытия (ЖБИ)">
...
CSS
/*Ðåñåò*/
.calc textarea, .calc select {
background: #fff !important;
border:none !important;
box-shadow: #fff !important;
color:#333333 !important;
}
.calc {
color:#333333 !important;
font-family:verdana !important;
font-weight: normal !important;
text-align:left !important;
width: 100% !important;
margin: 20px auto 0 auto !important;
padding:0 !important;
font-size:13px !important;
}
.calc p{
line-height:100% !important;
}
.calc h3{
font-size: 15px !important;
font-weight: bold !important;
margin-top: 10px !important;
}
/*Ýëåìåíòû ôîðìû*/
.calc_form {
margin:0 !important;
padding:20px 20px !important;
border-radius:5px !important;
background-color: #f8f8f8;
}
.calc label {
display:inline-block !important;
width:180px !important;
font-size:13px !important;
font-weight: normal !important;
display:inline;
}
.calc input {
border:1px solid #A7A1A1;
height: 26px;
padding: 5px;
width: 60px;
margin-bottom:0;
position:relative;
vertical-align:top;
border-radius: 0;
box-shadow: none;
color:#000;
font-weight: bold;
}
.calc label.pl_pola {
width: 200px !important;
}
#content .calc input[type="number"] {
padding: 10px;
width: 100px;
font-size: 1.5em;
background: #fff;
border: 2px solid #fdb418;
border-radius: 4px;
}
.checkbox_style label {
width:500px !important;
margin-bottom: 0px !important;
}
.calc select {
height: 30px !important;
padding: 5px !important;
width: 145px !important;
}
.radio_tab {
margin: 20px 0 40px 0 !important;
}
.radio_tab label {
width:600px;
vertical-align:bottom !important;
}
.radio_tab p {
padding:1px !important;
}
.calc_row {
padding:5px 0 !important;
}
.calc_row img {
vertical-align: top !important;
}
/*Åäèíèöû èçìåðåíèÿ*/
.mera {
background-color:#EEEEEE;
border:1px solid...
JavaScript
$(document).ready(function(){
var s_doma = parseInt($("#s_dom").val()); //площадь дома
//Фундамент
var fund_bezf = 0;
var fund_stolb = 3200;
var fund_fbs = 4100;
var fund_lenta = 4800;
var fund_plita = 5350;
var fund_all_bezf = 0;
var fund_all_stolb = 0;
var fund_all_fbs = 0;
var fund_all_lenta = 0;
var fund_all_plita = 0;
var cena_fund = 0;
//Перекрытие цоколя
var per_cok_zhbi = 2100;
var per_cok_monolit = 4600;
var per_cok_derevo = 1600;
var per_cok_all_zhbi = 0;
var per_cok_all_monolit = 0;
var per_cok_all_derevo = 0;
var cena_per_cok = 0;
//Стены
var stena_kirpich_250 = 6200;
var stena_kirpich_370 = 7600;
var stena_kirpich_640 = 9100;
var stena_kirpich_520 = 8700;
var stena_teplaya_keramika = 8300;
var stena_gazobeton = 5600;
var stena_brus_150 = 6500;
var stena_brus_200 = 7200;
var stena_karkasnyy_dom = 5600;
var stena_dom_srub = 7900;
var stena_all_kirpich_250 = 0;
var stena_all_kirpich_370 = 0;
var stena_all_kirpich_640 = 0;
var stena_all_kirpich_520 = 0;
var stena_all_teplaya_keramika = 0;
var stena_all_gazobeton = 0;
var stena_all_brus_150 = 0;
var stena_all_brus_200 = 0;
var stena_all_karkasnyy_dom = 0;
var stena_all_dom_srub = 0;
var cena_stena = 0;
//Перекрытие межэтажное
var per_et_zhbi = 2100;
var per_et_monolit = 4600;
var per_et_derevo = 1600;
var per_et_all_zhbi = 0;
var per_et_all_monolit = 0;
var per_et_all_derevo = 0;
var cena_per_et = 0;
//Чердачное перекрытие
var per_ch_zhbi = 2100;
var per_ch_monolit = 4600;
var per_ch_derevo = 1600;
var per_ch_all_zhbi = 0;
var per_ch_all_monolit = 0;
var per_ch_all_derevo = 0;
var cena_per_ch = 0;
//Крыша
var krysha_metallocherepica = 6100;
var krysha_ondulin = 4200;
var krysha_proflist = 5100;
var krysha_ker_plitka = 7700;
var krysha_myagkaya_cher = 6500;
var krysha_all_metallocherepica = 0;
var krysha_all_ondulin = 0;
var krysha_all_proflist = 0;
var krysha_all_ker_plitka = 0;
var krysha_all_myagkaya_cher = 0;
var cena_krysha =...