JQuery discount detection

JQuery discount detection

by Andrew Pougher

HTML

<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css">
			<div class="container">
                <div class="row">
            <div class="form-group form-group-sm well text-center">
        
              <i class="fa fa-minus-square-o fa-2x pull-left"></i>
      <div class="col-xs-2">  
                <input class='input-sm quantityInput input-number form-control text-center' type='text' value='0' name="quantityInput">
                </div> 
                <i class="fa fa-plus-square-o fa-2x"></i>
     </div>
    <hr>
<p class='js-quantityInput-message well well-sm'>
<em>Receive volume discounts for more than 10&nbsp;orders.</em>

</p>
<p class='hide js-quantityInput-message-alternate'>
<em><a href="mailto:[email protected]?subject=Dermamor%20Group%20Account">Contact us for volume discounts</a></em>

</p>
    <div id="pc" class="badge"></div>
                </div>
                     </div>

CSS

@-webkit-keyframes plip {
    0% {
     color: Yellow;
        opacity:1;
    }
    22% {
   color: Yellow;
    }
    77% {
     color: Red;
    }
    100% {
    color: #777;
    }
}
    
.plip {
    -webkit-animation-name: plip;
    -webkit-animation-duration: 900ms;
    -webkit-animation-iteration-count: 1;
    -webkit-animation-timing-function: ease-in-out;
}

JavaScript

function priceChange(){
    var num = parseInt($(".quantityInput").val());
if (num >= 10 && num <=19) { 
    $(".js-quantityInput-message").addClass("hide");
    $(".js-quantityInput-message-alternate").removeClass("hide");
    $("#pc").html("10%");
} else if (num >= 20) {
    $(".js-quantityInput-message").addClass("hide");
    $(".js-quantityInput-message-alternate").removeClass("hide");
    $("#pc").html("20%");
} else {
    $(".js-quantityInput-message-alternate").addClass("hide");
    $(".js-quantityInput-message").removeClass("hide");
    $("#pc").html("");
}}


$('input.quantityInput').on('keyup', function() { priceChange();});

$('i.fa').on("click", function() {

  var $button = $(this);
  var oldValue = $button.parent().find("input.quantityInput").val();

  if ($button.hasClass( "fa-plus-square-o" )) {
	  var newVal = parseFloat(oldValue) + 1;
	} else {
   // Don't allow decrementing below zero
    if (oldValue > 0) {
      var newVal = parseFloat(oldValue) - 1;
    } else {
      newVal = 0;
    }
  }

  $button.parent().find("input.quantityInput").val(newVal);
  $button.removeClass("plip");
    setTimeout(function() {
  $button.addClass("plip");
    }, 1);
    
priceChange();
});

// && !isNaN(num)