CP_tic_tac

CP_tic_tac

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>Document</title>
    <link rel="stylesheet" type="text/css" href="style.css">
  </head>

  <body>
    <div class="container" id="main">
      <span id="turn">Play</span>

      <div class="box" id="box1"></div>
      <div class="box" id="box2"></div>
      <div class="box" id="box3"></div>
      <div class="box" id="box4"></div>
      <div class="box" id="box5"></div>
      <div class="box" id="box6"></div>
      <div class="box" id="box7"></div>
      <div class="box" id="box8"></div>
      <div class="box" id="box9"></div>
    </div>

    <!-- <button onclick="replay()">Play Again</button> -->
  </body>
  <script src="ticscript.js">


  </script>

</html>

CSS

* {
  box-sizing: border-box
}

html {
  background: #171d57;
}

.container {
  width: 500px;
  overflow: hidden;
  margin: 0px auto 0 auto;
  background: #171d57;
}

.container span {
  width: 100%;
  display: block;
  text-align: center;
  font-family: sans-serif;
  color: #fff;
  font-size: 25px;
  background: #171d57;
}

.container .box {
  float: left;
  width: 150px;
  height: 150px;
  border: 1px solid black;
  transition: all .25s ease-in-out;
  font-family: sans-serif;
  font-size: 50px;
  text-align: center;
  line-height: 100px;
  cursor: pointer;
  padding: 40px;
}

#box1 {
  border-left-color: transparent;
  border-top-color: transparent;
}

#box2 {
  border-top-color: transparent;
}

#box3 {
  border-top-color: transparent;
  border-right-color: transparent;
}

#box4 {
  border-left-color: transparent;
}

#box6 {
  border-right-color: transparent;
}

#box7 {
  border-left-color: transparent;
  border-bottom-color: transparent;
}

#box8 {
  border-bottom-color: transparent;
}

#box9 {
  border-right-color: transparent;
  border-bottom-color: transparent;
}

/* .container .box:hover{background: rgba(10,10,10,0.5);
                                  color: #fff
                                 } */

/* button{background: #26C281;
                   color: #fff;
                   font-weight: bold;
                   border: 1px solid yellow;
                    cursor: pointer; 
                    width: 200px;
                    height: 40px; 
                    font-size: 22px;
                    display: block;
                    margin: 10px auto} */

.win {
  background: #F9690E;
  color: #fff
}

JavaScript

var turn = document.getElementById("turn"),
  // boxes => all boxes
  // X_or_O => to set X or O into the box
  boxes = document.querySelectorAll("#main div"),
  X_or_O = 0;

//NEW
var gotWinner = false;

function selectWinnerBoxes(b1, b2, b3) {
  b1.classList.add("win");
  b2.classList.add("win");
  b3.classList.add("win");
  turn.innerHTML = b1.innerHTML + " Won Congrat";
  turn.style.fontSize = "40px";

  gotWinner = true;
}

function getWinner() {

  var box1 = document.getElementById("box1"),
    box2 = document.getElementById("box2"),
    box3 = document.getElementById("box3"),
    box4 = document.getElementById("box4"),
    box5 = document.getElementById("box5"),
    box6 = document.getElementById("box6"),
    box7 = document.getElementById("box7"),
    box8 = document.getElementById("box8"),
    box9 = document.getElementById("box9");

  // get all posibilites
  if (box1.innerHTML !== "" && box1.innerHTML === box2.innerHTML && box1.innerHTML === box3.innerHTML)
    selectWinnerBoxes(box1, box2, box3);

  if (box4.innerHTML !== "" && box4.innerHTML === box5.innerHTML && box4.innerHTML === box6.innerHTML)
    selectWinnerBoxes(box4, box5, box6);

  if (box7.innerHTML !== "" && box7.innerHTML === box8.innerHTML && box7.innerHTML === box9.innerHTML)
    selectWinnerBoxes(box7, box8, box9);

  if (box1.innerHTML !== "" && box1.innerHTML === box4.innerHTML && box1.innerHTML === box7.innerHTML)
    selectWinnerBoxes(box1, box4, box7);

  if (box2.innerHTML !== "" && box2.innerHTML === box5.innerHTML && box2.innerHTML === box8.innerHTML)
    selectWinnerBoxes(box2, box5, box8);

  if (box3.innerHTML !== "" && box3.innerHTML === box6.innerHTML && box3.innerHTML === box9.innerHTML)
    selectWinnerBoxes(box3, box6, box9);

  if (box1.innerHTML !== "" && box1.innerHTML === box5.innerHTML && box1.innerHTML === box9.innerHTML)
    selectWinnerBoxes(box1, box5, box9);

  if (box3.innerHTML !== "" && box3.innerHTML === box5.innerHTML && box3.innerHTML ===...