JSFiddle - React, Tailwind, and code Playground

by mendesjuan

HTML

<form id="form">
<table style="width:230px;padding:5px;border:1px solid #f0f0f0;font-size:14px;">
<tr style="background-color:#f0f0f0;">
  <th style="width:200px;text-align:left;">Elements</th>
  <th align="center"></th>		
</tr>
<tr style="border-bottom:1px solid #a3a3a3;">
  <td>CPU unit</td>
  <td align="center">&#10003;</td>		
  </tr>
<tr>
<tr>
  <td>Motherboard</td>
  <td align="center">&#10003;</td>		
  </tr>
  <td>Graphic card</td>
  <td align="center"><input type="checkbox" class="addon" value="120"></td>		
</tr>
<tr>
  <td>Memory chip</td>
  <td align="center"><input type="checkbox" class="addon" value="40"></td>		
</tr>
<tr>
  <td>Monitor</td>
  <td align="center"><input type="checkbox" class="addon" value="90"></td>		
</tr>
</table>

<table style="width:220px;padding:1px;border:1px solid #f0f0f0;font-size:22px; font-weight:bold;">
<tr style="border-bottom:1px solid #a3a3a3;text-align:center;background-color:#80CCDC">
     
<td id="total"></td></tr><tr>
</table>
</form>

JavaScript

function updateTotal(){
    var basic = 300;
    var add = 0;
    var form = document.getElementById('form');
    var checkboxes = form.getElementsByClassName('addon');   
    for (var i=0; i < checkboxes.length; i ++) {
       if (checkboxes[i].checked) {
           add += parseInt(checkboxes[i].value, 10);
       }
    }
    var p = basic + add;
    var price = p + " &euro;"; 
    document.getElementById('total').innerHTML = price;  
}

document.getElementById('form').addEventListener('change', updateTotal);
// Run it once at startup
updateTotal();