JSFiddle - React, Tailwind, and code Playground

by Donna Torr

HTML

<script src="https://code.jquery.com/jquery-1.12.4.min.js"></script>
<style>
.elementor-element {
    display: none;
}
.calc-head {
	margin-top:50px;
}
#calc-close a{
	color:#EA4F31;
	margin-bottom:30px;
	text-decoration:none;
	font-size:20px;
	text-align:center;
	clear:none;
	float:right;
}
	#chinook-calculator {
	margin-top:50px;}
</style>
<div class="calc-head">
	<div id="calc-close">
		<a href="#" onclick="window.top.close()">X</a>
		</div>
		<div id="calc-print">
		<a class="print-calc" onclick="window.print();" title="Print Calculator">
		<img src="/wp-content/uploads/2023/12/print_calc_icon.png" alt="print page"></a>
		</div>

</div>

<div id="chinook-calculator">
	<div class="custom">
		<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="#" name="discount_btn">Calculate</a>
				<span class="red_label" style="display: none;">Net Prices in Red</span>
			</div>
		</div>
	</div>
</div>
<table id="DiscountCalculatorTable" class="center" width="" border="0" cellspacing="0" cellpadding="5">
<tbody>
<tr>
<td class="firstColTitle headerTopBorder heightColTitle" colspan="11">Insulation Thickness</td>
</tr>
<tr>
<td class="mesurementColTitle thickSideBorder headerBottomBorder" colspan="2">NOMINAL<br>Pipe Size (mm/in)</td>
<td class="mesurementColTitle headerBottomBorder"><span class="grey">25mm</span> <br>1"</td>
<td class="mesurementColTitle headerBottomBorder gray-col-background"><span class="grey">38mm</span><br> 1 1/2"</td>
<td class="mesurementColTitle headerBottomBorder"><span class="grey">51mm</span><br> 2"</td>
<td class="mesurementColTitle headerBottomBorder gray-col-background"><span class="grey">64mm</span><br> 2 1/2"</td>
<td class="mesurementColTitle...

CSS

table{
    width:100%;
}
table tr {display:inline}
table tr:nth-child(1){
    position:relative;
}
table tr:nth-child(1) td{
    position:absolute;
    top:100%;
    left:0;
}table tr:nth-child(2){
    display:block;
    width:50%;
    margin-left:50%;
}

.print-icon{color: black; text-decoration: none; cursor: pointer; float: right; position: relative; top: 27px; left: -280px;}
.calculator-header-top-red{-webkit-border-radius: 10px 10px 0px 0px;-moz-border-radius: 10px 10px 0px 0px;border-radius: 10px 10px 0px 0px;background-color:#EA4F31;font-weight:bold;font-size:24px;text-transform:uppercase;text-align:center;color:#ffffff;padding-top:16px;padding-bottom:16px;}


.calculator-header-bottom-grey{-webkit-border-radius: 0px 0px 10px 10px;-moz-border-radius: 0px 0px 10px 10px;border-radius: 0px 0px 10px 10px;background-color:#E8E8E8;padding-top:10px;padding-bottom:17px;position:relative; z-index:1; width:75%; margin: 0 auto; }


.calculator-form {width:360px; padding-top:10px; padding-bottom:0px; margin: 0 auto; }


.discount-label {font-size:16px;}


.red_label {font-size:16px;color:#ED4D33;}


#discount_txt {width: 66px; height:36px; color:#666; font-size:15px;text-align:right;}


#discount_btn {background-color:#ED4D33;border-bottom-left-radius:5px;border-bottom-right-radius:5px;border-top-left-radius:5px;border-top-right-radius:5px;color:#FFFFFF; font-weight:bold;padding:9px 15px;text-decoration:none;}


.grey {
		color: #A7A7A7
}


.thickSideBorder {border-right: #4D4D4D solid 2px;}
:root {
    --bg-table-stripe: #f6f6f5;
    --b-table: #e3e3e2;
    --caption: #242423;
}

table {
    background-color: transparent;
    border-collapse:collapse;
  	font-family: Arial, Helvetica, sans-serif
}

th {
    text-align:left
}
/* Responsive Calculator css belwo */
.dcf-txt-center {
      text-align: center!important
    }

    .dcf-txt-left {
      text-align: left!important
    }

    .dcf-txt-right {
      text-align: right!important
    }
    
.dcf-table caption {
 ...

JavaScript

/* Add your JavaScript code here.

If you are using the jQuery library, then don't forget to wrap your code inside jQuery.ready() as follows:

jQuery(document).ready(function( $ ){
    // Your code in here
});

--

If you want to link a JavaScript file that resides on another server (similar to
<script src="https://example.com/your-js-file.js"></script>), then please use
the "Add HTML Code" page, as this is a HTML code that links a JavaScript file.

End of comment */ 

jQuery(document).ready(function( $ ){

//calculate discount prices

        jQuery(document).ready(function(){

            // show the tr w/discount prices
            jQuery('.trNewPriceFields').hide();
            jQuery('.red_label').hide();

            // Calculate and show the discounts
            jQuery("#discount_btn").click(function calculate() {
                // alert('DO THE MATH');

                var _price = 0;
                var _newPrice = 0;
                var newpricefieldItems;
                _discount = jQuery('#discount_txt').val();
                
                jQuery('.pipe_cover').attr('rowspan', 50);
                jQuery('.pipe_cover1').attr('rowspan', 20);
                jQuery('.pipe_cover2').attr('rowspan', 20);
                
                jQuery('.pricefield').each(function(i){
                    _newPrice = 0;
                    _price = jQuery(this).text();

                    // apply the discount
                    _newPrice = parseFloat(_price) - parseFloat(_price) * _discount/100;

                    // set the new price in the cell behind w/class newpricefield
                    newpricefieldItems = jQuery(".newpricefield");

                    // Check if the result is NaN and replace with "n/a"
                    if (isNaN(_newPrice)) {
                        newpricefieldItems.eq(i).text('-');
                    } else {
                        newpricefieldItems.eq(i).text(_newPrice.toFixed(2));
                    }
             ...