Tariq Sherriff Tariq Sherriff - 3 months ago 8
CSS Question

Display alert after conditions are met

I need help with modifying the code below. I would like it to display an alert only when two conditions are met.


  1. all cells in the table have been applied a background color

  2. number of Red cells equal number of Yellow cells - Completed



The code below meets the 2nd requirement and I need help on the 1st requirement



jQuery(function() {

var brush = "white_block";

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

jQuery('td').on('click',function() {

jQuery(this).removeClass('white_block yellow_block red_block').addClass(brush);

var reds = jQuery('.red_block').length,
yellows = jQuery('.yellow_block').length;

if (reds == yellows) {
setTimeout(function() {alert("Finished!")}, 100);
}

});

});

.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;
}

<html>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<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">

<table>
<tr>
<td class="block yellow_block"></td>
<td class="block yellow_block"></td>
<td class="block yellow_block"></td>
<td class="block red_block"></td>
<td class="block red_block"></td>
<td class="block red_block"></td>
</tr>
<tr>
<td class="block yellow_block"></td>
<td class="block yellow_block"></td>
<td class="block yellow_block"></td>
<td class="block red_block"></td>
<td class="block red_block"></td>
<td class="block red_block"></td>
</tr>
<tr>
<td class="block yellow_block"></td>
<td class="block yellow_block"></td>
<td class="block yellow_block"></td>
<td class="block red_block"></td>
<td class="block red_block"></td>
<td class="block red_block"></td>
</tr>
<tr>
<td class="block yellow_block"></td>
<td class="block yellow_block"></td>
<td class="block yellow_block"></td>
<td class="block red_block"></td>
<td class="block red_block"></td>
<td class="block red_block"></td>
</tr>
<tr>
<td class="block yellow_block"></td>
<td class="block yellow_block"></td>
<td class="block yellow_block"></td>
<td class="block red_block"></td>
<td class="block red_block"></td>
<td class="block red_block"></td>
</tr>
</table>

</html>




Answer

You could create a custom function to check your conditions and call it each item a cell is clicked.

The function will check for total cells, how many are colored and if the reds equal yellows:

jQuery(function() {
  var brush = "white_block";
  jQuery('input.block').on('click', function() {
    brush = jQuery(this).data('brush');
  });
  function cellCheck() {
    var reds = jQuery('#cellsTable .red_block').length,
        yellows = jQuery('#cellsTable .yellow_block').length,
        cells_colored = reds + yellows,
        cells_total = jQuery('#cellsTable 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>
<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">

<table id="cellsTable">
  <tr>
    <td class="block yellow_block"></td>
    <td class="block yellow_block"></td>
    <td class="block yellow_block"></td>
    <td class="block red_block"></td>
    <td class="block red_block"></td>
    <td class="block red_block"></td>
  </tr>
  <tr>
    <td class="block yellow_block"></td>
    <td class="block yellow_block"></td>
    <td class="block yellow_block"></td>
    <td class="block red_block"></td>
    <td class="block red_block"></td>
    <td class="block red_block"></td>
  </tr>
  <tr>
    <td class="block yellow_block"></td>
    <td class="block yellow_block"></td>
    <td class="block yellow_block"></td>
    <td class="block red_block"></td>
    <td class="block red_block"></td>
    <td class="block red_block"></td>
  </tr>
  <tr>
    <td class="block yellow_block"></td>
    <td class="block yellow_block"></td>
    <td class="block yellow_block"></td>
    <td class="block red_block"></td>
    <td class="block red_block"></td>
    <td class="block red_block"></td>
  </tr>
  <tr>
    <td class="block yellow_block"></td>
    <td class="block yellow_block"></td>
    <td class="block yellow_block"></td>
    <td class="block red_block"></td>
    <td class="block red_block"></td>
    <td class="block red_block"></td>
  </tr>
</table>

Comments