test 2

by Ebony McCoy

HTML

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <!-- this is how we link up the css -->
    <link href="css/style.css" rel="stylesheet" type="text/css">
    <!-- And this is how we link up the JS! -->
    <script defer src="js/main.js"></script>
    <!-- A fun title -->
    <title>Empowering Tic Tac Toe for the Good of Humanity</title>
</head>
<body>
    <h1>Tic-Tac-Toe</h1>
    <h2>It's X's turn!</h2>
    <!-- Many websites are just divs on divs on divs. -->
    <div class="flex-container flex-column">
        <div class="flex-container flex-wrap" id="board">
        <div class="square"></div>
        <div class="square"></div>
        <div class="square"></div>
        <div class="square"></div>
        <div class="square"></div>
        <div class="square"></div>
        <div class="square"></div>
        <div class="square"></div>
        <div class="square"></div>
        </div>
        <!-- I added a little reset button because our users are going to want to play round after round of our glorious game without ever refreshing the browser! -->
        <button id="reset-button">reset</button>
    </div>
</body>
</html>

CSS

body {
    text-align: center;
    font-family: Arial, Helvetica, sans-serif;
    }
    
    
h2 {
    margin: 0 auto;
    font-size: 35px;
    margin: 10px;
}
    
    
.flex-container {
    /* In order to use flex-box we need to first set our display property */
    display: flex;
    /* center the container horizontally */
    justify-content: center;
    /* this will center content vertically */
    align-items: center;
    /* tells the container to align the children in columns rather than rows */
}

.flex-column {
    height: 100%;
    width: 100%;
    flex-direction: column;
    /* tells the container to drop down once it reaches max-width */
}

.flex-wrap {
    flex-wrap: wrap;
    height: 432px;
    width: 432px;
}
    
    
.square {
    border: 2px solid rgba(0, 0, 0, .75);
    height: 140px;
    width: 140px;
    font-size: 80px;
    display: flex;
    align-items: center;
    justify-content: center;
}
    
    
#reset-button {
    text-align: center;
    font-size: 20px;
    border: 1px solid black;
    height: 55px;
    width: 100px;
    margin: 10px;
}

JavaScript

/*----- constants -----*/
const winningCombos = [
    [0, 1, 2],
    [3, 4, 5],
    [6, 7, 8],
    [0, 3, 6], 
    [1, 4, 7],
    [2, 5, 8],
    [0, 4, 8],
    [2, 4, 6]
    ];
    var pieces = [];
    var tiles = [];

/*----- app's state (variables) -----*/

let board;
let turn = 'X';
let win;

/*----- cached element references -----*/

const squares = Array.from(document.querySelectorAll('#board div'));

/*----- event listeners -----*/
document.getElementById('board').addEventListener('click', handleTurn);
const messages = document.querySelector('h2');
document.getElementById('reset-button').addEventListener('click', init);


/*----- functions -----*/

function getWinner() {
    let winner = null;
    winningCombos.forEach(function(combo, index) {
        if (board[combo[0]] && board[combo[0]] === board[combo[1]] && board[combo[0]] === board[combo[2]]) winner = board[combo[0]];
        });
        return winner ? winner : board.includes('') ? null : 'T';
};

function handleTurn() {
    let idx = squares.findIndex(function(square) {
        return square === event.target;
    });
    board[idx] = turn;
    turn = turn === 'X' ? 'O' : 'X';
    win = getWinner();
    render();
};

function init() {
    board = [
    '', '', '', '', '',
    '', '', '', '', '',
    '', '', '', '', '',
    '', '', '', '', '',
    '', '', '', '', '',
    ];
    render();
};

function render() {
    board.forEach(function(mark, index) {
    //this moves the value of the board item into the squares[idx]
    squares[index].textContent = mark;
    });
    messages.textContent = win === 'T' ? `That's a tie, queen!` : win ? `${win} wins the game!` : `It's ${turn}'s turn!`;
    };

init();