JSFiddle - React, Tailwind, and code Playground

by Professor Tom DeDonno

HTML

<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.11.4/jquery-ui.min.js"></script>
<link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.11.4/themes/le-frog/jquery-ui.css">
This file is currently using the full version of jQuery, I used to add an accordion to the assignment page. You may update the links to the <a href="https://jqueryui.com/">latest version</a>. When using a CDN it is best to select the full version you used at development time.  If you link to the latest version the browser will downloaded the framework each  time.

At a later date if you have time to check your code, update to a newer version,
but in general if its not broken, why fix it. Only exception here is IE, which typically changes their JavaScript engine upon each release. For further information on this topic refer to this  <a href="http://stackoverflow.com/questions/12608242/latest-jquery-version-on-googles-cdn">stack overflow post.</a>
<p>You will need to add one <a href="http://plugins.jquery.com/">jQuery plugin</a> to this page that is not part of the <a href="http://api.jqueryui.com/">jQuery UI</a>.
</p>
<table border="1">
  <tr>
    <th colspan="4" scope="col">&nbsp;</th>
  </tr>
  <tr>
    <th width="125" scope="col">Description</th>
    <th width="196" scope="col">Solution</th>
    <th width="159" scope="col">Right Tool*</th>
    <th width="522" scope="col">Example</th>
  </tr>
  <tr>
    <td colspan="4" class="feature">jQuery Effects -<a href="http://jqueryui.com/effect/">demo</a> - all effects are based on the toggle method, it is a true toggle.</td>
  </tr>
  <tr>
    <td height="28">Blind Effect</td>
    <td id="blindEffect">Click for blind efffect</td>
    <td><a href="http://www.w3schools.com/css/css3_transitions.asp">CSS3 Transitions**</a></td>
    <td rowspan="5" ><div id="effect" style="width:300px; height:100px; background-color:skyblue;">This block will be used to demo the effect examples, The demo page is very good at this but we...

JavaScript

$(document).ready( function() {
		
		$( "td:first-child" ).css( "background-color", "#dcdcdc" );
		$( ".feature").css( { "background-color":"#eeeee", "font-size":"125%", "padding-top":"1em" } ); 
		
		$( "#blindEffect" ).click( function() {
			$( "#effect" ).toggle( "blind" );
			//note for others we just change the argument to toggle, toggle is a core effect method
		} );
		
		$( "#bounceEffect" ).click( function() {
			$( "#effect" ).toggle( "bounce", { times: 10, easing:'easeOutBounce' }, "slow"  );
			//note for others we just change the argument to toggle, toggle is a core effect method
		} );

		
		$( "#resize" ).click( function() {
			$( "#interactions" ).resizable({ animateEasing: "easeOutBounce" });
			//note for others we just change the argument to toggle, toggle is a core effect method
		} );

	/*
	javascript is not yet seen the autoComplete id, need to wait until document is ready
	or you can just wait to the tags are read and then load the code, this is the standard way for widgets
	*/
	
	$("#autoComplete").autocomplete( { source:
	[ "cimw110a DW", "cimw105 SQL", "cimw220 Flash", "cimw240 CSS", "cimw245 PHP", "cimw260 JavaScript" ] } );
	
	$("#menu" ).menu();	

	} );