{\rtf1\ansi\ansicpg1252\cocoartf1671\cocoasubrtf500 {\fonttbl\f0\fswiss\fcharset0 Helvetica;} {\colortbl;\red255\green255\blue255;} {\*\expandedcolortbl;;} \margl1440\margr1440\vieww10800\viewh8400\viewkind0 \pard\tx720\tx1440\tx2160\tx2880\tx3600\tx4320\tx5040\tx5760\tx6480\tx7200\tx7920\tx8640\pardirnatural\partightenfactor0 \f0\fs24 \cf0 index.html\ \ \ \ \ \
\

Tic Tac Toe

\
\
\
\
\
\
\
\
\
\
\ \ \ \ \ script.js\ const winningCombos = [\ [0,1,2],\ [3,4,5],\ [6,7,8],\ [0,4,8],\ [2,4,6],\ [0,3,6],\ [1,4,7],\ [2,5,8]\ ];\ \ const grid = () => Array.from(document.getElementsByClassName('q'));\ const qNumId = (qE1) => Number.parseInt(qE1.id.replace('q',''));\ const emptyQs = () => grid().filter(_qE1 => _qE1.innerText ==='');\ const allSame = (arr) => arr.every(_qE1 => _qE1.innerText === arr[0].innerText && _qE1.innerText !== '');\ \ const takeTurn = (index, letter) => grid ()[index].innerText = letter;\ const opponentChoice = () => qNumId(emptyQs()[Math.floor(Math.random() * emptyQs().length)]);\ \ const endGame = (winningSequence) => \{\ winningSequence.forEach(_qE1 => _qE1.classList.add('winner'));\ disableListeners();\ \}\ const checkForVictory = () => \{\ let victory = false;\ winningCombos.forEach(_c => \{\ const _grid = grid ();\ const sequence = [_grid[_c[0]], _grid[_c[1]], _grid[_c[2]]];\ if(allSame(sequence)) \{\ victory = true;\ \ endGame(sequence);\ \}\ \});\ \ return victory;\ \}\ \ const opponentTurn = () => \{\ disableListeners();\ setTimeout(() => \{\ takeTurn(opponentChoice(), 'o');\ if(!checkForVictory())\ enableListeners();\ \}, 1000);\ \}\ \ const clickFn = ($event) => \{\ takeTurn(qNumId($event.target), 'x');\ if(!checkForVictory())\ opponentTurn();\ \ \};\ \ const enableListeners = () => grid().forEach(_qE1 => _qE1.addEventListener('click', clickFn));\ const disableListeners = () => grid().forEach(_qE1 => _qE1.removeEventListener('click', clickFn));\ \ enableListeners();\ \ style.css\ #container \{\ width:320px;\ height:320px;\ margin: auto;\ margin-top: 100px;\ \}\ #container h1 \{\ text-align: center;\ font-size: 40px;\ margin-bottom:50px;\ \}\ .q \{\ width: 100px;\ height: 100px;\ float: left;\ margin: 0;\ padding: 0;\ cursor: pointer;\ text-align: center;\ font-family: sans-serif;\ font-size: 100px;\ \}\ .q:hover\{\ background-color: azure;\ \}\ #q0, #q1, #q2, #q3, #q4, #q5\{\ border-bottom: 10px solid black;\ \}\ #q2, #q5, #q8, #q1, #q4, #q7\{\ border-left: 10px solid black;\ \}\ .winner\{\ color: red;\ \}\ }