JSFiddle - React, Tailwind, and code Playground

by kougiland

HTML

<p class="hover">1</p>
<p class="className">2</p>

CSS

.hover {
    color: red;
}

JavaScript

var $ = function(selector) {
    if (typeof selector === 'undefined') {
        return new $;
    }

    if (!(this instanceof $)) {
        return new $(selector);
    }
    this.length = 0;
    this.query(selector);
    return this;
};

$.prototype.splice = [].splice;

$.prototype.each = function(cb) {
    for (var i = 0, l = this.length; i < l; i++) {
        cb.apply(this[i], [i, this[i]]);
    }
    return this;
}

$.prototype.removeClass = function(cls) {
    return this.each(function() {
        this.classList.remove(cls);
    });
}

$.prototype.addClass = function(cls) {
    return this.each(function() {
        this.classList.add(cls);
    });
}

$.prototype.hasClass = function(className) {
    if (this.length === 0) return false;
    return this.get(0).classList.contains(className);
}

$.prototype.toggleClass = function(cls) {
    return this.each(function() {
        this.classList.toggle(cls);
    });
}

$.prototype.query = function(selector) {
    var q = document.querySelectorAll(selector);
    for (var i = 0, l = q.length; i < l; i++) {
        this[i] = q[i];
    }

    this.length = q.length;
    return this;
};

$.prototype.get = function(i) {
    return this[i];
};

var hasClass = $('p').addClass('test').toggleClass('hover').removeClass('className').hasClass('test');

console.log(hasClass)