Edit in JSFiddle

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 names indexes
var classNamesIndexesList = document.querySelector('.class-names-indexes-list');
var renderClassNameIndexesList = function(element, classIndexListSelector) {
    var options = '';
    classIndexListSelector.innerHTML = '';
    messageIsElementContainsClassName.innerHTML = '';
    for(var i = 0; i < element.classList.length; i++) {
        options +='<option value="' + i + '">' + i + '</option>';
    }
    classIndexListSelector.innerHTML = options;
};

// Function for checking if element contains CSS class
var messageIsElementContainsClassName = document.querySelector('.is-element-contains-class-name');
var checkClassNameInElement = function(element, className) {
 	   if(checkClassName(element, className)) {
           messageIsElementContainsClassName.innerHTML = 'element contains "' + className + '" CSS class';
           inputSuggestedClassName.value = '';
       } 
       inputSuggestedClassName.value = '';
};

// Function for getting CSS class by index
var messageClassNameByIndex = document.querySelector('.class-name-by-index');
var getCSSClassByIndex = function(element, index) {    
    if(getClassNameByIndex(element, index)) {
       messageClassNameByIndex.innerHTML = 'CSS class name with index [' + index + '] is <b>' + getClassNameByIndex(element, index) + '</b>';
    }
}

// Render updated information
var renderInformation = function() { 
    showClassNames(element, elementClasses);
    showElementClassesNumber(element, elementClassesNumber);
    renderClassNamesList(element, classNamesList);    
    checkClassNameInElement(element, inputSuggestedClassName.value);
    renderClassNameIndexesList(element, classNamesIndexesList);
    // Clear information
    messageIsElementContainsClassName.innerHTML = '';
    messageClassNameByIndex.innerHTML = '';    
};
renderInformation();
    
// Event listeners
// Listen to change of checkbox "Toggle Class name 'active'"
var inputSwitcher = document.querySelector('.switcher');
inputSwitcher.addEventListener('change', function() {
    toggleClassName(element, 'active');
    renderInformation();
});

// Get button 'Add' and add listener 
var buttonAddClassName = document.querySelector('.add-class-name');
buttonAddClassName.addEventListener('mousedown', function() {
    // Add new CSS class name to element
    addClassName(element, inputClassName.value);
    // Clear input field
    inputClassName.value = '';
    // Update information
    renderInformation();
});

// Get button 'Remove' and add listener
var buttonRemoveClassName = document.querySelector('.remove-class-name');
buttonRemoveClassName.addEventListener('mousedown', function() {
    // Remove CSS class name from element using selected value
    removeClassName(element, classNamesList.value);
    // Update information
    renderInformation();
});

// Get button 'Check' and add listener
var buttonCheckClassName = document.querySelector('.check-class-name');
buttonCheckClassName.addEventListener('mousedown', function() {
    // Check if element contains CSS class and render result to element below
	checkClassNameInElement(element, inputSuggestedClassName.value);
});

// Get button 'Get' and add listener
var buttonGetClassName = document.querySelector('.get-class-name');
buttonGetClassName.addEventListener('mousedown', function() {
 	getCSSClassByIndex(element, classNamesIndexesList.value);   
});

<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>    

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;    
}