JSFiddle - React, Tailwind, and code Playground

by justamir

HTML

<script src="https://code.jquery.com/jquery-3.2.1.min.js"></script>
<h2>
  Dakkapel configurator
</h2>
<form id="calculator-form" class="bussines-type" novalidate="">
  <div>
    <input id="200-of-minder" type="radio" name="priceRadio" value="2670">
    <label for="200-of-minder">200cm of minder</label>
  </div>
  <div>
    <input id="200-of-meer" type="radio" name="priceRadio" value="200+">
    <label for="200-of-meer">200cm of +</label>
  </div>
  <div id="formDakkapelSpecifiek" class="hidden">
    <label>
      <span>Vul de gewenste breedte in</span>
      <input placeholder="bijv. 300 cm" type="text" tabindex="4" minlength="201" value="">
      <span id="errmsg"></span>
    </label>
  </div>
  <span><strong>Extra opties</strong></span>
  <div class="extra-options">
    <input id="rolluik-elektrisch" type="checkbox" name="rolluikelektrisch" data-percentage="17" value="">
    <label for="rolluik-elektrisch">Rolluik Elektrisch</label>
  </div>
  <div class="extra-options">
    <input id="buitenzijde-kleur" type="checkbox" name="buitenzijdekleur" data-percentage="5" value="">
    <label for="buitenzijde-kleur">Buitenzijde in kleur behalve kozijn</label>
  </div>
  <div class="extra-options">
    <input id="buitenzijde-keralit" type="checkbox" name="buitenzijdekeralit" data-percentage="10" value="">
    <label for="buitenzijde-keralit">Buitenzijde met Keralit (kunststof rabatdelen)</label>
  </div>
  
  <div class="200-of-minder">
    <div class="item">
      200cm of minder: <span class="item__price" data-action="add"></span>
    </div>
  </div>
  <div class="200-of-meer">
    <div class="item">
      200cm of meer: <span class="item__price" data-action="add"></span>
    </div>
  </div>
  
  <div class="rollluik-elektrisch item">
    <div class="item">
      Rolluik elektrisch: <span class="item__price" data-action="add"></span>
    </div>
  </div>
  <div class="buitenzijde-kleur item">
    <div class="item">
      Buitenzijde in kleur: <span class="item__price"...

CSS

.hidden {
  display: none;
}

#customTotal {
  display: none;
}

JavaScript

var minimumWidthSize = 200;
var minimumPrice = 2670;
var $total200OrLess = $('.200-of-minder').find('.item__price');
var $total200OrMore = $('.200-of-meer').find('.item__price');
var $submitButton = $('#culculator-submit');

/**
 * Calculates the total price
 */
function calculateTotalPrice() {

  var result = 0;
  
  // loop through each item price div
  $('.item .item__price').each(function() {
  
  	// remove the whitespace from the beginning and end of a string
    var $input = $(this);
    var value = $.trim($(this).text());

		// cache the action attribute for adding the numbers
    var action = $input.data('action') == 'add' ? 1 : -1;
    
		// if end result is isNaN, return
    if (isNaN(value)) {
    
      return;
      
    }

		// calculate the result
    result += value * action;
    console.log(result);
  });

	// show to the total price
  $('#total').text(result.toFixed(2));

}

/**
 * Calculates the minimum price
 */
function Fill200OrLessTotal() {

  $total200OrLess.text(minimumPrice);
  
}

/**
 * Handle when the checkboxes for the extra options should be active or not
 */
function handleVisibilityExraOptions() {

	// state submit button
  var isDisabled = $('#culculator-submit').prop('disabled');
  
  // if the submit button is disabled
  if (isDisabled) {
  
  	// the checbboxes should also be disabled
    $('.extra-options input').attr('disabled', true);
    
  } else {
  
  	//.. the submit is enabled
  
  	// the checbboxes should be enabled
    $('.extra-options input').attr('disabled', false);
    
  }
  
}

/**
 * Handling the correct toggle behaviour when the radio buttons are clicked
 * @param {object} event - event object
 */
function toggleOnRadio(event) {
  
  var $this = $(this);
  
  // identifies the element on which the event occurred
  var radioButton = $(event.currentTarget);
  
  // identifies if the second radio button is choosen
  var isSpecifiekAfmeting = radioButton.val() === '200+' && radioButton.prop('checked');
  
  //...