JSFiddle - React, Tailwind, and code Playground

by Jim_Toth

HTML

<div> Default HTML </div>

CSS

div{
    width: 390px;
    height: 150px;
    background: #4E4E4E;
    color: #FFF;
    line-height: 150px;
    text-align: center;
    font-size: 30px;
    border-radius: 10px;
    margin: 80px auto;
}

JavaScript

function red() {
    $('div').css('background','#B60C0C')
    .text('Screen Size RED');
}

function orange() {
    $('div').css('background','#EBAE10')
    .text('Screen Size ORANGE');
}

function green() {
    $('div').css('background','#83ba2b')
    .text('Screen Size GREEN');
}

var bounds = [
    {min:0,max:500,func:red},
    {min:501,max:850,func:orange},
    {min:851,func:green}
];

var resizeFn = function(){
    var lastBoundry; // cache the last boundry used
    return function(){
        var width = $(window).innerWidth();
        var boundry, min, max;
        for(var i=0; i<bounds.length; i++){
            boundry = bounds[i];
            min = boundry.min || Number.MIN_VALUE;
            max = boundry.max || Number.MAX_VALUE;
            if(width > min && width < max 
               && lastBoundry !== boundry){
                lastBoundry = boundry;
                return boundry.func.call(boundry);            
            }
        }
    }
};
$(window).resize(resizeFn());
$(document).ready(function(){
    $(window).trigger('resize');
});