CodePen Embed - Tic Tac Toe

<div class='flex'>
  <div class='p1'>Player 1: 0</div>
  <h1 class='header'>Tic Tac Toe</h1>
  <div class='p2'>Player 2: 0</div>
</div>
<div class='grid'>
  <div class='space' id='one'></div>
  <div class='space' id='two'></div>
  <div class='space' id='three'></div>
  <div class='space' id='four'></div>
  <div class='space' id='five'></div>
  <div class='space' id='six'></div>
  <div class='space' id='seven'></div>
  <div class='space' id='eight'></div>
  <div class='space' id='nine'></div>
</div> 

<div class='wrapper'>
  <button class='reset'>Reset</button>
</div>

body {
  background-color: white;
}

.grid {
  background-color: rgba(0,0,0,.2);
  margin: 50px auto;
  vertical-align: center;
  width: 400px;
  height: 400px;
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  grid-template rows: 1fr 1fr 1fr;
  grid-gap: 2px;
  border-radius: 4px;
  box-shadow: rgba(0, 0, 0, 0.3) 0px 17px 50px;
}

.space {
  background-color: white;
  transition: background-color .5s;  
  display: flex;
  justify-content: center;
  align-items: center;
}

.space:hover {
  background-color: rgba(0,0,0,0);
  transition: background-color .5s;
  cursor: pointer;
}

.x, .o {
 font-family: 'arial';
 font-size: 70px;
 position: absolute;
}

.x {
  color: tomato;
}

.o {
  color: #33DBFF;
}

.header {
  font-family: 'IBM Plex Sans Condensed', sans-serif;
  font-family: 'Montserrat', sans-serif;
  font-size: 35px;
  color: tomato;
  text-align: center;
  margin-top: 50px;
}

.reset {
  font-size: 20px;
  font-family: 'IBM Plex Sans Condensed', sans-serif;
  font-family: 'Montserrat', sans-serif;
  color: tomato;
  background-color: white;
  border: 1px solid tomato;
  padding: 5px;
  transition: border, color, .5s;
}

.reset:hover {
  cursor: pointer;
  color: #33DBFF;
  border: 1px solid #33DBFF;
  transition: border, color, .5s;
}

.reset:focus {
  outline: none;
}

.wrapper {
  display: flex;
  justify-content: center;
  margin-bottom: 50px;
}

.p1, .p2 {
  font-family: 'IBM Plex Sans Condensed', sans-serif;
  font-family: 'Montserrat', sans-serif;
  font-size: 20px;
}

.p1 {
  color: tomato;
  margin-left: 20px;
}

.p2 {
  color: #33DBFF;
  margin-right: 20px;
}

.flex {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
}

let board = [
      [1,2,3],
      [4,5,6],
      [7,8,9],
];

let p1Counter = 1;
let p2Counter = 1;

class Player {
  constructor() {
    this.isTurn = false;
    this.win = false;
  }
}

class Space {
  constructor(id) {
    this.played = false;
    this.id = id;
  }

  addSymbolX(space) {
    $(space).append("<div class='x'>X</div>");
  }
  
  addSymbolO(space) {
    $(space).append("<div class='o'>O</div>");
  }
}

//create players
const player1 = new Player();
const player2 = new Player();

//create spaces
const space1 = new Space('one');
const space2 = new Space('two');
const space3 = new Space('three');
const space4 = new Space('four');
const space5 = new Space('five');
const space6 = new Space('six');
const space7 = new Space('seven');
const space8 = new Space('eight');
const space9 = new Space('nine');

//switch turns
function switchTurns(one, two) {
  one.isTurn = true;
  two.isTurn = false;
}

//gameplay
player1.isTurn = true;

$('.grid').on('click', (e) => {
  if(player1.win !== true && player2.win !== true) {
    if(e.target.id === space1.id && space1.played === false) {
       if(player1.isTurn) {
         space1.addSymbolX(e.target);
         let index = board[0].indexOf(1);
         if(index !== -1) {
           board[0][index] = 'x';
         }
         switchTurns(player2, player1);
         space1.played = true;
       } else {
           space1.addSymbolO(e.target);
           let index = board[0].indexOf(1);
           if(index !== -1) {
             board[0][index] = 'o';
           }
           switchTurns(player1, player2);
           space1.played = true;
       }
    } 

    else if (e.target.id === space2.id && space2.played === false) {
       if(player1.isTurn) {
         space2.addSymbolX(e.target); 
         let index = board[0].indexOf(2);
         if(index !== -1) {
           board[0][index] = 'x';
         }
         switchTurns(player2, player1);
         space2.played = true;
       } else {
           space2.addSymbolO(e.target);
           let index = board[0].indexOf(2);
           if(index !== -1) {
             board[0][index] = 'o';
           }
           switchTurns(player1, player2);
           space2.played = true;
       } 
    }

    else if (e.target.id === space3.id && space3.played === false) {
       if(player1.isTurn) {
         space3.addSymbolX(e.target);   
         let index = board[0].indexOf(3);
         if(index !== -1) {
           board[0][index] = 'x';
         }
         switchTurns(player2, player1);
         space3.played = true;
       } else {
           space3.addSymbolO(e.target); 
           let index = board[0].indexOf(3);
           if(index !== -1) {
             board[0][index] = 'o';
           }
           switchTurns(player1, player2);
           space3.played = true;
       }   
    }

   else if (e.target.id === space4.id && space4.played === false) {
       if(player1.isTurn) {
         space4.addSymbolX(e.target);  
         let index = board[1].indexOf(4);
         if(index !== -1) {
           board[1][index] = 'x';
         }
         switchTurns(player2, player1);
         space4.played = true;
       } else {
           space4.addSymbolO(e.target);
           let index = board[1].indexOf(4);
           if(index !== -1) {
             board[1][index] = 'o';
           }
           switchTurns(player1, player2);
           space4.played = true;
       } 
    }

    else if (e.target.id === space5.id && space5.played === false) {
       if(player1.isTurn) {
         space5.addSymbolX(e.target); 
         let index = board[1].indexOf(5);
         if(index !== -1) {
           board[1][index] = 'x';
         }
         switchTurns(player2, player1);
         space5.played = true;
       } else {
           space5.addSymbolO(e.target); 
           let index = board[1].indexOf(5);
           if(index !== -1) {
             board[1][index] = 'o';
           }
           switchTurns(player1, player2);
           space5.played = true;
       }   
    }  

    else if (e.target.id === space6.id && space6.played === false) {
       if(player1.isTurn) {
         space6.addSymbolX(e.target);
         let index = board[1].indexOf(6);
         if(index !== -1) {
           board[1][index] = 'x';
         }
         switchTurns(player2, player1);
         space6.played = true;
       } else {
           space6.addSymbolO(e.target);
           let index = board[1].indexOf(6);
           if(index !== -1) {
             board[1][index] = 'o';
           }
           switchTurns(player1, player2);
           space6.played = true;
       } 
    }

    else if (e.target.id === space7.id && space7.played === false) {
       if(player1.isTurn) {
         space7.addSymbolX(e.target);
         let index = board[2].indexOf(7);
         if(index !== -1) {
           board[2][index] = 'x';
         }
         switchTurns(player2, player1);
         space7.played = true;
       } else {
           space7.addSymbolO(e.target); 
           let index = board[2].indexOf(7);
           if(index !== -1) {
             board[2][index] = 'o';
           }
           switchTurns(player1, player2);
           space7.played = true;
       }   
    }

   else if (e.target.id === space8.id && space8.played === false) {
       if(player1.isTurn) {
         space8.addSymbolX(e.target);
         let index = board[2].indexOf(8);
         if(index !== -1) {
           board[2][index] = 'x';
         }
         switchTurns(player2, player1);
         space8.played = true;
       } else {
           space8.addSymbolO(e.target);
           let index = board[2].indexOf(8);
           if(index !== -1) {
             board[2][index] = 'o';
           }
           switchTurns(player1, player2);
           space8.played = true;
       } 
    }

    else if (e.target.id === space9.id && space9.played === false) {
       if(player1.isTurn) {
         space9.addSymbolX(e.target);
         let index = board[2].indexOf(9);
         if(index !== -1) {
           board[2][index] = 'x';
         }
         switchTurns(player2, player1);
         space9.played = true;
       } else {
           space9.addSymbolO(e.target); 
           let index = board[2].indexOf(9);
           if(index !== -1) {
             board[2][index] = 'o';
           }
           switchTurns(player1, player2);
           space9.played = true;
       }   
    }

    //check if playerX wins
    // top row
    if(board[0][0] === "x" && board[0][1] === "x" && board[0][2] === "x") {
      $('.header').text('Player One Wins!');
      $('.header').css('color', 'tomato');
      $('.p1').text ('Player 1: '+ p1Counter);
      p1Counter += 1;
      player1.win = true;
    }  
    // middle row 
    else if (board[1][0] === "x" && board[1][1] === "x" && board[1][2] === "x") {
      $('.header').text('Player One Wins!');
      $('.header').css('color', 'tomato');
      $('.p1').text ('Player 1:' + p1counter);
      p1Counter += 1;
      player1.win = true;
    }
    // bottom row
    else if (board[2][0] === "x" && board[2][1] === "x" && board[2][2] === "x") {
      $('.header').text('Player One Wins!'); 
      $('.header').css('color', 'tomato');
      $('.p1').text ('Player 1: ' + p1Counter);
      p1Counter += 1;
      player1.win = true;
    }
    // first column
    else if (board[0][0] === 'x' && board[1][0] === 'x' && board[2][0] === 'x') {
      $('.header').text('Player One Wins!'); 
      $('.header').css('color', 'tomato');
      $('.p1').text ('Player 1: ' + p1Counter);
      p1Counter += 1;
      player1.win = true;
    }
    // second column
    else if (board[0][1] === 'x' && board[1][1] === 'x' && board[2][1] === 'x') {
      $('.header').text('Player One Wins!'); 
      $('.header').css('color', 'tomato');
      $('.p1').text ('Player 1: ' + p1Counter);
      p1Counter += 1;
      player1.win = true;
    }
    // third column
    else if (board[0][2] === 'x' && board[1][2] === 'x' && board[2][2] === 'x') {
      $('.header').text('Player One Wins!'); 
      $('.header').css('color', 'tomato');
      $('.p1').text ('Player 1: ' + p1Counter);
      p1Counter += 1;
      player1.win = true;
    }
    // diaganol right
    else if (board[0][0] === 'x' && board[1][1] === 'x' && board[2][2] === 'x') {
      $('.header').text('Player One Wins!');  
      $('.header').css('color', 'tomato');
      $('.p1').text ('Player 1: ' + p1Counter);
      p1Counter += 1;
      player1.win = true;
    }
    // diaganol left
    else if (board[0][2] === 'x' && board[1][1] === 'x' && board[2][0] === 'x') {
      $('.header').text('Player One Wins!'); 
      $('.header').css('color', 'tomato');
      $('.p1').text ('Player 1: ' + p1Counter);
      p1Counter += 1;
      player1.win = true;
    } 

    // check if player 2 wins

    //top row
    if(board[0][0] === "o" && board[0][1] === "o" && board[0][2] === "o") {
      $('.header').text('Player Two Wins!');
      $('.header').css('color', '#33DBFF');
      $('.p2').text ('Player 2: ' + p2Counter);
      p2Counter += 1;
      player2.win = true;
    }  
    // middle row 
    else if (board[1][0] === "o" && board[1][1] === "o" && board[1][2] === "o") {
      $('.header').text('Player Two Wins!');  
      $('.header').css('color', '#33DBFF');
      $('.p2').text ('Player 2: ' + p2Counter);
      p2Counter += 1;
      player2.win = true;
    }
    // bottom row
    else if (board[2][0] === "o" && board[2][1] === "o" && board[2][2] === "o") {
      $('.header').text('Player Two Wins!');   
      $('.header').css('color', '#33DBFF');
      $('.p2').text ('Player 2: ' + p2Counter);
      p2Counter += 1;
      player2.win = true;
    }
    // first column
    else if (board[0][0] === 'o' && board[1][0] === 'o' && board[2][0] === 'o') {
      $('.header').text('Player Two Wins!'); 
      $('.header').css('color', '#33DBFF');
      $('.p2').text ('Player 2: ' + p2Counter);
      p2Counter += 1;
      player2.win = true;
    }
    // second column
    else if (board[0][1] === 'o' && board[1][1] === 'o' && board[2][1] === 'o') {
      $('.header').text('Player Two Wins!');  
      $('.header').css('color', '#33DBFF');
      $('.p2').text ('Player 2: ' + p2Counter);
      p2Counter += 1;
      player2.win = true;
    }
    // third column
    else if (board[0][2] === 'o' && board[1][2] === 'o' && board[2][2] === 'o') {
      $('.header').text('Player Two Wins!');  
      $('.header').css('color', '#33DBFF');
      $('.p2').text ('Player 2: ' + p2Counter);
      p2Counter += 1;
      player2.win = true;
    }
    // diaganol right
    else if (board[0][0] === 'o' && board[1][1] === 'o' && board[2][2] === 'o') {
      $('.header').text('Player Two Wins!');  
      $('.header').css('color', '#33DBFF');
      $('.p2').text ('Player 2: ' + p2Counter);
      p2Counter += 1;
      player2.win = true;
    }
    // diaganol left
    else if (board[0][2] === 'o' && board[1][1] === 'o' && board[2][0] === 'o') {
      $('.header').text('Player Two Wins!');    
      $('.header').css('color', '#33DBFF');
      $('.p2').text ('Player 2: ' + p2Counter);
      p2Counter += 1;
      player2.win = true;
    }
  }
});


$('.reset').on('click', () => {
  player1.isTurn = true;
  player2.isTurn = false;
  player1.win = false;
  player2.win = false;
  $('.x').remove();
  $('.o').remove();
  $('.header').text('Tic Tac Toe');
  board = [[1,2,3],[4,5,6],[7,8,9]];
  space1.played = false;
  space2.played = false;
  space3.played = false;
  space4.played = false;
  space5.played = false;
  space6.played = false;
  space7.played = false;
  space8.played = false;
  space9.played = false;  
});

Run Pen

This Pen is owned by Andrew Biddle on CodePen.

See more by @Androplis on CodePen

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js