JSFiddle - React, Tailwind, and code Playground

by Ebony McCoy

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<h1 class="center">
Tic-Tac-Toe
</h1>
<p>
  User Story: I can play a game of Tic Tac Toe with the computer.
  <br> User Story: My game will reset as soon as it's over so I can play again.
  <br> User Story: I can choose whether I want to play as X or O.
</p>

<h3>
<form id="playerForm" class="center">
<div>
Would you like to be X or O?
<br><br>
</div>
  <input type="radio" name="radio" value="X">X
  <input type="radio" name="radio" value="O">O
</form>
</h3>

<h3>
<div id="playerOne" class="center"></div>
</h3>


<div id="gameResult" class="center"></div>
<div id="congratsOrSorry" class="center"></div>

<section id="gameInfo" class="infoContainer displayNone">
  <div id="yourTurn" class="infoBox">your turn</div>
  <button id="resetButton" class="infoBox">Reset Game</button>
  <div id="compTurn" class="infoBox">computer's turn</div>
</section>

<div id="counter" class="center displayNone"></div>

<section id="gameGrid" class="gameContainer displayNone">
  <div class="item item-1" id='one'>item-1</div>
  <div class="item item-2" id='two'>item-2</div>
  <div class="item item-3" id='three'>item-3</div>

  <div class="item item-4" id='four'>item-4</div>
  <div class="item item-5" id='five'>item-5</div>
  <div class="item item-6" id='six'>item-6</div>

  <div class="item item-7" id='seven'>item-7</div>
  <div class="item item-8" id='eight'>item-8</div>
  <div class="item item-9" id='nine'>item-9</div>
</section>

CSS

.infoContainer {
  display: grid;
  grid-gap: auto;
  grid-template-columns: 33% 33% 33%;
  text-align: center;
}

.infoBox {
  background-color: lightgray;
  color: white;
  padding: 20px;
}

.gameContainer {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  grid-template-rows: 100px 100px 100px;
  background-color: azure;
  border: 5px solid blue;
  text-align: center;
}

.gameContainer > .blue {
  background-color: blue;
  color: white;
  padding: 20px;
  font-size: 48px;
}

.gameContainer > .red {
  background-color: red;
  color: white;
  padding: 20px;
  font-size: 48px;
}

.gameContainer > .gray {
  background-color: gray;
  color: purple;
  padding: 24px;
  font-size: 24px;
}

.gameContainer > div {
  border: 2px solid blue;
  border-radius: 25px;
  background-color: lightgray;
  padding: 35px;
  color: green;
}

.center {
  text-align: center;
}

.yellow {
  background-color: yellow;
}

.blackText {
  color: black;
  font-size: 18px;
}

.yellowBig {
  background-color: yellow;
  font-size: 36px;
}

.redBig {
  background-color: red;
  font-size: 36px;
}

.red {
  background-color: red;
}

#resetButton {
  background-color: blue;
}

.displayNone {
  display: none;
}

.unclickable {
  pointer-events: none;
}

JavaScript

function clickButton(event) {
  $(".item").click(function(event) {
    var thingClicked = this.innerHTML
    console.log("0. this is: ", this)
    console.log("0. you clicked: ", thingClicked)
    var playerOne = getPlayerOne()
    if (playerOne === "X") {
      $(this).addClass("blue") //playerOne is always blue
      $(this).html("X")
    }
    if (playerOne === "O") {
      $(this).addClass("blue") //playerOne is always blue
      $(this).html("O")
    }
    playGame() //call playGame after every click, to check for winner & whose turn
  })
}
clickButton(event)


function checkWhoseTurn() { //for this game, playerOne goes first
  var currentTurn
  var redCount = getRedCount()
  console.log('checkWhoseTurn, redCount: ', redCount)
  var blueCount = getBlueCount()
  console.log('checkWhoseTurn, blueCount: ', blueCount)
  var playerOneTurn = !blueCount || redCount > blueCount || blueCount && redCount == blueCount
  var computerTurn = redCount < blueCount
  if (playerOneTurn) {
    console.log("checkWhoseTurn: it is playerOne's turn")
    var notBlueOrRed = document.querySelectorAll("div.item:not(.blue):not(.red)")
    $(notBlueOrRed).removeClass('unclickable') 
    $("#compTurn").removeClass('yellow blackText')
    $("#yourTurn").addClass('yellow blackText')
    currentTurn = "playerOneTurn"
    return currentTurn
  }
  if (computerTurn) {
    console.log("checkWhoseTurn: it is computer's turn")
      //at the start of computer's turn...
    var allItems = document.querySelectorAll("div.item")
    $(allItems).addClass('unclickable') //need to remove this on playerOne's turn
    $("#yourTurn").removeClass('yellow blackText')
    $("#compTurn").addClass('yellow blackText')
    setTimeout(computerTakeTurn, 1000) //call after 1 second...
    currentTurn = "computerTurn"
    return currentTurn
  }
}


function computerTakeTurn() {
  var computer = getComputer()
  console.log('computerTakeTurn: computer is: ', computer)
    //see what items don't have blue or red
  var...