JSFiddle - React, Tailwind, and code Playground

by Sean Cannon

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/ramda/0.23.0/ramda.min.js"></script>
<h1>Configure Price</h1>

<label for="screen-size">Screen size</label>
<select id="screenSize" class="calculate">
  <option value="14" selected>14 inch</option>
  <option value="15">15 inch</option>
  <option value="16">16 inch</option>
</select>

<label for="hdd">Hdd</label>
<select id="hdd" class="calculate">
  <option value="16" selected>16 Gb</option>
  <option value="32">32 Gb</option>
  <option value="64">64 Gb</option>
</select>

<label for="network">Network</label>
<select id="network" class="calculate">
  <option value="wifi" selected>Wifi Only </option>
  <option value="lte">Wifi + LTE Cellular support</option>
</select>

<span id="price"></span>

CSS

* {
  font-family : Helvetica, Arial, sans-serif;
}

#price {
  display : block;
  font-size : 18px;
  color     : green;
  margin-top : 20px;
}

JavaScript

const $calculators = document.querySelectorAll('.calculate');
const $priceSpan   = document.getElementById('price');

const priceOptions = {
  screenSize : {
    '14' : 89.99,
    '15' : 99.99,
    '16' : 129.99
  },
  hdd : {
    '16' : 129.99,
    '32' : 249.99,
    '64' : 549.99
  },
  network : {
    wifi : 0,
    lte  : 64.99
  }
};

const calculate = () => {
  let price = 0;
  $calculators.forEach(item => {
    price += priceOptions[item.id][item.value];
  });
  return price.toFixed(2);
};

const updatePrice = () => {
  $priceSpan.innerHTML = 'Total: $' + calculate();
}

$calculators.forEach(select => select.addEventListener('change', updatePrice));

updatePrice();