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 al-for="group in groups" label="{{group.name}}">
      <option al-for="opt in group.opts" :value="opt">{{opt.name}}</option>
    </optgroup>
  </select>
  <br/>
  <div :hidden="!type_design?.mirror">
    <input type="checkbox" al-model="mirror" id="mirror" />
    <label for="mirror">+Зеркало</label>
  </div>
  <br/>
  <p>Погонный метр: <p><input type="number" al-model="count" />
  <div>= <span>{{total()}}</span> руб.

  </div>
  <div class="menu-search-box scnd-fix">
    <a @click="order()" href class="spec-button">Заказать</a>
  </div>

</div>

JavaScript

var app = {
	count: 1,
  type_design: null,
	total: () => {
  	if(!app.type_design) return 0;
  	let amount = app.type_design.price;
    if(app.type_design.mirror && app.mirror) amount+= 800;
    return amount * app.count;
  },
  groups: [
  	{name: 'Кухня', opts:[{name:'ЛДСП', price:9500}, {name:'МДВ', price:12300}, {name:'Пластик', price:15000}, {name:'Крашенный', price:15000}]},
  	{name: 'Шкаф купе', opts:[{name:'ЛДСП', price:5500, mirror:true}, {name:'Пескоструй', price:13000}, {name:'Печать', price:22000}]}
  ],
  order: () => {
  	alert('Order ' + app.total())
  }
};

alight('body', app);