JSFiddle - React, Tailwind, and code Playground

by Donna Torr

HTML

<script src="https://code.jquery.com/jquery-1.12.4.min.js"></script>
<!-- Do not remove anything below this line - title can be edited - HTML code to be pasted below comment lower down-->

	<!-- href="javascript:w=window.open(window.location.href);w.print();" -->
<div style="margin-top: 0px;">
    
    <a class="print-icon" onclick="if (!window.__cfRLUnblockHandlers) return false; window.print();" title="Print Calculator">
    <img src="/images/print_calc_icon.png" onmouseover="/images/print_calc_icon_hover.png" onmouseout="/images/print_calc_icon.png"></a>
</div>

<div id="chinook-calculator">
	  <div class="calculator-header-top-red">DISCOUNT CALCULATOR
    </div>
    <div class="calculator-header-bottom-grey">
        <div class="calculator-form"><span class="discount-label">Enter Your Discount</span> <input id="discount_txt" type="text"> <span class="discount-label">%</span> <a id="discount_btn" class="more_link_red" href="#">Calculate</a> <span class="red_label" style="display: none;">Net Prices in Red</span>
         </div>
    </div>  
  </div>
<div class="item-page">

	<h1 class="title">
		Calcium Silicate 45 Degree Elbow - List Prices
	</h1>
<!-- Do not remove anything above this line - title can be edited-->

<!--Insert table code below -->
      <table id="DiscountCalculatorTable" class="dcf-table dcf-table-responsive dcf-table-bordered dcf-table-striped dcf-w-100%">
    <thead>
      <tr>
        <th class="mesurementColTitle" scope="col">Nominal Pipe Size (mm/in)</th>
        <th class="mesurementColTitle" scope="col">1"</th>
        <th class="mesurementColTitle" scope="col">1 1/2"</th>
        <th class="mesurementColTitle" scope="col">2"</th>
        <th class="mesurementColTitle" scope="col">2 1/2"</th>
        <th class="mesurementColTitle" scope="col">3"</th>
        <th class="mesurementColTitle" scope="col">3 1/2"</th>
        <th class="mesurementColTitle" scope="col">4"</th>
        <th class="mesurementColTitle" scope="col">#</th>
       ...

CSS

h2{float:none; clear:both;}
		#sb-body-inner{ width:100%!important; height:300px!important; -webkit-overflow-scrolling:touch!important; overflow-y:scroll!important }
        #sb-body-inner iframe { width:100%; height:100% }
        .sb-wrapper-inner{height:300px!important}
        
#sb-body-inner {
  position: fixed; 
  right: 0; 
  bottom: 0; 
  left: 0;
  top: 0;
  -webkit-overflow-scrolling: touch;
  overflow-y: scroll;
}

#sb-body-inner iframe {
  height: 100%;
  width: 100%;
}
body {color: #4D4D4D;background: #FFF;font-family: Arial, Helvetica, Verdana, Sans-serif;overflow:auto; text-align:center;}
.trPriceFields {height:40px !important;}
.trNewPriceFieldss{height:17px;}
table.center{margin-left:auto; margin-right:auto; text-align:right}

#DiscountCalculatorTable>td{margin:0px; padding:0px;}
#DiscountCalculatorTable p{text-align:left; margin:0px; padding:0px;}
#DiscountCalculatorTable .pricefield, #DiscountCalculatorTable .bandnumber,  #DiscountCalculatorTable .noprice {text-align:center;font-size:16px;padding-top:0px;padding-bottom:0px;min-width: 40px !important;}

#DiscountCalculatorTable .centered{text-align:center;}

td.noprice {text-align:center;font-size:14px;padding-top:0px;padding-bottom:0px}

#DiscountCalculatorTable .newpricefield {color:#ED4D33;text-align:center;font-size:16px;padding-top:0px;padding-bottom:0px}
#DiscountCalculatorTable .headerTopBorder{border-top:#4D4D4D solid 2px;}
#DiscountCalculatorTable .thinHeaderBottomBorder{border-bottom:#d6d6d6 solid 2px;}
#DiscountCalculatorTable .thinHeaderRightBorder{border-right:#d6d6d6 solid 2px;}
#DiscountCalculatorTable .bigColLeftBorder{border-left:#4D4D4D solid 2px;}
#DiscountCalculatorTable .headerBottomBorder{border-bottom:#4D4D4D solid 2px;}
#DiscountCalculatorTable .thinBottomBorder{border-bottom:#d6d6d6 solid 1px;padding-bottom:0;padding-top:0;}
#DiscountCalculatorTable .thinTopBorder{border-top:#d6d6d6 solid 1px;}
#DiscountCalculatorTable...

JavaScript

$(document).ready(function(){

		//show the tr w/discount prices

		$('.trNewPriceFields').hide();

		$('.red_label').hide();

			//Calculate and show the discounts

			$("#discount_btn").click(function calculate() {

					//alert('DO THE MATH');
if($(window).width()<691){
$(".dfeelsafe").remove();
$("table#DiscountCalculatorTable>thead>tr th").each(function(i)
{
$(this).after('<th class="mesurementColTitle mfeelsafe" scope="col"></th>');
});
}else{
$(".mfeelsafe").remove();
}
					var _price = 0;
					var _newPrice = 0;
					var newpricefieldItems;
					_discount = $('#discount_txt').val();
					
					$('.pipe_cover').attr('rowspan', 50);
					$('.pipe_cover1').attr('rowspan', 20);
					$('.pipe_cover2').attr('rowspan', 20);
					
					$('.pricefield').each(function(i){
						_newPrice = 0;
						_price = $(this).text();

						//apply the discount
						_newPrice = parseFloat(_price) - parseFloat(_price) * _discount/100;
						
						//set the new price in the cell behind w/class newpricefield
					
           newpricefieldItems = $(".newpricefield");
            if($(document).width()<691){
            if(isNaN(_newPrice.toFixed(2))){
            $(this).after(newpricefieldItems.eq(i).clone().addClass("mfeelsafe").text(""));
            }
            else{
            $(this).after(newpricefieldItems.eq(i).clone().addClass("mfeelsafe").text(_newPrice.toFixed(2)));
            }
            }
            else
            {
            if(isNaN(_newPrice.toFixed(2))){
             newpricefieldItems.eq(i).html("<div class='dfeelsafe'></div>");
            }
            else
            {
            newpricefieldItems.eq(i).html("<div class='dfeelsafe'>"+_newPrice.toFixed(2)+"</div>");
            }
            }
					});

					//show the tr w/discount prices and the red label "Net Prices in Red" from the Calculator-Header module
          if($(window).width()<691)
          {
          }
          else
          {
          $('.trNewPriceFields').show();
      ...