Cunekt 4

by nukeboy212

HTML

<h1>
Cunekt 4 |0.0.1 Pre-Alpha| 
</h1>

<table border="2">
  <tr id="1">
    <td class="col1"></td>
    <td class="col2"></td>
    <td class="col3"></td>
    <td class="col4"></td>
    <td class="col5"></td>
    <td class="col6"></td>
    <td class="col7"></td>
  </tr>
  <tr id="2">
    <td class="col1"></td>
    <td class="col2"></td>
    <td class="col3"></td>
    <td class="col4"></td>
    <td class="col5"></td>
    <td class="col6"></td>
    <td class="col7"></td>
  </tr>
  <tr id="3">
    <td class="col1"></td>
    <td class="col2"></td>
    <td class="col3"></td>
    <td class="col4"></td>
    <td class="col5"></td>
    <td class="col6"></td>
    <td class="col7"></td>
  </tr>

  <tr id="4">
    <td class="col1"></td>
    <td class="col2"></td>
    <td class="col3"></td>
    <td class="col4"></td>
    <td class="col5"></td>
    <td class="col6"></td>
    <td class="col7"></td>
  </tr>
  <tr id="5">
    <td class="col1"></td>
    <td class="col2"></td>
    <td class="col3"></td>
    <td class="col4"></td>
    <td class="col5"></td>
    <td class="col6"></td>
    <td class="col7"></td>
  </tr>
  <tr id="6">
    <td class="col1"></td>
    <td class="col2"></td>
    <td class="col3"></td>
    <td class="col4"></td>
    <td class="col5"></td>
    <td class="col6"></td>
    <td class="col7"></td>
  </tr>
</table>
<h2>
YELLOW TURN
</h2>
<h3>
a random peice of txt
</h3>

CSS

h1 {
  text-align: center;
}

td {
  width: 65px;
  height: 65px;
  border: 2px solid blue
}

table {
  border: 2px solid blue;
  margin: auto;
}

h2 {
  font-family: arial;
  text-align: center;
  color: green;
}

.red {
  background-color: red
}

.yellow {
  background-color: yellow
}

JavaScript

var coll1 = []
var coll2 = []
var coll3 = []
var coll4 = []
var coll5 = []
var coll6 = []
var coll7 = []
colory = "Yellow";
Color = ""
$(".col1").click(function() {
  if (colory == "Red") {
    $("#" + (6 - coll1.length) + ">.col1").addClass("yellow")
    colory = "Yellow";

    console.log("secret peice of crup")
  } else if (colory == "Yellow") {

    $("#" + (6 - coll1.length) + ">.col1").addClass("red")
    colory = "Red";
  }
  coll1.push(colory);
  checkForVert();
});
$(".col2").click(function() {
checkForVert();
  if (colory == "Red") {
    $("#" + (6 - coll2.length) + ">.col2").addClass("yellow")
    colory = "Yellow";

    console.log("secret peice of crup")
  } else if (colory == "Yellow") {

    $("#" + (6 - coll2.length) + ">.col2").addClass("red")
    colory = "Red";
  }
  coll2.push(colory)
});

$(".col3").click(function() {

  if (colory == "Red") {

    $("#" + (6 - coll3.length) + ">.col3").addClass("yellow")
    colory = "Yellow";
    console.log("secret peice of crup")
  } else if (colory == "Yellow") {
    $("#" + (6 - coll3.length) + ">.col3").addClass("red")
    colory = "Red";
  }
 
  coll3.push(colory)
  checkForVert();
});

$(".col4").click(function() {

  if (colory == "Red") {
    $("#" + (6 - coll4.length) + ">.col4").addClass("yellow")
    colory = "Yellow";
    console.log("secret peice of crup")
  } else if (colory == "Yellow") {
    $("#" + (6 - coll4.length) + ">.col4").addClass("red")
    colory = "Red";
  }
  coll4.push(colory);
  checkForVert();
});
''

$(".col5").click(function() {

  if (colory == "Red") {
    $("#" + (6 - coll5.length) + ">.col5").addClass("yellow")
    colory = "Yellow";
    console.log("secret peice of crup")
  } else if (colory == "Yellow") {
    $("#" + (6 - coll5.length) + ">.col5").addClass("red")
    colory = "Red";
  }
  coll5.push(colory);
  checkForVert();
});

$(".col6").click(function() {
  if (colory == "Red") {
    $("#" + (6 - coll6.length) + ">.col6").addClass("yellow")
    colory =...