JSFiddle - React, Tailwind, and code Playground

by lmoroz

HTML

<div>
  <input type="text" name="calc_area" id="calc_area" placeholder="Площадь, м">
</div>
<div>
  <input type="text" name="calc_thick" id="calc_thick" placeholder="Толщина стяжки, мм">
</div>
<div id="pricecalc__result"></div>
<div id="pricecalc__error"></div>
<img src="https://habrastorage.org/web/c49/06a/9b0/c4906a9b01244ff0ba271db252a5c020.png" />

JavaScript

var data = [
	{
  	area:'70-119', 
    prices:{40:400,50:500,60:600,70:700,80:800,90:900}
  },
  {
  	area:'120-199',
    prices:{40:547,50:575,60:603}
  },
  {
  	area:'1000-1999',
    prices:{40:345,50:367,60:389}
  }
 ];
 
var Calc_task = function (data, calc_area, calc_thick, calc_result, calc_error) {
	this.data = [];
  [].forEach.call(data, function (el) { 
    var maxmin = el.area.split('-'); 
    el['min'] = parseInt(maxmin[0], 10); 
    el['max'] = parseInt(maxmin[1], 10);
    this.data.push(el);
  }, this);

	this.data_count = this.data.length;
	this.max_area = this.data[this.data_count-1].max;
	this.min_area = this.data[0].min;
  this.calc_area = document.querySelector(calc_area);
  this.calc_thick = document.querySelector(calc_thick);
  this.calc_result = document.querySelector(calc_result);
  this.calc_error = document.querySelector(calc_error);
  this.thiks = Object.keys(this.data[0].prices);
	this.thiks_count = this.thiks.length;
	this.max_thik = this.thiks[this.thiks_count-1];
  this.BreakException = {};
  
  this.calc = function (e) {
    this.calc_result.innerHTML = this.calc_error.innerHTML = '';
    var calc_area  = parseInt(this.calc_area.value, 10);
    var calc_thick = parseInt(this.calc_thick.value, 10);
    if (calc_area && calc_area<this.min_area) calc_area = this.min_area;
    if (calc_thick && calc_thick>=10) {
    	try {
        [].forEach.call(this.thiks, function (thik) {
          if (calc_thick <= thik) { 
            calc_thick = thik;
            throw this.BreakException;
          };
        })
      }
      catch (e) { }
    }
    
    if (calc_thick && calc_thick > this.max_thik) calc_thick = this.max_thik;
      
    if (calc_area && calc_area > this.max_area)
    	this.calc_error.innerHTML = 'Специальные условия для оптовых заказчиков. Звоните!';
    else if (calc_thick && calc_thick < 10) 
    	this.calc_error.innerHTML = 'Толщина стяжки не может быть менее 10 мм.';
		else if (!calc_area)
    	this.calc_error.innerHTML =...