MunchingSquares.html

<!-- Munching Squares Anirudh -->

<!--
https://codepen.io/anon/pen/PJzqya
-->
<table>
<tbody>
<!-- ko foreach : row -->
  <tr>
  <!-- ko foreach : $parent.coloumn-->
    <td data-bind="style:{'background-color':($data^$parent)<$parents[1].k()?'black':'white'}"></td>
    <!-- /ko -->
  </tr>
 <!-- /ko -->
 </tbody>
</table>
<style>
  table, th, td, tr{
    border: 1px solid black;
    width: 30em;
    height: 2em;
  }
</style>
<script src="https://cdnjs.cloudflare.com/ajax/libs/knockout/3.4.2/knockout-debug.js"></script>
<script>
  // This is a simple *viewmodel* - JavaScript that defines the data and behavior of your UI
function AppViewModel() {
    var self= this;
    self.row= [0,1,2,3,4,5,6,7];
    self.coloumn= [0,1,2,3,4,5,6,7];
    self.k = ko.observable(0);
    
    setInterval(function(){ 
        self.k((self.k()+1)%9);
        console.log(self.k()); 
        
    }, 300);

}

// Activates knockout.js
ko.applyBindings(new AppViewModel());
</script>