Merge pull request #2 from TanHongIT/javascript-setup

Javascript setup

Author: tanhongit

public/css/style.css

@@ -1,20 +1,38 @@
 td {
-    border: 2px solid #333;
-    height: 100px;
-    width: 100px;
-    text-align: center;
+    border        : 2px solid #333;
+    height        : 100px;
+    width         : 100px;
+    text-align    : center;
     vertical-align: middle;
-    font-family: "Comic Sans MS", cursive, sans-serif;
-    font-size: 70px;
-    cursor: pointer;
+    font-family   : "Comic Sans MS", cursive, sans-serif;
+    font-size     : 70px;
+    cursor        : pointer;
 }
-table{
+
+table {
     border-collapse: collapse;
-    position: absolute;
-    left: 50%;
-    margin-left: -155px;
-    top: 50px;
+    position       : absolute;
+    left           : 50%;
+    margin-left    : -155px;
+    top            : 50px;
 }
-table tr:first-child td{
+
+table tr:first-child td {
     /* border-top: 0; */
+}
+
+.endgame {
+    display         : none;
+    width           : 200px;
+    top             : 120px;
+    background-color: rgba(37, 167, 54, 0.8);
+    position        : absolute;
+    left            : 50%;
+    margin-left     : -100px;
+    padding-top     : 50px;
+    padding-bottom  : 50px;
+    text-align      : center;
+    border-radius   : 5px;
+    color           : white;
+    font-size       : 2em;
 }

public/js/script.js

@@ -0,0 +1,26 @@
+
+var origBoard;
+const oPlayer = 'O';
+const cells = document.querySelectorAll('.cell');
+startGame();
+
+function startGame() {
+    document.querySelector(".endgame").style.display = "none";
+    origBoard = Array.from(Array(9).keys());
+    console.log(origBoard);
+    for (var i = 0; i < cells.length; i++) {
+        cells[i].innerText = ''; //clear
+        cells[i].style.removeProperty('background-color');
+        //add a event process vào click mouse event
+        cells[i].addEventListener('click', turnClick, false);
+    }
+}
+
+
+function turnClick(square) {
+    // // write down the ID of any cell clicked
+    console.log(square.target.id)
+
+    // pass in the ID that clicking 
+    turn(square.target.id,oPlayer)
+}