JSFiddle - React, Tailwind, and code Playground

by Professor Tom DeDonno

HTML

<link rel="stylesheet" href="http://www.saddleback.edu/faculty/tdedonno/cimw260/samples/eventTableTwilight.css">
<table style="width:90%;" border="1">
             <tr>
               <th colspan="4"><p>jQuery Mouse events, event is relative an element
                 <label for="select">Themes:</label>
                 <select id="themes">
                 <option>eventTableMidnight</option>
                 <option>eventTableDaylight</option>
                 <option selected>eventTableTwilight</option>
                 <option>default</option>
                 </select>
               </p></th>
  </tr><tr>
               <td colspan="4"><p class="testArea" id="mouse">Mouse  Test Area</p></td>
             </tr>
             <tr>
               <td>jquery Event</td>
               <td> Objective</td>
               <td>Method</td>
               <td>Test Element</td>
  </tr>
             <tr>
               <td>element.click()</td>
               <td>On click using <a href="http://www.w3schools.com/jquery/tryit.asp?filename=tryjquery_eff_animate">animate</a> take 3 seconds to increase height of mouse test area.</td>
               <td><a href="http://api.jquery.com/animate/">animate</a>(map, duration)</td>
               <td><input type="button" name="testMouseClick" id="testMouseClick" value="Button"></td>
  </tr>
             <tr>
               <td>element.dblclick()</td>
               <td>Set mouse text area back to its original size</td>
               <td>animate</td>
               <td>&nbsp;</td>
  </tr>
             <tr>
               <td>element.mouseenter</td>
               <td>&nbsp;</td>
               <td>html</td>
               <td><input type="button" name="testMouseEnter" id="testMouseEnter" value="Button"></td>
  </tr>
             <tr>
               <td>element.mouseleave</td>
               <td><script type="text/javascript">
		function strips( ) {
			$( "#jQueryPageSelector tr:even" ).css( "backgroundColor : gray" );
		}
           ...

CSS

@charset "utf-8";
/* CSS Document */
body {
	background-color: #415D7A;
}

table {
	color : #222222;
	width : 90%;
	margin : auto;
	background-color : #eeeeee;
}

table, td, tr {
	border : medium solid #CECECE;
}

JavaScript

$(document).ready( function( ) {
	
	/* I could not get themes working in jsFiddle
    if you get theme selection working create a
    new shared fiddle and email me the shared link
    it will be worth an additional homework point */
	
	$( "#themes" ).change( function( e ) {
		//alert( "change themes" );
		 cssTheme = 
         "https://www.saddleback.edu/faculty/tdedonno/cimw260/samples/" + 
          $("#themes").find( ":selected" ).text() + ".css";

		  $( 'head link[rel=stylesheet]' ).remove( ); //remove current <link> from DOM
		 if( cssTheme == "default.css" ) return;
		 
		 //attach new DOM link to <head>
		 $( 'head' ).append( '<link rel="stylesheet" href="' + cssTheme + '" type="text/css" />');
		 //alert( "new theme?" + cssTheme );
		 } );
	/** .testArea#mouse event handlers */
	
	$("#testMouseClick").click( function( ) {
		$(".testArea#mouse").animate( {height:"200px"}, 3000 );
	} );
	
	$("#testMouseEnter").mouseenter(function(e) {
        // alert( e.clientX );
		$(".testArea#mouse").html( "Mouse entered X,Y: " + e.clientX + ", " + e.clientY );
    });
	
	
	function testHide( ) { /*alert( "test hide" );*/ $(".testArea#mouse").hide( ); }
	  
	$( "#testHide" ).bind( "click", testHide );
	
	function testShow( ) { $(".testArea#mouse").show( ); }

	$( "#testShow" ).bind( "click", testShow );
		
	$( "#disableHideShow" ).bind( "click", function() { 
		//alert( "cancel hide show" );
		//unbind both click events, disable buttons and rollover help
		if( $( "#disableHideShow" ).val() == "Disable Hide and Show" ) {
			//alert( "in disableHideShow ->" + $( "#disableHideShow" ).val() + "<-" );
			$( "#testHide, #testShow" ).unbind( "click" );
			$( "#testHide,#testShow" ).attr( "title", "no longer enabled" );
			$( "#testHide, #testShow" ).attr( "disabled", "disabled" );
			
			$(".testArea#mouse").show( );
			$( "#disableHideShow" ).val( "Enable Hide and Show" );
		} else {
			//alert( "else HideShow" );
			$( "#testHide" ).bind( "click", testHide );
			$(...