JSFiddle - React, Tailwind, and code Playground

by jfriend00

HTML

<div id="blue-colum" class="monthly-coupon-column">
    <ul>
        <li><img class="month-offer" src="http://dummyimage.com/200x100/000/fff.jpg&text=+" alt="April 2014 Coupon" /></li>
        <li><img class="month-offer" src="http://dummyimage.com/200x100/000/fff.jpg&text=+" alt="August 2014 Coupon" /></li>
        <li><img class="month-offer" src="http://dummyimage.com/200x100/000/fff.jpg&text=+" alt="November 2014 Coupon" /></li>
        <li><img class="month-offer" src="http://dummyimage.com/200x100/000/fff.jpg&text=+" alt="February 2015 Coupon" /></li>   
    </ul>
</div>
<div id="pink-colum" class="monthly-coupon-column">
    <ul>
        <li><img class="month-offer" src="http://dummyimage.com/200x100/000/fff.jpg&text=+"alt="September 2014 Coupon" /></li>
        <li><img class="month-offer" src="http://dummyimage.com/200x100/000/fff.jpg&text=+" alt="December 2014 Coupon" /></li>
        <li><img class="month-offer" src="http://dummyimage.com/200x100/000/fff.jpg&text=+" alt="March 2015 Coupon" /></li>    
    </ul>   
</div>
<div id="green-colum" class="monthly-coupon-column">
    <ul>
        <li><img class="month-offer" src="http://dummyimage.com/200x100/000/fff.jpg&text=+" alt="July 2014 Coupon" /></li>
        <li><img class="month-offer" src="http://dummyimage.com/200x100/000/fff.jpg&text=+g" alt="October 2014 Coupon" /></li>
        <li><img class="month-offer" src="http://dummyimage.com/200x100/000/fff.jpg&text=+" alt="January 2015 Coupon" /></li>
        <li><img class="month-offer" src="http://dummyimage.com/200x100/000/fff.jpg&text=+" alt="April 2015 Coupon" /></li>    
    </ul>
</div>

CSS

.month-offer.this-month {
    height: 110px;
    width: 220px;
}

ul {
    list-style-type: none;
}

JavaScript

function getMonthFromString(mon){
   return new Date(Date.parse(mon +" 1, 2014")).getMonth()
}

var now = new Date();
$(".month-offer").each(function() {
    // assume the first word of the alt tag is the month name
    var altWords = this.alt.split(" ");
    var yearNum = parseInt(altWords[1], 10);
    var monthNum = getMonthFromString(altWords[0]);
    if (now.getMonth() == monthNum && now.getFullYear() == yearNum) {
        $(this).addClass("this-month");
    }

});