JSFiddle - React, Tailwind, and code Playground

by CommandLineDesign

HTML

<div id="colors">
  <p class="text strike red">red</p>
  <p class="text strike purple">purle</p>
  <p class="text strike red">red</p>
  <p class="text strike blue">blue</p>
  <p class="text strike yellow">yellow</p>
  <p class="text strike purple">purple</p>
</div>

CSS

p{
  font-weight: bold;
}

.green{
  color: green;
}
.red{
  color: red;
}

.red{
  color: red;
}
.purple{
  color: purple;
}
.blue{
  color: blue;
}

.strike{
  text-decoration: line-through;
}

JavaScript

var getUpdatedClassName = function(element, addClass, replaceArray) {
	var elementClassName = element.className.toString().split(' ');
  elementClassName = elementClassName.filter( function(item) {
  	return replaceArray.indexOf(item) < 0
  })
	return elementClassName.join(' ') + ' ' + addClass;
}

var updateElements = function(elementArray, config) {
    var objectConfig = config
   Array.prototype.forEach.call(elementArray, function(item, index){
     if(item instanceof HTMLElement){
       Object.assign(item, typeof config == 'function' ? objectConfig(item) : objectConfig);
     }
   })
}

var getGreenConfigs = function(element){
	var myElement = document.createElementById('div');
  myText = document.createTextNode('hi!');
  myElement.appendChild(myText);
	var result = {
  	className : getUpdatedClassName(element, 'green', ['strike', 'yellow', 'blue', 'purple']),
    innerHTML : 'new content',
    childNodes : myElement
  }
  return result;
}

var updateClassNames = function(elementArray, newClass, replaceArray){
    for(var i=0; i < elementArray.length; i++){
        var currentElement = elementArray.item(i)
        if(currentElement instanceof HTMLElement){
            if(replaceArray){
                for(var i in replaceArray){
                    currentElement.replace(replaceArray[i], '');
                }
            }
            currentElement.className = newClass;
        }
    }
}

var updateElements_one = function(elementArray, config){
    for(var i=0; i < elementArray.length; i++){
        var currentElement = elementArray.item(i);
        if(currentElement instanceof HTMLElement){
            Object.assign(currentElement, config);
        }
    }
}


var trimClassName = function(replaceArray){
    return function(item){
        for(var i in replaceArray){
            item.replace(replaceArray[i], '');
        }
    }
}


var elements = document.getElementsByClassName('text');
updateElements(elements, getGreenConfigs)

var myObject =...