JSFiddle - React, Tailwind, and code Playground

by Sergey Shaliapin

HTML

<table>
    <tr>
        <td></td>
        <td></td>
        <td></td>
        <td></td>
        <td></td>
        <td></td>
    </tr>
    <tr>
        <td></td>
        <td></td>
        <td></td>
        <td></td>
        <td></td>
        <td></td>
    </tr>
</table>

<button class="add"> Add row</button>
<button class="rowColor"> Color row </button>
<br>
<input type="radio" name="color" value="red" checked>red <br>
<input type="radio" name="color" value="green">green <br>
<button class="snakeEffect"> Snake effect </button>



    
    











































<!-- EPAM LOGO © EPAM Systems Inc. jQuery course -->
<div id="epam-logo-button">
    <span id="epam-left-bracket">&lt;</span>
    <span id="epam-name-text">epam</span>
    <span id="epam-right-bracket">&gt;</span>
</div>

CSS

td {
    width: 50px;
    height: 50px;
    border: 2px solid #000;
}
td.red {
    background: #FF0000;
}
td.green {
    background: #00FF00;
}
















































/* EPAM LOGO © EPAM Systems Inc. jQuery course */
#epam-left-bracket,
#epam-name-text,
#epam-right-bracket {
    display: inline-block !important;
    padding: 0 !important;
    margin: 0 !important;
    border: none !important;    
    width: initial !important;    
    height: initial !important;
    line-height: 18px !important;
    font-family: sans-serif !important;
    font-size: 16px !important;
    text-transform: none !important;
    text-decoration: none !important;
    color: rgb(58, 186, 205) !important;
    background: transparent !important;
}

#epam-name-text {
    color: rgb(255,255,255) !important;
}

#epam-logo-button {
    display: block !important;
    padding: 0 !important;
    margin: 0 !important;
    border: none !important;
    width: 72px !important;
    height: initial !important;
    line-height: initial !important;
    text-align: center !important;
    position: absolute !important;
    bottom: 10px !important;
    right: 10px !important;
    background: rgb(70, 69, 71) !important;
    box-shadow: 0 0 5px 4px rgb(70, 69, 71) !important;
}

#epam-logo-button:hover {
    cursor: pointer !important;
}

JavaScript

/*
$( "td" ).on( "click", function(){
	$( this ).toggleClass( "red" );
});
*/
/*
$( ".add" ).on( "click", function(){
	$( "<tr><td></td><td></td><td></td><td></td><td></td><td></td></tr>" ).appendTo( "table" );
});
*/
/*
$( "table" ).on( "click", "td", function(){
	$( this ).toggleClass( "red" );
});
*/
/*
var curClass = "";
$( "table" ).on( "click", "td", function(){
    curClass = $(":checked").val();
    if( $(this).attr( "class" ) === curClass ){
    	$( this ).toggleClass( curClass );
        console.log('here');
    }
    else {
    	$( this ).removeAttr( "class" ).addClass( curClass );
    }	
});
*/
/*
$( "table" ).on( "myCustomEvent", "td", function( event, colorClass ) {
  $( this ).removeAttr( "class" ).addClass( colorClass ).siblings().addClass( colorClass );
});
$( ".rowColor" ).on( "click", function(){
    
	$( "td."+curClass).trigger( "myCustomEvent", curClass );
});
*/
/*
var delay = 0;
$( ".snakeEffect" ).on("click", function(){
	$( "td" ).each(function(){
    	$(this).delay(delay).animate({opacity:0},500);
        delay += 100;
    });
    delay = 0;
    $( "td" ).each(function(){
    	$(this).delay(delay+600).animate({opacity:1},500);
        delay += 100;
    });
        
}) 
*/



































// EPAM LOGO © EPAM Systems Inc. jQuery course
// epam shake animation
jQuery.fn.epamShake = function(intShakes, intDistance, intDuration) {
	$(this).css("position","relative"); 
	for (var x=1; x<=intShakes; x++) {
        $(this).animate({left:(intDistance*-1)}, (((intDuration/intShakes)/4)))
    		.animate({left:intDistance}, ((intDuration/intShakes)/2))
    		.animate({left:0}, (((intDuration/intShakes)/4)));
	}
	return this;
};

var epamButtonFlag = true;

$("#epam-logo-button").on("click", function(){
    if (epamButtonFlag === false) {window.open("http://www.epam.com/careers/job-listings?sort=best_match&query=JavaScript+Developer&department=all&city=all&country=Belarus");}
    epamButtonFlag = false;
   ...