'How to change each tic tac toe cell to change different color depending on a players turn?

Goal example: Player one clicks a cell, cell turns blue. Player 2 clicks different cell, cell turns red(alternating with each click). I have tried to loop each cell and then on that cell style it with the color but don't know how to go about doing that. If someone can point me to the right direction.

   

const squaresID = document.querySelectorAll('.cell');
console.log(squaresID);

let player = '';

squaresID.forEach(e => {
  e.addEventListener('click', function (e) {
    e.preventDefault();
  });
});
h1 {
  text-align: center;
}

/* Credit to code brainer*/
:root {
  --cell-size: 200px;

  --color: #81c3fd; /* for hover */
  --color-set: #1367b1; /* when set */
  --l: 10px; /* X line-width */
}

/* creates spaces between elements with defined borders, here it is used to make zero borders for the whole screen*/
body {
  margin: 0;
}

.board {
  width: 100vw;
  height: 100vh;
  display: grid;
  justify-content: center;
  align-content: center;
  justify-items: center;
  align-items: center;
  grid-template-columns: repeat(3, auto);
}

.cell {
  width: var(--cell-size);
  height: var(--cell-size);
  border: 1px solid black;
  display: flex;
  justify-content: center;
  align-items: center;
  position: relative;
  cursor: pointer;
}

/* remove border for edges */
.cell:nth-child(1),
.cell:nth-child(2),
.cell:nth-child(3) {
  border-top: none;
}

.cell:nth-child(1),
.cell:nth-child(4),
.cell:nth-child(7) {
  border-left: none;
}

.cell:nth-child(3),
.cell:nth-child(6),
.cell:nth-child(9) {
  border-right: none;
}

.cell:nth-child(7),
.cell:nth-child(8),
.cell:nth-child(9) {
  border-bottom: none;
}
<html>
  <head>
    <meta charset="utf-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <title>Tic Tac Toe</title>
    <meta name="description" content="" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <link rel="stylesheet" href="style.css" />
  </head>
  <body>
    <h1>Tic Tac Toe!</h1>
    <!--- Credit to code brainer-->
    <div class="board" id="board">
      <div class="cell" data-cell></div>

      <div id="cell" class="cell" data-cell></div>

      <div id="cell" class="cell" data-cell></div>

      <div id="cell" class="cell" data-cell></div>

      <div id="cell" class="cell" data-cell></div>

      <div id="cell" class="cell" data-cell></div>

      <div id="cell" class="cell" data-cell></div>

      <div id="cell" class="cell" data-cell></div>

      <div id="cell" class="cell" data-cell></div>
    </div>
    <div class="winning-message" id="winningMessage">
      <div id="winningMessageText"></div>
    </div>

    <script src="script.js" async defer></script>
  </body>
</html>
javascripthtmlcss


Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source

Related Questions