CODEWITHSUNDEEP
javascriptjqueryhtmlcss
Tariq Sherriff
Tariq Sherriff

Reputation: 109

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>

Upvotes: 1

Views: 353

Answers (3)

Aziz
Aziz

Reputation: 7783

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>

Upvotes: 1

jonju
jonju

Reputation: 2736

reds = jQuery('.red_block').length & yellows= jQuery('.yellow_block').length will find every elements with classes red_block & yellow_block other than. I changed this to reds = jQuery('td.red_block').length & yellows= jQuery('td.yellow_block').length respective to find only tds.

1.Find total of td.red_block => reds & td.yellow_block=>yellows.

2.Calculate total of reds & yellows => totalbg.

3.Find total of all td with class .block => totaltd;

4.If reds==yellows And totalbg==totaltd then show alert()

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('td.red_block').length,
        yellows = jQuery('td.yellow_block').length,
        totaltd=$('td.block').length,
        totalbg = reds + yellows;
        

    if (reds == yellows && totalbg==totaltd) {
      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>

Upvotes: 0

Ibrahim Khan
Ibrahim Khan

Reputation: 20740

You need to count all td with class block and all td with class red_block or yellow_block and then compare them like following.

var brush = "white_block";

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

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

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

    var all = $('td.block').length,
      colored = $('td.red_block, td.yellow_block').length,
      reds = $('td.red_block').length,
      yellows = $('td.yellow_block').length;

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

Updated Fiddle

Upvotes: 0

Related Questions