JSFiddle - React, Tailwind, and code Playground

by joshmoto

HTML

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/css/bootstrap.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.6/umd/popper.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/js/bootstrap.min.js"></script>
<div class="container-fluid mt-5">
  <form id="custom_price_calculator">
    <div class="form-row">
      <div class="col-md-3 col-4 mb-3">
        <label for="inputCalculatorQty" class="font-weight-bolder">Quantity</label>
        <input type="number" class="form-control" id="inputCalculatorQty" value="1" min="1" required>
      </div>
      <div class="col-md-3 col-4 mb-3">
        <label for="inputCalculatorUnitPrice" class="font-weight-bolder">Unit Price</label>
        <input type="number" class="form-control" id="inputCalculatorUnitPrice" min="0.01" value="1.19" required disabled>
      </div>
      <div class="col-md-3 col-4 mb-3">
        <label for="inputCalculatorQty" class="font-weight-bolder">Origination</label>
        <input type="number" class="form-control" id="inputCalculatorQty" value="100" min="1" required>
      </div>
      <div class="col-md-3 mt-md-4 mb-3">
        <button class="btn btn-primary btn-sweets btn-block" type="submit"><i class="fas fa-calculator"></i> Calculate price</button>
      </div>
    </div>
  </form>
</div>

JavaScript

// the form
var $oForm = $('#custom_price_calculator');

// the price break array
var oPriceBreak = {
  100: 1.19,
  250: 1.17,
  500: 1.15,
  1000: 1.13,
  5000: 1.11,
  10000: 1.01,
};

//console.log(oPriceBreak[100]);

// the last qty key var
var iMaxQty;
var iMaxUnit;

// loop through my price break array
$.each(oPriceBreak, function(qty, unit) {
	
  // get the last qty and set key
  iMaxQty = ~~qty;
  iMaxUnit = parseFloat(unit);

});

// watch the quantity input for value changes
$('#inputCalculatorQty', $oForm).on('keyup', function() {

	// previous vars
	var iPrevQty;
	var iPrevUnit;

  // get our current value
  var iCurrentQty = $(this).val();
  
  // loop through my price break array
  $.each(oPriceBreak, function(qty, unit) {
    
    // if previous key is set
  	if(iPrevQty) { 
    		
      // check the current val is less than or equal too the current qty minus 1
      if (~~iCurrentQty <= (~~qty-1)) {
      
        // if above returns true then set key as unit price value
        $('#inputCalculatorUnitPrice', $oForm).val(iPrevUnit);
      
        // break the cycle morty, focus on science
        return false;
      
      }
      
      else if (~~iCurrentQty >= iMaxQty ) {
      	
        // if above returns true then set key as unit price value
        $('#inputCalculatorUnitPrice', $oForm).val(iMaxUnit);

        // break the cycle morty, focus on science
        return false;

      }
    
    }
    
    // check if the current value is equal to or less than the key
    else if (~~iCurrentQty <= ~~qty) {
			
      //console.log(unit);
      
      // if above returns true then set key as unit price value
      $('#inputCalculatorUnitPrice', $oForm).val(parseFloat(unit));
      
      // break the cycle morty, focus on science
     	return false;
    
    
    }
    
    iPrevQty = ~~qty;
    iPrevUnit = parseFloat(unit);
    
    //console.log(iPrevQty);

  });

});