JSFiddle - React, Tailwind, and code Playground

by hslincoln

HTML

<!-- Variables to calc difference in was now price -->
<p><strong>Was:</strong>

</p>
<div class="was">£100.00</div>
<hr>
<p><strong>Now:</strong>

</p>
<div class="price">£73.00</div>
<hr>
<strong>Output:</strong>

<br>
<div id="red-tag-area">
<img class="span" src="" alt="If you can read this, you're out of bounds" id="red-tag" />
</div>
<br>
<p>^^ Change Was and now price in the HTML pane to see this change. Click 'Run' when done

CSS

#red-tag {
    display:block;
    width:76px;
    height:auto;
}

JavaScript

// add in the animation eventually...
$('#red-tag-area').hover(function () { //fired the first time
    $('#red-tag').animate({
        width: "0px"
    });
}, function () { // fired the second time 
    $('#red-tag').animate({
        width: "76px"
    });
});

// End animation addition


jQuery(document).ready(function () {
    var wasprice = jQuery('.was').text().replace(/\u00A3/g, '');
    var actualprice = jQuery('.price').text().replace(/\u00A3/, '');
    var freePP = ["free P&P", "free-P&P", "free-p&p"];
    var gift = jQuery('#giftidea').text();
    var twopack = ["two-pack", "2pack", "2-pack"];
    var areatosearchinfortwopack = jQuery('p.invtdesc2').text();
    var areatosearchinforPP = jQuery('p.invtdesc2').text();

    if (+actualprice <= +wasprice) {
        var divforpercentage = +actualprice / +wasprice * 100;
        var finalpercentage = 100 - +divforpercentage;

        if ((+finalpercentage > 17.00) && (+finalpercentage < 22.50)) { // 20%
            jQuery('.span').attr('src', "http://jmldirect.uat.venda.com/content/ebiz/shop/resources/exp/redtags/rt_20_percent_off.png");
            return true;
        }

        if ((+finalpercentage > 22.56) && (+finalpercentage < 27.50)) { // 25%
            jQuery('.span').attr('src', "http://jmldirect.uat.venda.com/content/ebiz/shop/resources/exp/redtags/rt_25_percent_off.png");
            return true;
        }

        if ((+finalpercentage > 25.56) && (+finalpercentage < 32.50)) { // 30%
            jQuery('.span').attr('src', "http://jmldirect.uat.venda.com/content/ebiz/shop/resources/exp/redtags/rt_30_percent_off.png");
            return true;
        }

        if ((+finalpercentage > 32.56) && (+finalpercentage < 37.50)) { // 35%
            jQuery('.span').attr('src', "http://jmldirect.uat.venda.com/content/ebiz/shop/resources/exp/redtags/rt_35_percent_off.png");
            return true;
        }

        if ((+finalpercentage > 37.56) && (+finalpercentage < 43.50)) { // 40%
           ...