JSFiddle - React, Tailwind, and code Playground

by Professor Tom DeDonno

HTML

<div id="testingArea">jQuery has become the most popular <span>JavaScript</span> framework. A framework is an enhanced/mature <span>JavaScript</span> library, that simplifies the most used <span>JavaScript</span> tasks. 
     <p>For example, jQuery uses the sizzle engine to simplify the selection of DOM elements. In standard, <span>JavaScript</span> a programmer uses either getElementByID or getElementByTabName, but with jQuery the programmer has simpler selection mechanism. They simply use the jQuery object $, followed by a CSS selector in parenthesis, for example <em id="story1">to select the element with ID of story1, one just uses $(&quot;#story1&quot;).</em> Not only does sizzle simplify <span>JavaScript</span> tag selection, but with the method css, one can set CSS properties rather than having to use the <span>JavaScript</span> <a href="http://www.w3schools.com/jsref/dom_obj_style.asp">style object</a>.</p></div>
<input type="button" onclick="myInvert( '#story1' )" value="#story1" />
<input type="button" onclick="myInvert( 'span' )" value="Span Tag" />
<input type="button" onclick="myInvert( '#testingArea > span' )"
       value="#testingArea > span, note span inside p tag are grandchildren" />
<input type="button" onclick="myInvert( '#testingArea * > span' )" 
       value="#testingArea * > span; where * wildcard matches any tag " />

JavaScript

/* from http://jsfiddle.net/Mottie/xcqpF/1/light/  */
rgb2Hex = function(rgb){
 rgb = rgb.match(/^rgba?[\s+]?\([\s+]?(\d+)[\s+]?,[\s+]?(\d+)[\s+]?,[\s+]?(\d+)[\s+]?/i);
 return (rgb && rgb.length === 4) ? "#" +
  ("0" + parseInt(rgb[1],10).toString(16)).slice(-2) +
  ("0" + parseInt(rgb[2],10).toString(16)).slice(-2) +
  ("0" + parseInt(rgb[3],10).toString(16)).slice(-2) : '';
}
  
 	/** invert foreground and background color, 
	note body has set colors, browser will use defaults inside table */
myInvert =  function( str ) {
		
		//element = $( "table#jQuerySelectors " + str );
		        		
		var fg = $( str ).css( "color" );
		var bg = $( str ).css( "background-color" );
		
		/** nota bene, if the bg color is not specifically set,
		browser will set it to transparent,
		firefox sets it to keyword transparent,
		chrome uses rgba( 0, 0, 0, 0 ) with 0 for alpha; 
		in both cases I'm seting bg to white; note a transparent fg is invisible 
		browsers set fg to default black rgb( 0, 0, 0 ); */
						
	    if ( bg === 'transparent' ) bg = "#ffffff";
	
		if( /^rgb/.test( fg ) ) {
			//alert( "fg is in rgb format" );
			fg = rgb2Hex( fg );
		}
		if( /^rgb/.test( bg ) )  bg = rgb2Hex( bg );
			
		//set colors to defaults
		if ( fg == bg  ) { fg = "#000"; bg = "#fff"; }
		             
        $( str ).css( { "color" : bg ,  "background-color" : fg } );           
      }