Answer

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.

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
+
+<img width="1428" alt="tic-taco" src="https://github.com/JacinthaDev/Tic-Tac-Toe/assets/129231721/9a31577e-d241-40bb-8c29-098c950a9c12">
+
+# 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

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;
+}

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()
+    //     }
+
+
+    //     }
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+

index.html

@@ -0,0 +1,25 @@
+<!DOCTYPE html>
+<html lang="en">
+	<head>
+    	<meta charset="utf-8">
+    	<meta name="description" content="Tic Tac Toe game">
+    	<meta name="keywords" content="tic, tac, toe">
+		<title>Tic Tac Toe</title>
+		<!-- external CSS link -->
+		<link rel="preconnect" href="https://fonts.googleapis.com">
+		<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
+		<link href="https://fonts.googleapis.com/css2?family=Roboto:wght@300&display=swap" rel="stylesheet">
+		<link rel="stylesheet" href="assets/css/main.css">
+	</head>
+	<body>
+
+
+		<div id="board"></div>
+		<button id="reset">Reset</button>
+
+		<h2></h2>
+
+
+		<script type="text/javascript" src="assets/js/main.js"></script>
+	</body>
+</html>