JSFiddle - React, Tailwind, and code Playground

by gabrieleromanato

HTML

<ul>
<li class="a" id="a">A</li>
<li class="b" id="b">B</li>
<li class="c" id="c">C</li>
</ul>

CSS

.a {
    padding: 1em;
}

.b {
    background: yellow;
}

.c {
    border: thin solid;
}

JavaScript

Array.prototype.contains = function(obj) {
    var i = this.length;
    while (i--) {
        if (this[i] === obj) {
            return true;
        }
    }
    return false;
}

Element = HTMLElement;

Element.prototype.addClass = function(clas) {
    if (this.className && this.className !== '') {
        if (!this.hasClass(clas)) {
            this.className = this.className + ' ' + clas;
        }
    } else {
        this.className = clas;
    }
}
Element.prototype.hasClass = function(clas) {
    if ((this.className.split(' ')).contains(clas)) {
        return true;
    }
    return false;
}
Element.prototype.countClasses = function() {
    if (!this.className) {
        return 0;
    }
    if (this.className.replace(' ') == this.className) {
        return 1;
    }
    var listOf = this.className.split(' ');
    return listOf.length;
}
Element.prototype.removeClass = function(clas) {
    if (this.hasClass(clas)) {
        if (this.countClasses() == 1) {
            this.className = '';
        }
        else {
            var reg = new RegExp('(\\s|^)' + clas + '(\\s|$)');
            this.className = this.className.replace(reg, ' ');
        }
    }
}
Element.prototype.toggleClass = function(clas1) {
    if (this.hasClass(clas1)) {
        this.removeClass(clas1);
    } else {
        this.addClass(clas1);
    }
}


var a = document.getElementById('a');

var b = document.getElementById('b');

var c = document.getElementById('c');

a.addEventListener('click', function() {

    this.removeClass('a');
    this.addClass('c');

}, false);

b.addEventListener('mouseover', function() {

    this.toggleClass('b');

}, false);

c.addEventListener('mouseout', function() {

    this.removeClass('a');
    this.addClass('a b c');

}, false);