From 1dccf446cf8caf7aad0d2ff163f35af05226b606 Mon Sep 17 00:00:00 2001
From: Magues17 <mikel.d.campbell@gmail.com>
Date: Wed, 8 Feb 2023 19:08:46 -0600
Subject: [PATCH] tic-tac-toe

---
 index.html | 22 ++++++++++++++++++++--
 scripts.js |  8 +++++++-
 2 files changed, 27 insertions(+), 3 deletions(-)

diff --git a/index.html b/index.html
index 19d0dee..3d762af 100644
--- a/index.html
+++ b/index.html
@@ -20,8 +20,22 @@ <h1>Welcome to Tic Tac Toe</h1>
         <tr>
           <!-- the onclick calls a function called "handleClick" and passes itself to it -->
           <td id='top-left' onclick="handleClick(this)" ></td>
-          <td id='top-middle'></td>
-          <td></td>
+          <td id='top-middle' onclick="handleClick(this)"></td>
+          <td id='top-right' onclick="handleClick(this)"></td>
+        </tr>
+        <tr>
+  
+          <td id='middle-left' onclick="handleClick(this)" ></td>
+          <td id='middle-middle' onclick="handleClick(this)"></td>
+          <td id='middle-right' onclick="handleClick(this)"></td>
+
+          <tr>
+  
+            <td id='bottom-left' onclick="handleClick(this)" ></td>
+            <td id='bottom-middle' onclick="handleClick(this)"></td>
+            
+            <td id='bottom-right' onclick="handleClick(this)"></td>
+          </tr>
         </tr>
         <!-- @TODO create new rows and cells for the rest of your TTT board. -->
         <!-- @TODO give each new cell an id & an event listener to call the "handleClick" function -->
@@ -29,3 +43,7 @@ <h1>Welcome to Tic Tac Toe</h1>
     </div>
   </body>
 </html>
+
+
+
+
diff --git a/scripts.js b/scripts.js
index ba09e74..aaea393 100644
--- a/scripts.js
+++ b/scripts.js
@@ -42,6 +42,8 @@ const addMarker = (id) => {
   // @TODO-1: Open the console tab in your Chrome Inspector Tool and click on the top-left square to see what's logged to the console. 
   console.log(`*** The current marker is:  ${currentMarker}. ***`)
   console.log(`Therefore, a  "${currentMarker}"  should be placed in the square with the id:  ${id}`)
+
+ document.getElementById(id).innerHTML = currentMarker
   
   // @TODO-2: Build a line of code that will set the innerHTML property of the element that was clicked to the "currentMarker"
   
@@ -51,7 +53,7 @@ const addMarker = (id) => {
   // document
   // .innerHTML 
 
-  changeMarker()
+  changeMarker(currentMarker)
 }
 
 
@@ -93,6 +95,10 @@ const resetBoard = () => {
   // =
   // document
   // const
+
+  const squares = document.getElementsByTagName("td");
+
+
   
   // loops over the HTML Collection of TDs and clears out the Xs and Os
   for (i=0; i < squares.length; i++) {