JSFiddle - React, Tailwind, and code Playground

by Jayson Buquia

JavaScript

var m6NovemberPromoProcess = {
    $: window.angular.element || {},
    scope: this.$('*[ng-app]').scope() || {},
    listingItems: 0,
    doProcess: function (hexColor) {
        var _self = this;
        var color = hexColor || '#176BB2';
        var event = _self.scope;
        var fontFamily = 'HelveticaNeueLT-Black';

        // Will be used to determine search or PDP page items.
        var searchpageItemSelector = '.hotelList-container';
        var PDPpageItemSelector = '.roomList-container';

        // Determine which page we're currently at.
        var isSearchPage = $(searchpageItemSelector).length;
        var isPDPPage = $(PDPpageItemSelector).length;

        // Create 'On Sale' copy to be cloned.
        var $onSaleBadge = $('<span class="on-sale-badge">On Sale</span>');

        var init = function () {
            // Make sure we use selected color from the search page
            // If we're on a PDP page.
            useStoredColor();

            // Style overrides
            applyPromoStyles();

            // Custom styles on PDP page.
            if ( isPDPPage ) {
                // Inject sale badges.
                applyPDPPageResponsiveStyle();
            }

            // Apply markup and style updates for the items.
            updateItems();
        };

        // Injects styles for the promo.
        var applyPromoStyles = function () {
            var $itemsContainer = $([searchpageItemSelector, PDPpageItemSelector].join(', '));
            var styles = "\
                .on-sale-badge {\
                    background-color: {backgroundColor};\
                    color: white;\
                    padding: 3px 6px 2px;\
                    font-family: {fontFamily};\
                    font-size: 10px;\
                    line-height: 9px;\
                    text-align: center;\
                    z-index: 1;\
                    text-transform: uppercase;\
                    -webkit-font-smoothing: antialiased;\
    ...