From bf7ac02792717a1bc45fb10d22d4fd56a900c043 Mon Sep 17 00:00:00 2001 From: andicodetrf Date: Wed, 17 Jun 2020 08:53:24 +0800 Subject: [PATCH 1/2] finished the first version --- index.html | 83 ++++++++++++++++++++++++++++++++++++++++++++++++++++++ script.js | 58 ++++++++++++++++++++++++++++++++++++++ 2 files changed, 141 insertions(+) create mode 100644 index.html create mode 100644 script.js diff --git a/index.html b/index.html new file mode 100644 index 0000000..49e3b88 --- /dev/null +++ b/index.html @@ -0,0 +1,83 @@ + + + + + + Andi TicTacToe + + + + + + +

Andi's NoScore TicTacToe

+
+
+
+
+
+
+
+
+
+
+
+
+ + + + + + + + + \ No newline at end of file diff --git a/script.js b/script.js new file mode 100644 index 0000000..e7cd6af --- /dev/null +++ b/script.js @@ -0,0 +1,58 @@ +//-----GLOBAL VAR ----- +let clickCycle = 0; +let evenOrOdd; + +const X = "X"; +const O = "O"; + + +//----DOM SELECT----- +const mainGrid = document.querySelector("#mainGrid") +const item = document.querySelector("#item") + + + +//-----FUNCTIONS------- +function checkEven(){ + if (clickCycle%2 === 0){ + evenOrOdd = "true" + } else { + evenOrOdd = "false" + } + return evenOrOdd; +} + + +function xTurn(itemTarget) { + itemTarget.innerText = X; + clickCycle++; +} + +function oTurn(itemTarget) { + itemTarget.innerText = O; + clickCycle++; +} + + +// --------EVENT LISTENER----------- + +mainGrid.addEventListener('click', function(e){ + let itemTarget = e.target; + // itemTarget.innerText = "x"; + checkEven(); + switch(evenOrOdd){ + case "true": + xTurn(itemTarget); + break; + case "false": + oTurn(itemTarget); + break; + default: + console.log("default") + } + + console.log(itemTarget.innerText); +}) + + + From c4500945c84635d7374abff4ebf3a6554fda4f8d Mon Sep 17 00:00:00 2001 From: andicodetrf Date: Thu, 18 Jun 2020 08:05:54 +0800 Subject: [PATCH 2/2] finished version 2 but unable to fix span size from moving when there is a text within --- index.html | 79 +++++------------------------------------------------- script.js | 75 +++++++++++++++++++++++++++++++++++++-------------- 2 files changed, 62 insertions(+), 92 deletions(-) diff --git a/index.html b/index.html index 49e3b88..ba6525c 100644 --- a/index.html +++ b/index.html @@ -5,79 +5,14 @@ Andi TicTacToe - - - - - -

Andi's NoScore TicTacToe

-
-
-
-
-
-
-
-
-
-
-
-
- - - - - - - - + \ No newline at end of file diff --git a/script.js b/script.js index e7cd6af..ef61663 100644 --- a/script.js +++ b/script.js @@ -1,50 +1,85 @@ +//CREATE BOARD +let body = document.querySelector("body"); +body.style.margin = "0px"; +body.style.padding = "0px"; + +//CREATED DIV AND SPANS FOR GAMEBOARD +const gameboard = document.createElement("div") +gameboard.setAttribute("id", "gameboard") +gameboard.style.border = "2px solid red" +gameboard.style.width = "600px" +gameboard.style.height = "470px" +gameboard.style.textAlign = "center" +gameboard.style.backgroundColor = "rgba(64,224,208,0.5)" + +document.body.appendChild(gameboard); + +for (let i = 1; i < 4; i++){ + let createDiv = document.createElement("div") + createDiv.setAttribute("id", "row"+i); + createDiv.style.marginTop= "100px"; + // createDiv.style.backgroundColor= "blue"; + // createDiv.style.padding= "5px"; + // gameboard.appendChild(createDiv) + + for (let j = 1; j < 4; j++){ + let createBox = document.createElement("span") + createBox.setAttribute("id","r" + i + "span" + j); + //createBox.innerHTML = "" + // createBox.style.width = "50px"; //doesnt work its not a box + // createBox.style.height = "50px"; //ditto + createBox.style.backgroundColor = "lightgray"; + createBox.style.border = "2px solid black"; + createBox.style.padding = "50px 70px"; + createBox.style.margin = "10px -1px"; + + createDiv.appendChild(createBox) + } + + gameboard.appendChild(createDiv) + +} + + + //-----GLOBAL VAR ----- -let clickCycle = 0; -let evenOrOdd; +let state = 0; const X = "X"; const O = "O"; //----DOM SELECT----- -const mainGrid = document.querySelector("#mainGrid") -const item = document.querySelector("#item") +const gameboardSel = document.querySelector("#gameboard") +const item = document.querySelector("span") //-----FUNCTIONS------- -function checkEven(){ - if (clickCycle%2 === 0){ - evenOrOdd = "true" - } else { - evenOrOdd = "false" - } - return evenOrOdd; -} - function xTurn(itemTarget) { itemTarget.innerText = X; - clickCycle++; + itemTarget.style.fontSize = "20px"; + state = 1; } function oTurn(itemTarget) { itemTarget.innerText = O; - clickCycle++; + itemTarget.style.fontSize = "20px"; + state = 0; } // --------EVENT LISTENER----------- -mainGrid.addEventListener('click', function(e){ +gameboardSel.addEventListener('click', function(e){ let itemTarget = e.target; // itemTarget.innerText = "x"; - checkEven(); - switch(evenOrOdd){ - case "true": + switch(state){ + case 0: xTurn(itemTarget); break; - case "false": + case 1: oTurn(itemTarget); break; default: