JSFiddle - React, Tailwind, and code Playground

by supertrue

HTML

<!DOCTYPE html> 
<html> 
<head> 
  <meta http-equiv="content-type" content="text/html; charset=UTF-8"> 

</head> 
 <body>
    
        <p><a href="#" id="toggler">Click to toggle the solution.</a></p>
    
  <table id="table1" style='border-collapse: collapse;'>
    <tbody>
      <tr>
        <td align="center" valign="middle" class="random"></td>
        <td align="center" valign="middle" class="random"></td>
        <td align="center" valign="middle" class="random">&nbsp;</td>
        <td align="center" valign="middle" class="random">&nbsp;</td>
        <td align="center" valign="middle" class="random">&nbsp;</td>
        <td align="center" valign="middle" class="random">&nbsp;</td>
        <td align="center" valign="middle" class="random">&nbsp;</td>
        <td align="center" valign="middle" class="random">&nbsp;</td>
        <td align="center" valign="middle" class="random">&nbsp;</td>
        <td align="center" valign="middle" class="random">&nbsp;</td>
        <td align="center" valign="middle" class="nonrandom">cc</td>
        <td align="center" valign="middle" class="random">&nbsp;</td>
        <td align="center" valign="middle" class="random">&nbsp;</td>
        <td align="center" valign="middle" class="random">&nbsp;</td>
        <td align="center" valign="middle" class="random">&nbsp;</td>
        <td align="center" valign="middle" class="random">&nbsp;</td>
        <td align="center" valign="middle" class="random">&nbsp;</td>
        <td align="center" valign="middle" class="random">&nbsp;</td>
        <td align="center" valign="middle" class="random">&nbsp;</td>
        <td align="center" valign="middle" class="random">&nbsp;</td>
        <td align="center" valign="middle" class="random">&nbsp;</td>
        <td align="center" valign="middle" class="random">&nbsp;</td>
        <td align="center" valign="middle" class="random">&nbsp;</td>
      </tr>
      <tr>
        <td align="center" valign="middle" class="random">&nbsp;</td>
        <td...

CSS

.strong {
    background-color: #999;
    color: #000;
}

.weak {
    background-color:#fff;
    color: #999;
    }

body {

    font-family: "Bebas", "Knockout", "Marker Felt", "Lucida Grande", sans-serif;
    font-size: 17px;
    letter-spacing: 0em;
    color: #333;
    line-height: 12px;
    }

td, tr { 
border: 1px solid #999;
width: 25px;
height: 25px;
padding: 0px;
margin: 0px;
border-collapse:collapse; 
}

JavaScript

$(function() {
                
        $('#toggler').toggle(function() {
            
//            $('td.nonrandom').toggleClass('strong', 500);
//            $('td.random').toggleClass('weak', 500);
            
            $('td.nonrandom').animate({backgroundColor: "#999"}, 500);
         $('td.random').animate({backgroundColor: "#ddd"}, 500);  

/* what's the most efficient (i.e., with the least repetition of code) way to make the click toggle this animation? */     
            
            
        }, function() {
            $('td.nonrandom').animate({backgroundColor: "#fff"}, 500);  
            $('td.random').animate({backgroundColor: "#fff"}, 500);  
             
        });

    });