Классно сделано...
Но по-моему, это обычный калькулятор, просто хорошо стилизованный. Ничего особенного в нем нет.
По событию на элементах формы запускается функция, которая делает расчеты и выводит результат. Грубо говоря, просто подставляет выбранные пользователем множители в свои формулы.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Пример</title>
<style>
#result{
width: 100px;
height: 20px;
border:1px solid #999;
}
</style>
</head>
<body>
Толщина доски(см):
<input id='thickness' type="text" value='5' oninput = 'myFunc()'><br>
Ширина доски(см):
<input id='length' type="text" value='20' oninput = 'myFunc()'><br>
Длина доски(см):
<input id='height' type="text" value='300' oninput = 'myFunc()'><br>
Количество досок(шт):
<input id='quantity' type="text" value='2' oninput = 'myFunc()'><br>
Итоговый результат в кубометрах:
<div id="result" >0.06</div>
<script>
function myFunc(){
var thickness = document.getElementById('thickness').value;
var length = document.getElementById('length').value;
var height = document.getElementById('height').value;
var quantity = document.getElementById('quantity').value;
var div = document.getElementById('result');
var res = ((thickness/100)*(length/100)*(height/100)*quantity).toFixed(2);
div.innerHTML = res;
}
</script>
</body>
</html>