JSFiddle - React, Tailwind, and code Playground

by Professor Tom DeDonno

HTML

<table border="1" style="width:90%; border:1px;"  id="jQuerySelectors">
  <caption>

  </caption>
  <tr>
    <th colspan="5"><a id="jQueryPageSelector"></a>jQuery Selector Table 
    <input type="button" id="getRGB" value="Get Colors" onClick="getRGB();"></th>
  </tr>
  <tr>
    <td colspan="5"><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. 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>. Full <a href="https://jsfiddle.net/tdedonno/mb884xd3/">jsFiddle1 Version</a> - of entire assignment,</p>
        </div>
      </fieldset>
    </form></td>
  </tr>
  <tr>
    <td>&nbsp;</td>
    <td><span>Write JavaScript</span> pseudo code for setting  selected element(s) to red foreground.</td>
    <td  class="cssColumn"><p>CSS<br />
      Selector </p></td>
    <td>Button w onclick function call</td>
    <td>Description</td>
  </tr>
  <tr>
    <td>1</td>
    <td>selectID = function( id ) {return document.getElementById( id );}<br>
    selectID( &quot;story1&quot; ).style.color = 'red';</td>
    <td class="cssColumn">ID...

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