Вот мой макет калькулятора. Урезал до двух комнат, но в оригинале их очень много, состоящих из самых разных геометрических фигур.
<meta charset="utf-8">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
<style>
.plos {padding: 10px;background: #eee;border: solid 1px #bbb;border-radius: 6px;}
.st1 {display: inline-block;margin-top: 8px;width: 115px;text-align: right;}
.st2 {display: inline-block;}
input {width: 110px;}
input[type="radio"] {width: 25px;}
.col-sm-4 {display: inline-table;width: 270px;}
</style>
<br>
<label><input type="radio" name="unit" value="2" checked="" /> метры</label>
<label><input type="radio" name="unit" value="0" /> миллиметры</label>
<br>
<h3>Площадь стен первой комнаты</h3>
<p>Четыре стены прямоугольные - противоположные стены равны</p>
<img src="">
<div class="row plos">
<div class="col-sm-4">
<h4>Стена 1</h4>
<div class="st1">Длина стены: </div>
<div class="st2"><input id="val_1" /><span class="unit"> м</span></div>
<div class="st1">Высота стены: </div>
<div class="st2"><input id="val_2" /><span class="unit"> м</span></div>
</div>
<div class="col-sm-4">
<h4>Стена 2</h4>
<div class="st1">Длина стены: </div>
<div class="st2"><input id="val_3" /><span class="unit"> м</span></div>
<div class="st1">Высота стены: </div>
<div class="st2"><input id="val_4" /><span class="unit"> м</span></div>
</div>
<div class="col-sm-4">
Площадь стены 1: <span id="pl_st1"></span> м.кв.<br>
Площадь стены 2: <span id="pl_st2"></span> м.кв.<br>
ПЛОЩАДЬ СТЕН КОМНАТЫ = <span id="pl_kom1"></span> м.кв.<br>
</div>
</div>
<br><br><hr>
<h3>Площадь второй комнаты</h3>
<p>Две стены треугольные, две трапецеобразные. Противоположные стены равны</p>
<img src="http://i.piccy.info/i9/ca5245132c18ab571261f288332729a8/1502519418/5491/1170341/maket_tre_tra.jpg">
<div class="row plos">
<div class="col-sm-4">
<h4>Треугольная стена</h4>
<div class="st1">Длина основания: </div>
<div class="st2"><input id="val_5" /><span class="unit"> м</span></div>
<div class="st1">Высота стены: </div>
<div class="st2"><input id="val_6" /><span class="unit"> м</span></div>
</div>
<div class="col-sm-4">
<h4>Стена трапеция</h4>
<div class="st1">Длина основания: </div>
<div class="st2"><input id="val_7" /><span class="unit"> м</span></div>
<div class="st1">Длина потолка: </div>
<div class="st2"><input id="val_8" /><span class="unit"> м</span></div>
<div class="st1">Высота стены: </div>
<div class="st2"><input id="val_9" /><span class="unit"> м</span></div>
</div>
<div class="col-sm-4">
Площадь треугольной стены: <span id="treugoln"></span> м.кв.<br>
Площадь трапецеобразной стены:<span id="trapets"></span> м.кв.<br>
ПЛОЩАДЬ СТЕН КОМНАТЫ = <span id="pl_kom2"></span> м.кв.<br>
</div>
</div>
<br><br>
<script>
//Площадь прямоугольника
function s_pr(a, b) {
a = parseFloat(a);
b = parseFloat(b);
var s = a * b;
return s;
}
//Площадь треугольника через высоту
function s_tr(a, h) {
a = parseFloat(a);
h = parseFloat(h);
var s = a * 0.5 * h;
return s;
}
//Площадь трапеции
function s_trap(a, b, h) {
a = parseFloat(a);
b = parseFloat(b);
h = parseFloat(h);
var s = (+a + +b) * 0.5 * h;
return s;
}
// и так далее по всевозможной геометрии...
//Обработчик
$('document').ready(function(){
$('input').on('keyup', function(){
//Площадь стен первой комнаты
var a = $('#val_1').val().replace(/,/,'.').replace(/[^\d\.]/g,'');
var b = $('#val_2').val().replace(/,/,'.').replace(/[^\d\.]/g,'');
var pl_st1;
pl_st1 = s_pr(a, b); //обращение к функции s_pr(a, b) площадь прямоугольника
$('#pl_st1').html(pl_st1.toFixed(2)); //площадь стены 1
var a = $('#val_3').val().replace(/,/,'.').replace(/[^\d\.]/g,'');
var b = $('#val_4').val().replace(/,/,'.').replace(/[^\d\.]/g,'');
var pl_st2;
pl_st2 = s_pr(a, b);
$('#pl_st2').html(pl_st2.toFixed(2)); //площадь стены 2
var kom1;
kom1 = (+pl_st1 + +pl_st2) * 2;
$('#pl_kom1').html(kom1.toFixed(2)); //площадь стен первой комнаты
//Площадь второй комнаты
var a = $('#val_5').val().replace(/,/,'.').replace(/[^\d\.]/g,'');
var h = $('#val_6').val().replace(/,/,'.').replace(/[^\d\.]/g,'');
var tr_st_k2 = s_tr(a, h);
$('#treugoln').html(tr_st_k2.toFixed(2)); //площадь треугольной стены
var a = $('#val_7').val().replace(/,/,'.').replace(/[^\d\.]/g,'');
var b = $('#val_8').val().replace(/,/,'.').replace(/[^\d\.]/g,'');
var h = $('#val_9').val().replace(/,/,'.').replace(/[^\d\.]/g,'');
var trap_st_k2 = s_trap(a, b, h);
$('#trapets').html(trap_st_k2.toFixed(2)); //площадь трапецевидной стены
var kom2 = +tr_st_k2 + +trap_st_k2;
$('#pl_kom2').html(kom2.toFixed(2)); //площадь стен второй комнаты
});
});
</script>
В скрипте сначала идут функции - расчёты площадей фигур. Фигур много, с разными вариантами расчёта (через высоту, полупериметр и т.п.). Все они в результате отдают площадь конкретной фигуры.
Что касается комнат, то они не ограничиваются только четырьмя стенами (есть 2, 3, 5, 6, 8 стен и т.д.)
Обработчик - парсит данные, делает расчёт и возвращает результат. Я одну комнату прописал, остальные по аналогии - парсят по id и возвращают результаты тоже в id.
Как связать это с кнопками и сделать так же круто как у
laimas я не знаю. Но хорошо что есть его вариант - есть к чему стремиться.