JSFiddle - React, Tailwind, and code Playground

by Daniel Lizik

HTML

<script src="https://code.jquery.com/qunit/qunit-1.22.0.js"></script>
<link rel="stylesheet" href="https://code.jquery.com/qunit/qunit-1.22.0.css">
<input id="input" value="ldkfj"/>
<button onclick="toggle( document.querySelector('#input'), 'red' )">
  toggle( document.querySelector('#input'), 'red' )
</button>
<button onclick="toggle( document.querySelector('#input'), 'grey' )">
  toggle( document.querySelector('#input'), 'grey' )
</button>
<button onclick="toggle( document.querySelector('#input'), 'foobar' )">
  toggle( document.querySelector('#input'), 'foobar' )
</button>
<!--
<div id="qunit"></div>
<div id="qunit-fixture"></div>
-->

CSS

.red {
  color: red;
}

.blue {
  color: blue;
}

.grey {
  background: grey;
}

.foobar {
  width: 900px;
}

button {
  font-family: "Courier", monospace
}

JavaScript

(function(root, name, factory) {
  root[name] = factory();
})(this, 'toggle', function() {

  return function(el, name) {
  	var className = el.className,
        arr = className !== (null || '') ? el.className.trim().split(' ') : [],
    		index = arr.indexOf(name);
    if (index > -1)
			arr.splice(index, 1);
    else
      arr.push(name);
    el.className = arr.join(' ');
  }

});

/** specs 

QUnit.test('toggle specs', function(assert) {
  var el = document.querySelector('#input');
  assert.strictEqual(el.className, '', 'should not have classname to start');
  toggle(el, 'red');
  assert.strictEqual(el.className, 'red', 'should add red class');
  toggle(el, 'red');
  assert.strictEqual(el.className, '', 'should remove red class');
  toggle(el, 'blue');
  toggle(el, 'grey');
  assert.strictEqual(el.className, 'blue grey', 'should add multiple class names');
  toggle(el, 'foobar');
  toggle(el, 'blue');
  assert.strictEqual(el.className, 'grey foobar', 'should toggle more names');
});

*/