JSFiddle - React, Tailwind, and code Playground

by Professor Tom DeDonno

HTML

<table border="1" style="width:90%; border:1px;"  id="jQuerySelectors">
  <tr>
    <th colspan="3"><a id="jQueryPageSelector"></a>jQuery Selector Table 
    <input type="button" id="getRGB" value="Get Colors" onClick="getRGB();"></th>
  </tr>
  <tr>
    <td colspan="3"><form action="xxx">
      <fieldset style="border:medium solid blue">
        <legend style="border:medium solid blue;">Testing Area</legend>
        <div id="testingArea">jQuery has become the most popular <span>JavaScript</span> framework. </p>
        </div>
      </fieldset>
    </form></td>
  </tr> 
  <tr>
    <td>6</td>
    <td class="cssColumn">Tag Desccendant<br>
        <span>table span</span></td>
    <td>add button for table span, only 2 spans in jsFiddle</td>
  </tr>
  <tr>
    <td>7</td>
    <td>&nbsp;</td>
    <td>jQuery input:button</td>
  </tr>
  <tr>
    <td>8</td>
    <td class="cssColumn">tag class attribute<br>
    td.cssColumn</td>
    <td><input type="button" onClick="myHighlight( 'td.cssColumn' );"  title="default yellow" value="td.cssColumn" />
    <input type="button" onClick="myHighlight( 'td:nth-child( 3 )', '#cccccc', '2px outset blue' ); "  title="gray background" value="td:nth-child(3)" />
    </td>
  </tr>
  <tr>
    <td>9</td>
    <td class="cssColumn">first child of tag<br>
    tr:first-child</td>
        <td>xx</td>
  </tr>
  <tr>
    <td>10</td>
        <td class="cssColumn">odd children<a href="http://www.w3.org/Style/Examples/007/evenodd.en.html"><br>
    tr:nth-child( odd )</a></td>
    <td><input type="button" value="odd child" 
               onclick="myHighlight( 'tr:nth-child( odd )' ); "</td>
  </tr>
  <tr>
    <td>11</td>
    <td class="cssColumn"><a href="http://www.w3.org/Style/Examples/007/evenodd.en.html" class="cssColumn">tr:nth-child( even)</a></td>
    <td>&nbsp;</td>
  </tr>
  <tr>
    <td>12</td>
    <td class="cssColumn">table</td>
    <td><input type="button" onClick="halloween( 'table' );"  id="halloween" value="table halloween" /></td>
 ...

CSS

body { color: #000000; background-color: #FFFFFF; }

JavaScript

// JavaScript Document

/** 
   * Basic functions for changing display table #jQuerySelectors 
   
   functions:
     getRGB( ) alert window with fg,bg colors - used mainly for debugging 
	 myInvert( Element str ); invert text of element 
	 myHighlight( Element str, bg = "Yellow", border="3px solid lime" ); 
	 //set bg, and border of Element
	 halloween( Element tag ); HTML tag or event object to give Halloween theme
	 notHalloween( Element tag ); HtML tag or jQuery Event Object to clear Halloween theme		 

	@author Professor Tom DeDonno
	@date 9/2012, updated 10/2015
	Tested and working on Firefox 40 IE 11, and Chrome 45. 
	modified 9/30 for jsFiddle compatiblity altered function name to variable = function 
   */


	  
  getRGB = function( ) {

	  
	  alert( "body fg: " + $("body").css( "color" ) + 
	  " bg: " + $("body").css( "background-color" ) +
	  "\ntable#jQuerySelectors fg: " +
	  $( "table#jQuerySelectors" ).css( "color" ) + " bg: " +
	  $( "table#jQuerySelectors" ).css( "background-color" ) +
	  "\n#story1 fg: " +
	  $( "table#jQuerySelectors span#story1" ).css( "color" ) + " bg: "  +
	  $( "table#jQuerySelectors span#story1" ).css( "background-color" ) );
	  
	  //Note id uniquely identify an element on a Web Page
	  //Full path is more thorough, but prone to error
	  //Best practice ID is ID.
  }
  
  /* 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(...