Display alert after conditions are met

debugcn Published at Dev

Tariq Sherriff

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

all cells in the table have been applied a background color
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>

Aziz

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>

Collected from the Internet

Please contact [email protected] to delete if infringement.