Display alert when two tables color congruent patterns match

Question

I need help with modifying the code below.

I have two tables,

table one has two rows and six columns
table two has two rows and six columns with each cell colored either red or yellow creating two congruent shapes.

I want to display an alert when the cells in "table one" match the congruent shapes and their colors of "table two".

*note... You can change the color of the cells by selecting one of the top left buttons (white, yellow or red).

**Is there a way that allows for two solutions that match table two? I've included an image as an example.

two solutions

jQuery(function() {
  var brush = "white_block";
  jQuery('input.block').on('click', function() {
    brush = jQuery(this).data('brush');
  });

  function cellCheck() {
    var reds = jQuery('#two .red_block').length,
      yellows = jQuery('#two .yellow_block').length,
      cells_colored = reds + yellows,
      cells_total = jQuery('#two td').length;

    //    // condition 1: all colored 
    //    if (cells_colored == cells_total) {
    //      setTimeout(function() {alert("All Colored");}, 100);
    //    }
    //    // condition 2: equal colors
    //    if (reds == yellows) {
    //      setTimeout(function() {alert("Equal colors");}, 100);
    //    }
    //    // condition 3: both conditions
    //    if (cells_colored == cells_total && reds == yellows) {
    //      setTimeout(function() {alert("Finished!");}, 100);
    //    }
  }
  jQuery('td').on('click', function() {
    jQuery(this).removeClass('white_block yellow_block red_block').addClass(brush);
    cellCheck();
  });
});

.block {
  border: thin solid #000000;
  width: 59px;
  height: 57px;
}

.white_block {
  background-color: #FFFFFF;
}

.red_block {
  background-color: #FF0000;
}

.yellow_block {
  background-color: #FFFF00;
}

table {
  margin: 1em 0 0;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<body>
  <br>Buttons:<br>
  <input type="button" class="block white_block" data-brush="white_block">
  <input type="button" class="block yellow_block" data-brush="yellow_block">
  <input type="button" class="block red_block" data-brush="red_block">
  <br>
  <br> Table One:
  <table id="one">
    <tr>
      <td class="block white_block"></td>
      <td class="block white_block"></td>
      <td class="block white_block"></td>
    </tr>
    <tr>
      <td class="block white_block"></td>
      <td class="block white_block"></td>
      <td class="block white_block"></td>
    </tr>
  </table>
  <br>
  <br> Table Two:
  <table id="two">
    <tr>
      <td class="block yellow_block"></td>
      <td class="block yellow_block"></td>
      <td class="block red_block"></td>
    </tr>
    <tr>
      <td class="block yellow_block"></td>
      <td class="block red_block"></td>
      <td class="block red_block"></td>
    </tr>
  </table>
  <br>
  <br>
</body>

SRK · Accepted Answer

jQuery(function() {
  var brush = "white_block";
  jQuery('input.block').on('click', function() {
    brush = jQuery(this).data('brush');
  });

  function cellCheck() {
   $one = $("#one").html().replace(/\s/g,'');
   $two = $("#two").html().replace(/\s/g,'');
   $three = $("#three").html().replace(/\s/g,'');
   if($one === $two){
   alert("match with two");
   }
   if($one === $three){
   alert("match with three");
   }
  }
  jQuery('td').on('click', function() {
    jQuery(this).removeClass('white_block yellow_block red_block').addClass(brush);
    cellCheck();
    getsolution();
  });
 function getsolution(){
  $("#two").clone().each(function() {
    var $this = $(this);
    var newrows = [];
    var firstTr = '';
    var i = 0;
    $this.find("tr").each(function(){
        if(i == 0){
         firstTr = "<tr>"+$(this).html()+"</tr>";
         i++;
         }else{
         $("#three").html("<tr>"+$(this).html()+"</tr>");
         $("#three").append(firstTr);
         }            
    });       
});
}
getsolution();
});

.block {
  border: thin solid #000000;
  width: 59px;
  height: 57px;
}

.white_block {
  background-color: #FFFFFF;
}

.red_block {
  background-color: #FF0000;
}

.yellow_block {
  background-color: #FFFF00;
}

table {
  margin: 1em 0 0;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<body>
  <br>Buttons:<br>
  <input type="button" class="block white_block" data-brush="white_block">
  <input type="button" class="block yellow_block" data-brush="yellow_block">
  <input type="button" class="block red_block" data-brush="red_block">
  <br>
  <br> Table One:
  <table id="one">
    <tr>
      <td class="block white_block"></td>
      <td class="block white_block"></td>
      <td class="block white_block"></td>
    </tr>
    <tr>
      <td class="block white_block"></td>
      <td class="block white_block"></td>
      <td class="block white_block"></td>
    </tr>
  </table>
  <br>
  <br> Table Two:
  <table id="two">
<tr>
  <td class="block yellow_block"></td>
  <td class="block yellow_block"></td>
  <td class="block red_block"></td>
</tr>
<tr>
  <td class="block yellow_block"></td>
  <td class="block red_block"></td>
  <td class="block red_block"></td>
</tr>
  </table>
  <br>
  <br>
  Three
  <table id="three">
  </table>
</body>

The easiest way to check if two tables html is same. You can take the HTML and replace all the white spaces from them using regex. Now check if two strings are equal.

Sarvan Kumar · Answer

Please use this fiddle

jQuery(function() {
  var brush = "white_block";
  jQuery('input.block').on('click', function() {
    brush = jQuery(this).data('brush');
  });
	
	var arr_t_one = [];
  var arr_t_two = [];
  var s = 0;
  function cellCheck() {
    var reds = jQuery('#two .red_block').length,
      yellows = jQuery('#two .yellow_block').length,
      cells_colored = reds + yellows,
      cells_total = jQuery('#two td').length;
      arr_t_one = [];
      arr_t_two = [];
			$( "#one td" ).each(function( index ) {
 				arr_t_one.push($( this ).attr('class') );
			});
      $( "#two td" ).each(function( index ) {
 				arr_t_two.push($( this ).attr('class') );
			});
      var is_same = (arr_t_one.length == arr_t_two.length) && arr_t_one.every(function(element, index) {
        return element === arr_t_two[index]; 
    	});
      var is_not_same = (arr_t_one.length == arr_t_two.length) && arr_t_one.every(function(element, index) {
        return element !== arr_t_two[index]; 
    	});
    if(is_same==true)
    	setTimeout(function() {alert("Exact Match");}, 100);
    if(is_not_same==true)
      setTimeout(function() {alert("Not matched Exactly");}, 100); 
  }
  
  jQuery('td').on('click', function() {
    jQuery(this).removeClass('white_block yellow_block red_block').addClass(brush);
    if(brush!='white_block'){
      cellCheck();
    }
  });
});

.block {
  border: thin solid #000000;
  width: 59px;
  height: 57px;
}

.white_block {
  background-color: #FFFFFF;
}

.red_block {
  background-color: #FF0000;
}

.yellow_block {
  background-color: #FFFF00;
}

table {
  margin: 1em 0 0;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<body>
  <br>Buttons:<br>
  <input type="button" class="block white_block" data-brush="white_block">
  <input type="button" class="block yellow_block" data-brush="yellow_block">
  <input type="button" class="block red_block" data-brush="red_block">
  <br>
  <br> Table One:
  <table id="one">
    <tr>
      <td class="block white_block"></td>
      <td class="block white_block"></td>
      <td class="block white_block"></td>
    </tr>
    <tr>
      <td class="block white_block"></td>
      <td class="block white_block"></td>
      <td class="block white_block"></td>
    </tr>
  </table>
  <br>
  <br> Table Two:
  <table id="two">
    <tr>
      <td class="block yellow_block"></td>
      <td class="block yellow_block"></td>
      <td class="block red_block"></td>
    </tr>
    <tr>
      <td class="block yellow_block"></td>
      <td class="block red_block"></td>
      <td class="block red_block"></td>
    </tr>
  </table>
  <br>
  <br>
</body>

I have checked the class name for exact match..

Display alert when two tables color congruent patterns match

Tags:

javascript

html

jquery

css

Tariq Sherriff

2 Answers

SRK

Sarvan Kumar

Recent Activity

Donate For Us

Display alert when two tables color congruent patterns match

Tags:

javascript

html

jquery

css

Tariq Sherriff

2 Answers

SRK

Sarvan Kumar

Related questions

Recent Activity

Donate For Us