carloschulo/index.html

## index.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">
  <title>TIC TAC TOE</title>
  <style>
    * {
      box-sizing: border-box;
    }

    #board {
      height: 600px;
      width: 600px;
      display: flex;
      flex-direction: row;
      flex-wrap: wrap;
      justify-content: flex-start;
    }

    .square {
      height: 200px;
      width: 200px;
      border: 5px solid black;
      font-size: 8em;
      display: flex;
      justify-content: center;
      align-items: center;
      font-family: Impact, Haettenschweiler, 'Arial Narrow Bold', sans-serif;
    }

    .square:hover {
      background-color: palevioletred;
      cursor: pointer;
    }
  </style>
</head>

<body>
  <div 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>
  <script>
    const board = document.querySelector('#board')
    const P1 = 'X'
    const P2 = 'O'
    let currentTurn = P1

    function status() {
      const winningCombo = [
        [0, 3, 6],
        [1, 4, 7],
        [2, 5, 8],
        [0, 1, 2],
        [3, 4, 5],
        [6, 7, 8],
        [0, 4, 8],
        [2, 4, 6]
      ];
      const square = [...document.querySelectorAll('.square')]
      const squareSymbole = square.map(symbol => symbol.innerHTML)
      return winningCombo.find(combo => {
        if (squareSymbole[combo[0]] == squareSymbole[combo[1]] && squareSymbole[combo[1]] == squareSymbole[combo[2]]) {
          return squareSymbole[combo[0]]
        } else {
          return false
        }
      })
    }

    board.addEventListener('click', e => {
      e.target.innerHTML = currentTurn
      currentTurn = currentTurn === P1 ? P2 : P1
      if (status()) {
        alert('Winner')
        reset()
      }
    })

    function reset() {
      let currentTurn = P1
      const square = [...document.querySelectorAll('.square')]
      square.forEach(symbol => symbol.innerHTML = '')
    }
  </script>
</body>

</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">
	<title>TIC TAC TOE</title>
	<style>
	* {
	box-sizing: border-box;
	}

	#board {
	height: 600px;
	width: 600px;
	display: flex;
	flex-direction: row;
	flex-wrap: wrap;
	justify-content: flex-start;
	}

	.square {
	height: 200px;
	width: 200px;
	border: 5px solid black;
	font-size: 8em;
	display: flex;
	justify-content: center;
	align-items: center;
	font-family: Impact, Haettenschweiler, 'Arial Narrow Bold', sans-serif;
	}

	.square:hover {
	background-color: palevioletred;
	cursor: pointer;
	}
	</style>
	</head>

	<body>
	<div 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>
	<script>
	const board = document.querySelector('#board')
	const P1 = 'X'
	const P2 = 'O'
	let currentTurn = P1

	function status() {
	const winningCombo = [
	[0, 3, 6],
	[1, 4, 7],
	[2, 5, 8],
	[0, 1, 2],
	[3, 4, 5],
	[6, 7, 8],
	[0, 4, 8],
	[2, 4, 6]
	];
	const square = [...document.querySelectorAll('.square')]
	const squareSymbole = square.map(symbol => symbol.innerHTML)
	return winningCombo.find(combo => {
	if (squareSymbole[combo[0]] == squareSymbole[combo[1]] && squareSymbole[combo[1]] == squareSymbole[combo[2]]) {
	return squareSymbole[combo[0]]
	} else {
	return false
	}
	})
	}

	board.addEventListener('click', e => {
	e.target.innerHTML = currentTurn
	currentTurn = currentTurn === P1 ? P2 : P1
	if (status()) {
	alert('Winner')
	reset()
	}
	})

	function reset() {
	let currentTurn = P1
	const square = [...document.querySelectorAll('.square')]
	square.forEach(symbol => symbol.innerHTML = '')
	}
	</script>
	</body>

	</html>