JSFiddle - React, Tailwind, and code Playground

by alekskorovin

HTML

<div class="element">
    Element
</div>
<div>CSS classes: <span class="element-classes"></span></div>
<div>Number of CSS classes: <span class="element-classes-number"></span></div>
<label>
    Toggle Class name 'active'
    <input type="checkbox" class="switcher">
</label>
<label>
Add CSS class:
    <input type="text" class="class-name" placeholder="Enter CSS class name">
    <button class="add-class-name">Add</button>
</label>
<label>
    Remove CSS class:
    <select class="class-names-list"><select>
    <button class="remove-class-name">Remove</button>
</label>
<label>
    Is element contains CSS class:
    <input type="text" class="suggested-class-name" placeholder="Enter suggested CSS class name">
    <button class="check-class-name">Check</button>
    <div class="is-element-contains-class-name"></div>
</label>        
<label>
    Get CSS class by index:
    <select class="class-names-indexes-list"><select>
    <button class="get-class-name">Get</button>
    <div class="class-name-by-index"></div>        
</label>

CSS

body {
    font: normal 0.8rem/2 Helvetica, sans-serif;
}
.active {
    color: red;
}
.disabled {
     color: #ccc;   
}
label {
    color: blue;
    display: block;   
}
.class-name-by-index,
.is-element-contains-class-name {
    color: green;    
}

JavaScript

var element = document.querySelector('.element');

// Methods for working with CSS classes via className property
var toggleClassName = function(element, className) {
    element.classList.toggle(className);
};
var addClassName = function(element, className) {
    if(className) {
    	element.classList.add(className);
    }
};
var removeClassName = function(element, className) {
    if(className) {
   		element.classList.remove(className);
    }
};
var checkClassName = function(element, className) {
    if(className) {
    	return element.classList.contains(className);
    }
};
var getClassNameByIndex = function(element, index) {
	if(index) {
     	return element.classList.item(index);   
    }
};
var getNumberOfClassNames = function(element) {
	return element.classList.length;   
}
// Get all text fields
// Get text field for adding CSS class name
var inputClassName = document.querySelector('.class-name');

// Get text field for suggested CSS class
var inputSuggestedClassName = document.querySelector('.suggested-class-name');

// Get element for showing of list of CSS class names
var elementClasses = document.querySelector('.element-classes');
var showClassNames = function(element, panel) {
    panel.innerHTML = element.classList;
};   

// Get element for showing number of CSS class names
var elementClassesNumber = document.querySelector('.element-classes-number');
var showElementClassesNumber = function(element, panel) {
    panel.innerHTML = getNumberOfClassNames(element);
};

// Renders of lists
// Fill the list of CSS class names
var classNamesList = document.querySelector('.class-names-list');
var renderClassNamesList = function(element, classListSelector) {  
    var options = '';
    classListSelector.innerHTML = '';
    for(var i = 0; i < element.classList.length; i++) {
        options +='<option value="' + element.classList[i] + '">' + element.classList[i] + '</option>';
    }
    classListSelector.innerHTML = options;
}

// Fill the list of CSS class...