JSFiddle - React, Tailwind, and code Playground

by Professor Tom DeDonno

HTML

<p>Key points for <span class="jQuery">jQuery</span>:</p>
<ul>
  <li>Need to first load a specific <span class="jQuery">jQuery</span> versions using a <span id="cdn">CDN</span></li>
  <li id="jQueryObject">The <span class="jQuery">jQuery</span> object is then available, it uses the identifier name $.</li>
  <li>When used in an identifier, $ is treated as a letter, but is reserved for special purposes.</li>
  <li>Other typical identifiers (aka variable names) are: myHightlight, bg, fg, $, str, border.</li>
  <li>A <span class="jQuery">jQuery</span> call consists of the $( <span class="jQuery">jQuery</span>Selector ).methodName</li>
  <li>Where the <span class="jQuery">jQuery</span>Selector is a string based on standard CSS3 selectors</li>
  <li>Basic CSS selectors can be a tag name such as li, ul, body, etc.</li>
  <li>CSS selectors can also reference the HTML id attribute of a tag using #idName</li>
  <li id="classSelector">CSS selectors can also reference a group of tags, using the HTML class atrribute using .className</li>
</ul>
<p>For J0, complete this webpage by filling in the blank cells in the next table..</p>
<table>
  <tbody>
    <tr>
      <th>&nbsp;</th>
      <th>Description</th>
      <th>Test Button</th>
    </tr>
    <tr>
      <td>1</td>
      <td>Select  the ul tag</td>
      <td><input type="button" onclick="myHighlight( 'ul' )" value="highLight ul block" /></td>
    </tr>
    <tr>
      <td>2</td>
      <td>Select li tags</td>
      <td>&nbsp;</td>
    </tr>
    <tr>
      <td>3</td>
      <td>Select th tags</td>
      <td>&nbsp;</td>
    </tr>
    <tr>
      <td>4</td>
      <td>Select tr tags</td>
      <td>&nbsp;</td>
    </tr>
    <tr>
      <td>5</td>
      <td>select class=&quot;<span class="jQuery">jQuery</span>&quot;</td>
      <td>&nbsp;</td>
    </tr>
    <tr>
      <td>6</td>
      <td>Select id=&quot;cdn&quot;</td>
      <td>&nbsp;</td>
    </tr>
    <tr>
      <td>7</td>
      <td>Select id=&quot;jQueryObject&quot;</td>
     ...

CSS

body { color: #000000; background-color: #FFFFFF; }
table { width: 90%; border: 2px solid black; 
       border-collapse: collapse;}
td { border: 2px solid black; }

JavaScript

myHighlight = function( selector, rgb, border ) {
	 
	 	//in chrome formal parameters cannot have defaults
		 if( rgb == undefined )	 rgb = "#ff0"; //default yellow
			
		 if( border == undefined ) border = "3px solid lime";  
		  
		  var bg = $(selector ).css( "background-color" );
		    
		  //on browser an unset background is set to transparent		  
		  if( bg === 'transparent' || /^rgba/.test( bg ) )  {
			  $( selector + ":first" ).css( "border-top", border );
			  $( selector + ":last" ).css( "border-bottom", border ); 
			  $( selector ).css( { "border-right": border, "border-left": border } );
			  $( selector ).css( "background-color", rgb );
		  }
		  else {
			 //reset background to transparent, borders to none
		  	$( selector + ":first" ).css( "border-top", "none" );
			$( selector + ":last"  ).css( "border-bottom", "none" );
			$( selector ).css( { "border-right":"none", "border-left":"none" } );
		  	$( selector ).css( "background-color", "transparent" );
		  }
  }