JSFiddle - React, Tailwind, and code Playground
HTML
<section class="s1 section">
<div class="container">
<div class="section-heading">
<h1 class="heading main-heading">Рассчитайте стоимость вёрстки</h1>
</div>
<div class="section-content">
<form id="form1" class="form content-form calc-form">
<div class="row form-box">
<div class="col-lg-6 form-column column1">
<div class="form-fields">
<div class="form-fields__heading">
<h2>Общие параметры:</h2>
</div>
<div class="form-fields__items">
<div class="field-item field-num">
<div class="field-item__sign field-num__text"><span>Количество блоков:</span></div>
<div class="field-item__input field-num__input">
<input type="number" value="1" min="1" max="100" name="countblocks" id="countblocks" class="calcField" />
</div>
</div>
<div class="field-item field-num">
<div class="field-item__sign field-num__text"><span>Количество разрешений экрана:</span></div>
<div class="field-item__input field-num__input">
<input type="number" value="1" min="1" max="10" name="countresol" id="countresol" class="calcField" />
</div>
</div>
</div>
</div>
</div>
<div class="col-lg-6 form-column column3">
<div class="form-fields">
<div class="form-fields__heading">
<h2>Дополнительная информация:</h2>
</div>
</div>
<div class="form-fields form-cost">
<div class="form-fields__heading">
<h2>Стоимость вёрстки:<span id="result">3000 руб.</span></h2>
</div>
</div>
</div>
</div>
</form>
</div>
</div>
</section>
JavaScript
function calc() {
console.log('calc');
let cblocks = document.getElementById('countblocks').value || 1,
countresol = document.getElementById('countresol').value || 1,
sum = 2650 + (cblocks * 350) + (countresol * 5),
result = document.getElementById('result');
result.innerHTML = sum + ' руб.';
};
document.querySelectorAll('.calcField').forEach(field => {
field.addEventListener('input', calc);
});
calc();