JSFiddle - React, Tailwind, and code Playground

by lega911

HTML

<script src="https://angularlight.org/bin/alight_1.0.alpha.last.js"></script>
<div>
  <h3>Калькулятор</h3>
  <p>Выбирите материал:</p>
  <select al-model="type_design">
    <optgroup label="Кухня">
      <option value="9500">ЛДСП</option>
      <option value="12300">МДВ</option>
      <option value="15000">Пластик</option>
      <option value="15000">Крашенный</option>
      <option value="22000">Массив</option>
    </optgroup>
    <optgroup label="Шкаф купе">
      <option value="5500">ЛДСП</option>
      <option value="13000">Пескоструй</option>
      <option value="22000">Печать</option>
    </optgroup>
    <optgroup label="Прихожая">
      <option value="7500">ЛДСП</option>
    </optgroup>
    <optgroup label="Детская">
      <option value="7500">ЛДСП</option>
    </optgroup>
    <optgroup label="Гостиная">
      <option value="7500">ЛДСП</option>
    </optgroup>
  </select>
  <br/>
  <div :hidden="type_design != 5500">
    <input type="checkbox" true-value="800" false-value="0" al-model="mirror" />
    <label for="is_html">+Зеркало</label>
  </div>
  <br/>
  <p>Погонный метр: <p><input type="number" al-model="count" />
  <div id="calc-sum">= <span>{{total()}}</span> руб.

  </div>
  <div class="menu-search-box scnd-fix">
    <a href="bedroom.html" class="spec-button">Заказать</a>
  </div>

</div>

JavaScript

var app = {
	count: 1,
  type_design: 9500,
  mirror: 0,
	total: () => (Number(app.type_design) + Number(app.mirror)) * app.count
};

alight('body', app);