Untitled

<!DOCTYPE html>
<html>
<head>
  <title>101 Squares</title>
</head>
<body>
  <script>
    // Create row number
    var numberOfRows = 0;

    // Create the first Array
    var array = [];

    // Create the second Array
    var secondArray = [];

    function generateRows()
    {
      // If it is the first time, call initial array
      if(numberOfRows == 0)
      {
        createInitialArray();
        numberOfRows = numberOfRows + 1;
      }

      else
      {
        createNewArray();
        numberOfRows = numberOfRows + 1;
      }
    }

    function createInitialArray()
    {
      // Loop 101 times
      for(i = 0; i < 101; i++)
      {
        // Create the Div
        var div = document.createElement("Div");
        div.innerHTML = " ";
        div.style.width = "8px";
        div.style.height = "8px";
        div.style.border = "1px solid red";
        div.style.boxSizing = "border-box";
        div.style.float = "left";

        // Create a random number between zero and one
        var zeroOrOne = Math.floor(Math.random() * 2) + 0 ;

        if(zeroOrOne == 0)
        {
          // Style the Div
          div.style.backgroundColor = "black";

          // Set the array[i] to be zero
          array[i] = zeroOrOne;
        }

        else if(zeroOrOne == 1)
        {
          // Style the Div
          div.style.backgroundColor = "white";

          // Set the array[i] to be one
          array[i] = zeroOrOne;
        }

        // Add the div to the document
        document.body.appendChild(div);
      }

      // Create the new line
      var breakLine = document.createElement("breakLine");
      breakLine.innerHTML = "<br>";
      document.body.appendChild(breakLine);
    }

    function createNewArray()
    {
      // Loop 101 times
      for(i = 0; i < 101; i++)
      {
        // Create the Div
        var div = document.createElement("Div");
        div.innerHTML = " ";
        div.style.width = "8px";
        div.style.height = "8px";
        div.style.border = "1px solid red";
        div.style.boxSizing = "border-box";
        div.style.float = "left";

        if(i == 0)
        {
          if(array[100] == 0)
          {
            div.style.backgroundColor = "black";
            array[i] = 0;
          }

          else
          {
            div.style.backgroundColor = "white";
            array[i] = 1;
          }
        }

        else if(i == 100)
        {
          if(array[0] == 0)
          {
            div.style.backgroundColor = "black";
            array[i] = 0;
          }

          else
          {
            div.style.backgroundColor = "white";
            array[i] = 1;
          }
        }

        else if(array[i - 1] == 0 && array[i] == 0 && array[i + 1] == 0)
        {
          div.style.backgroundColor = "black";
          array[i] = 0;
        }

        else if(array[i - 1] == 0 && array[i] == 0 && array[i + 1] == 1)
        {
          div.style.backgroundColor = "white";
          array[i] = 1;
        }

        else if(array[i - 1] == 0 && array[i] == 1 && array[i + 1] == 0)
        {
          div.style.backgroundColor = "black";
          array[i] = 0;
        }

        else if(array[i - 1] == 0 && array[i] == 1 && array[i + 1] == 1)
        {
          div.style.backgroundColor = "black";
          array[i] = 0;
        }

        else if(array[i - 1] == 1 && array[i] == 0 && array[i + 1] == 0)
        {
          div.style.backgroundColor = "white";
          array[i] = 1;
        }

        else if(array[i - 1] == 1 && array[i] == 0 && array[i + 1] == 1)
        {
          div.style.backgroundColor = "black";
          array[i] = 0;
        }

        else if(array[i - 1] == 1 && array[i] == 1 && array[i + 1] == 0)
        {
          div.style.backgroundColor = "black";
          array[i] = 0;
        }

        else if(array[i - 1] == 1 && array[i] == 1 && array[i + 1] == 1)
        {
          div.style.backgroundColor = "white";
          array[i] = 1;
        }

        // Add the div to the document
        document.body.appendChild(div);
      }

      // Create the new line
      var breakLine = document.createElement("breakLine");
      breakLine.innerHTML = "<br>";
      document.body.appendChild(breakLine);
    }
  </script>

  <script>
    for(j = 0; j < 50; j++)
    {
        generateRows();
    }
  </script>


<script id="jsbin-source-css" type="text/css">

</script>
</body>
</html>