diff --git a/.DS_Store b/.DS_Store
new file mode 100644
index 0000000..6044282
Binary files /dev/null and b/.DS_Store differ
diff --git a/LICENSE b/LICENSE
new file mode 100644
index 0000000..5816f7b
--- /dev/null
+++ b/LICENSE
@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2023 Jacintha
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.
diff --git a/README.md b/README.md
index b568cff..5ba949e 100644
--- a/README.md
+++ b/README.md
@@ -1,22 +1,27 @@
-# 📊 Morning Challenge: Tic-Tac-Toe
-
-### Goal: Create a two player Tic-Tac-Toe game. The users should be able to click to place their X or O and if they win the program should mention their win in the DOM. Please make the game as OOP as possible.
-
-### How to submit your code for review:
-
-- Fork and clone this repo
-- Create a new branch called answer
-- Checkout answer branch
-- Push to your fork
-- Issue a pull request
-- Your pull request description should contain the following:
- - (1 to 5 no 3) I completed the challenge
- - (1 to 5 no 3) I feel good about my code
- - Anything specific on which you want feedback!
-
-Example:
-```
-I completed the challenge: 5
-I feel good about my code: 4
-I'm not sure if my constructors are setup cleanly...
-```
+# Tic-Tac-Toe
+
+
+
+# Tic-Tac-Toe Game
+It's Tic-Tac-Toe!
+View my project here: https://tic-tac-toe-rc.netlify.app/
+
+
+## How It's Made:
+Tech used: HTML, CSS, JavaScript
+
+This Tic-Tac-Toe is primarily a Javascript exercise. This is my first project experimenting with object oriented programming (OOP). I started by coding using procedural programming and then looking for patterns in my code to attempt to make it more object oriented. It was no easy task, but I'm glad I had the opportunity to flex my OOP muscles for the first time and give it a try.
+
+
+
+## Lessons Learned:
+It was very confusing trying to figure out how the different methods in a class interact and communicate with each other without getting tangled up. Getting comfortable with the _this_ keyword and how to access and call different methods all while understanding what is happening was also quite a challenge. Although I stumbled quite a bit in this project, I am excited to keep trying because I know there is so much power in OOP.
+
+## Examples:
+Take a look at similar projects!
+
+NASA Picture of the Day Selector: https://github.com/JacinthaDev/NASA
+
+Avatar The Last Airbender Slot Machine: https://github.com/JacinthaDev/Slot-Machine/tree/answer
+
+To-do List: https://github.com/JacinthaDev/Todo-list/tree/answer
diff --git a/assets/.DS_Store b/assets/.DS_Store
new file mode 100644
index 0000000..1482224
Binary files /dev/null and b/assets/.DS_Store differ
diff --git a/assets/css/main.css b/assets/css/main.css
new file mode 100644
index 0000000..095dfe0
--- /dev/null
+++ b/assets/css/main.css
@@ -0,0 +1,61 @@
+body{
+ margin: 0;
+ padding: 0;
+ display: flex;
+ flex-direction:column; /*to stack items vertically*/
+ justify-content: center;
+ align-items: center;
+ height: 100vh;
+
+ background-color: pink;
+ font-family: 'Roboto', sans-serif;
+
+}
+
+#board{
+ width: 300px;
+ height: 300px;
+ background: black;
+ display: flex;
+ flex-wrap:wrap;
+ border: solid 1px red;
+
+}
+
+.box{
+ width: 100px;
+ height: 100px;
+ background-color: white;
+ border: solid 2px black;
+ box-sizing: border-box;
+ display: flex;
+ justify-content: center;
+ align-items: center;
+}
+
+
+.circle{
+ height: 90px;
+ width:90px;
+ box-sizing: border-box;
+ background-image: url("../imgs/o.png");
+ background-repeat: no-repeat;
+ background-size: cover;
+}
+
+
+.x{
+ height: 90px;
+ width:90px;
+ box-sizing: border-box;
+ background-image: url("../imgs/x.png");
+ background-repeat: no-repeat;
+ background-size: cover;
+}
+
+
+#reset{
+ margin-top: 1rem;
+ background-color: white;
+ font-size: 1rem;
+}
\ No newline at end of file
diff --git a/assets/imgs/o.png b/assets/imgs/o.png
new file mode 100644
index 0000000..bb6a43f
Binary files /dev/null and b/assets/imgs/o.png differ
diff --git a/assets/imgs/x.png b/assets/imgs/x.png
new file mode 100644
index 0000000..0c6d055
Binary files /dev/null and b/assets/imgs/x.png differ
diff --git a/assets/js/.DS_Store b/assets/js/.DS_Store
new file mode 100644
index 0000000..5008ddf
Binary files /dev/null and b/assets/js/.DS_Store differ
diff --git a/assets/js/main.js b/assets/js/main.js
new file mode 100644
index 0000000..bb1d77f
--- /dev/null
+++ b/assets/js/main.js
@@ -0,0 +1,170 @@
+// PROCEDURAL WAY
+
+
+
+
+let board = document.querySelector('#board')
+let turnInfo = document.querySelector('h2')
+
+document.querySelector('#reset').addEventListener('click', reset)
+
+
+
+// create the board using an empty array to store each value X or O
+
+let cells = ['', '', '', '', '', '', '', '', '']
+
+let turn = 'circle'
+let player = "Player 1"
+turnInfo.textContent = `${player} is circle. Make the first move`
+
+function makeBoard(){
+ //iterate thru each empty spot in the array and create a cell to store the X or O in the HTML
+ cells.forEach((cell, index) => {
+ let square= document.createElement('div')
+ //apply the styling to the div
+ square.classList.add('box')
+ //add event listeners on each cell that run the tic tac toe function
+ square.addEventListener('click', ticTac)
+ //append the actual box into the HTML
+ board.append(square)
+
+ //we'll need to reference each square by it's index in the array later so assign it an id of it's index
+ square.id = index
+
+ })
+
+}
+
+makeBoard()
+
+
+function ticTac(e){
+ //make a div to append the X or O inside of each cell
+ let display = document.createElement('div')
+ display.classList.add(turn) //assigned to either circle or x for the first move
+ //put X or O wherever the target of the clicking is by changing the class list to correspond with whoever's turn it is
+ e.target.append(display)
+ //switch between player turns
+ turn = turn === 'circle' ? 'x' : 'circle'
+ player = player === 'Player 1' ? 'Player 2' : 'Player 1'
+ turnInfo.textContent = `It's time for ${player} to go.`
+ e.target.removeEventListener('click', ticTac) //so you can't click on the same box twice
+ checkScore()
+}
+
+
+//make a function that checks the score by finding 3 in a row. It's going to check the indexes of the squares that have winning values
+function checkScore(){
+ let boxes = document.querySelectorAll('.box')
+ console.log(boxes)
+ let threeInARow= [
+ [0,1,2] , [3,4,5] , [6,7,8] ,
+ [0,3,6] , [1,4,7] , [2,5,8] ,
+ [0,4,8] , [2,4,6]
+ ]
+
+ console.log(boxes[0])
+ //iterate thru each of the potential winning combos
+ threeInARow.forEach((arr) => {
+ //use every to test that all tests result to true
+ //for each number in the winning combo, go to do boxes[number], check and see if that div has a firstChild, if it does, check to see that the class list contains circle
+ let player1Wins= arr.every(cell => boxes[cell].firstChild?.classList.contains('circle'))
+
+ if (player1Wins){
+ turnInfo.textContent = "Player 1 wins!!!!!!!"
+ }
+
+ })
+
+//do it again for player 2
+ threeInARow.forEach((arr) => {
+ let player2Wins= arr.every(cell => boxes[cell].firstChild?.classList.contains('x'))
+
+ if (player2Wins){
+ turnInfo.textContent = "Player 2 wins!!!!!!!"
+ }
+
+ })
+
+
+}
+
+function reset(){
+
+ location.reload()
+
+}
+
+
+
+//OBJECT ORIENTED PROGRAMMING WAY ATTEMPT
+
+
+
+
+
+
+ // class TicTacToe{
+
+ // constructor(){
+
+ // this.board = document.querySelector('#board')
+ // this.turnInfo = document.querySelector('h2')
+ // this.resetButton = document.querySelector('#reset')
+ // this.cells = ['', '', '', '', '', '', '', '', '']
+ // this.turn = 'circle'
+ // this.player = 'Player 1'
+ // this.turnInfo.textContent = `${this.player} is circle. Make the first move`
+ // this.resetButton.addEventListener('click', reset)
+ // }
+
+ // makeBoard() {
+ // this.cells.forEach((cell, index) => {
+ // let square = document.createElement('div')
+ // square.classList.add('box')
+ // square.addEventListener('click', )
+ // this.board.append(square)
+ // square.id = index
+ // })
+ // }
+
+
+ // reset(){
+ // location.reload()
+ // }
+
+
+ // }
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
diff --git a/index.html b/index.html
new file mode 100644
index 0000000..4ed4bc5
--- /dev/null
+++ b/index.html
@@ -0,0 +1,25 @@
+
+
+
+
+
+
+ Tic Tac Toe
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+