JSFiddle - React, Tailwind, and code Playground

by pepelsbey

HTML

<!DOCTYPE html>
<html>
<head></head>
<body>
    <ul>
        <li></li>
        <li></li>
        <li></li>
        <li></li>  
    </ul>  
</body>
</html>

CSS

li { width: 10px; height: 10px; float: left; background: red; }
li.active { background: green; }

JavaScript

if (!Array.prototype.forEach){
    Array.prototype.forEach = function(fun /*, thisp */){
        if (this === void 0 || this === null || typeof fun !== "function")
            throw new TypeError();
        var t = Object(this);
        var len = t.length >>> 0;
        var thisp = arguments[1];
        for (var i = 0; i < len; i++){
            if (i in t)
                fun.call(thisp, t[i], i, t);
        }
    };
}
if (!HTMLElement.prototype.addClass) {
    HTMLElement.prototype.addClass = function(c){
        if (this.hasClass(c)) return this;
        this.className = (this.className + " " + c).replace(/\s+/g, " ").replace(/(^ | $)/g, "");
        return this;
    }
}
function augment(receivingClass, givingClass) {
    /* only provide certain methods */
    if (arguments[2]) {
        for (var i=2, len=arguments.length; i<len; i++)
            receivingClass.prototype[arguments[i]] = givingClass.prototype[arguments[i]];
    }
    /* provide all methods*/
    else {
        for (methodName in givingClass.prototype)
            receivingClass.prototype[methodName] = givingClass.prototype[methodName];
    }
}

augment(NodeList, Array, 'forEach');
document.querySelectorAll('li').forEach(function(elem){
    elem.addClass('active');
});