From a530ed921aa7baaf7b05fa5121c5bfa3b629b213 Mon Sep 17 00:00:00 2001
From: Isabella <65014479+izzycsy@users.noreply.github.com>
Date: Wed, 17 Jun 2020 01:29:55 +0800
Subject: [PATCH 1/2] First Ver
---
index.html | 34 +++++++++++++++++++++++++++++++
script.js | 60 ++++++++++++++++++++++++++++++++++++++++++++++++++++++
styles.css | 60 ++++++++++++++++++++++++++++++++++++++++++++++++++++++
3 files changed, 154 insertions(+)
create mode 100644 index.html
create mode 100644 script.js
create mode 100644 styles.css
diff --git a/index.html b/index.html
new file mode 100644
index 0000000..cb7cba5
--- /dev/null
+++ b/index.html
@@ -0,0 +1,34 @@
+
+
+
+
+
+
+
+
+ TIC TAC TOE
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
\ No newline at end of file
diff --git a/script.js b/script.js
new file mode 100644
index 0000000..3350edc
--- /dev/null
+++ b/script.js
@@ -0,0 +1,60 @@
+console.log("hello script js");
+
+// var box = [
+// [".box1", ".box2", ".box3"],
+// [".box4", ".box5", ".box6"],
+// [".box7", ".box8", ".box9"]
+// ];
+
+// //Create var for DOM elements
+// var button = document.querySelector('.start');
+// //var grid = document.querySelector('.grid-container')
+// var restart = document.querySelector('.restart');
+// //var title = document.querySelector('.title')
+
+// //To start the game
+// var startGame = function() {
+// button.addEventListener("click", function);
+// button.classList.remove("disappear");
+// button.classList.add("disappear");
+// runGame = true;
+// }
+
+//Create var for game
+var playerTurn = 0;
+
+//Create DOM for 9 boxes
+var boxOne = document.querySelector(".box1");
+var boxTwo = document.querySelector(".box2");
+var boxThree = document.querySelector(".box3");
+var boxFour = document.querySelector(".box4");
+var boxFive = document.querySelector(".box5");
+var boxSix = document.querySelector(".box6");
+var boxSeven = document.querySelector(".box7");
+var boxEight = document.querySelector(".box8");
+var boxNine = document.querySelector(".box9");
+
+//Add DOM
+boxOne.addEventListener("click", getClick);
+boxTwo.addEventListener("click", getClick);
+boxThree.addEventListener("click", getClick);
+boxFour.addEventListener("click", getClick);
+boxFive.addEventListener("click", getClick);
+boxSix.addEventListener("click", getClick);
+boxSeven.addEventListener("click", getClick);
+boxEight.addEventListener("click", getClick);
+boxNine.addEventListener("click", getClick);
+
+//XO click function
+function getClick (event) {
+ var squareSelected = document.querySelector('.' + event.target.className);
+ if (playerTurn == 0){
+ // document.getElementById ("box9").innerHTML = "O"
+ squareSelected.innerHTML = "O";
+ playerTurn = 1;
+ } else {
+ //document.getElementById ("box9").innerHTML = "X"
+ squareSelected.innerHTML = "X";
+ playerTurn = 0;
+ }
+ }
diff --git a/styles.css b/styles.css
new file mode 100644
index 0000000..48d23ca
--- /dev/null
+++ b/styles.css
@@ -0,0 +1,60 @@
+body{
+ background-color:#e6e6e6;
+ align-content: center;
+ font-family: Arial, Helvetica, sans-serif;
+}
+
+h1{
+ font-size: 30px;
+ font-family: Arial, Helvetica, sans-serif;
+ text-align: center;
+ margin-top: 20px;
+ margin-bottom: 30px;
+}
+
+.game-board {
+ width: 600px;
+ height: 630px;
+ margin: 0 auto;
+ background-color: #666;
+ color: #fff;
+ border: 5px solid #fecc66;
+ border-radius: 8px;
+ display: grid;
+ grid-template: repeat(3, 1fr) / repeat(3, 1fr);
+ align-items: center;
+ text-align: center;
+}
+
+.box1, .box2, .box3,
+.box4, .box5, .box6,
+.box7, .box8, .box9 {
+ border: 5px solid #fecc66;
+ border-radius: 2px;
+ height: 200px;
+ font-family: Arial, Helvetica, sans-serif;
+ font-weight: bold;
+ font-size: 80px;
+ text-align: center;
+ display: flex;
+ justify-content: center;
+ align-items: center;
+}
+
+#restart {
+ background-color: none;
+ border: 5px solid #fecc66;
+ font-size: 20px;
+ font-family: Arial, Helvetica, sans-serif;
+ font-weight: bold;
+ padding: 10px 10px;
+ margin-top: 30px;
+ margin-bottom: 30px;
+ }
+
+ .button1 {
+ display: flex;
+ justify-content: center;
+ align-items: center;
+ }
+
From 1bced8a6f0af1e8e04dd36c5f3f1b3dc7c110fb8 Mon Sep 17 00:00:00 2001
From: Isabella <65014479+izzycsy@users.noreply.github.com>
Date: Wed, 17 Jun 2020 01:32:00 +0800
Subject: [PATCH 2/2] First Ver
---
script.js | 20 --------------------
1 file changed, 20 deletions(-)
diff --git a/script.js b/script.js
index 3350edc..f137ec2 100644
--- a/script.js
+++ b/script.js
@@ -1,25 +1,5 @@
console.log("hello script js");
-// var box = [
-// [".box1", ".box2", ".box3"],
-// [".box4", ".box5", ".box6"],
-// [".box7", ".box8", ".box9"]
-// ];
-
-// //Create var for DOM elements
-// var button = document.querySelector('.start');
-// //var grid = document.querySelector('.grid-container')
-// var restart = document.querySelector('.restart');
-// //var title = document.querySelector('.title')
-
-// //To start the game
-// var startGame = function() {
-// button.addEventListener("click", function);
-// button.classList.remove("disappear");
-// button.classList.add("disappear");
-// runGame = true;
-// }
-
//Create var for game
var playerTurn = 0;