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..f137ec2
--- /dev/null
+++ b/script.js
@@ -0,0 +1,40 @@
+console.log("hello script js");
+
+//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;
+ }
+