lirenyeo/diff-approach.html

## diff-approach.html
<!DOCTYPE html>
<html>
  <head>
    <title>Tic Tac Toe</title>
    <link rel="stylesheet" href="tic.css">
  </head>
  <body>
    <div id="board">
        <div class="col0 row0 dia0">&nbsp;</div>
        <div class="col1 row0">&nbsp;</div>
        <div class="col2 row0 dia1">&nbsp;</div>

        <div class="col0 row1">&nbsp;</div>
        <div class="col1 row1 dia0 dia1">&nbsp;</div>
        <div class="col2 row1">&nbsp;</div>

        <div class="col0 row2 dia1">&nbsp;</div>
        <div class="col1 row2">&nbsp;</div>
        <div class="col2 row2 dia0">&nbsp;</div>
    </div>
  </body>
  <script>
    let turn = 0;
    const boxes = document.querySelectorAll('#board div')

    function currMarker() {
      if (turn % 2 == 0) {
        return 'X'
      } else {
        return 'O'
      }
    }

    function checkWin(box, marker) {
      for (let className of box.classList) {
        const matchedBoxes = document.querySelectorAll('#board .' + className)
        if (canWin(matchedBoxes)) {
          announceWinner(true)
        }
      }
    }

    function canWin(boxes) {
      for (let box of boxes) {
        if (box.innerHTML != currMarker()) {
          return false
        }
      }
      return true
    }

    function announceWinner(hasWinner) {
      if (hasWinner) {
        alert(currMarker() + ' wins! Press okay to reset')
      } else {
        alert('Draw! Press okay to reset')
      }
      for (let box of boxes) {
        box.innerHTML = '&nbsp;'
      }
      turn = 0;
    }

    for (let box of boxes) {
      box.onclick = function(e) {
        const clickedBox = e.target
        if (clickedBox.innerHTML != '&nbsp;') {
          alert('Invalid move, please try again')
        } else {
          clickedBox.innerHTML = currMarker()
          checkWin(clickedBox, currMarker)
          turn++
        }
        if (turn > 8) {
          announceWinner(false)
        }
      }
    }
  </script>
</html>

## tic.css
#board div {
  float: left;
  box-sizing: border-box;
  height: 120px;
  width: 120px;
  border: solid 3px black;
  display: inline-block;
  margin: 3px;
  font-size: 3em;
  text-align: center;
  line-height: 120px;
  vertical-align: middle;
  cursor: pointer;
  user-select: none;
}

#board div:nth-child(3n+1) {
  clear: both;
}

## tic.html
<!DOCTYPE html>
<html>
  <head>
    <title>Tic Tac Toe</title>
    <link rel="stylesheet" href="tic.css">
  </head>
  <body>
    <div id="board">
        <div>&nbsp;</div>
        <div>&nbsp;</div>
        <div>&nbsp;</div>

        <div>&nbsp;</div>
        <div>&nbsp;</div>
        <div>&nbsp;</div>

        <div>&nbsp;</div>
        <div>&nbsp;</div>
        <div>&nbsp;</div>
    </div>
  </body>
  <script>
    // 1. How to fill up box with X or O
    // 2. How to prevent changing X or O
    // 3. How to stop the game with DRAW
    // 4. Figure out the winner
    /* win conditions:
      1,2,3   1,4,7   1,5,9
      4,5,6   2,5,6   3,5,7
      7,8,9   3,6,9

      tip: we only need to check for currentMarker
    */
    // 5. AI that places randomly

    const boxes = document.querySelectorAll('#board > div')

    let turn = 0

    function currentMarker() {
      if (turn % 2 == 0) {
        return "X"
      } else {
        return "O"
      }

      // shorter version using "ternary operator"
      // return turn % 2 == 0 ? 'X' : O
    }

    function restart() {
      alert('Game has ended')
      location.reload()
    }

    // setTimeout(fn, X) means the code will only
    // run fn after X milliseconds
    function endGame() {
      setTimeout(restart, 1000)
    }

    function checkWinner() {
      // method 1: check are boxes equal
      // ( (box1.innerHTML == box2.innerHTML) && (box1.innerHTML == box3.innerHTML) && (box2.innerHTML == box3.innerHTML) ) ||

      // method 2: check if boxes have currentMarker
      // ( box1.innerHTML == currentMarker && box2.innerHTML == currentMarker && box3.innerHTML == currentMarker ) ||

      // method 3: use HTML classes, refer to diff-approach.html
    }

    // Attach click event to entire board,
    // then use 'event.target' to figure out each box
    board.onclick = function(event) {
      if (event.target.innerHTML != '&nbsp;') return
      event.target.innerHTML = currentMarker()
      turn++
      checkWinner()

      if (turn > 8) {
        endGame()
      }
    }

    // ALTERNATIVE:
    // By attaching click event on each box
    // for (let box of boxes) {
    //   box.onclick = function() {
    //     box.innerHTML = "A"
    //   }
    // }

  </script>
</html>
	<!DOCTYPE html>
	<html>
	<head>
	<title>Tic Tac Toe</title>
	<link rel="stylesheet" href="tic.css">
	</head>
	<body>
	<div id="board">
	<div class="col0 row0 dia0"> </div>
	<div class="col1 row0"> </div>
	<div class="col2 row0 dia1"> </div>

	<div class="col0 row1"> </div>
	<div class="col1 row1 dia0 dia1"> </div>
	<div class="col2 row1"> </div>

	<div class="col0 row2 dia1"> </div>
	<div class="col1 row2"> </div>
	<div class="col2 row2 dia0"> </div>
	</div>
	</body>
	<script>
	let turn = 0;
	const boxes = document.querySelectorAll('#board div')

	function currMarker() {
	if (turn % 2 == 0) {
	return 'X'
	} else {
	return 'O'
	}
	}

	function checkWin(box, marker) {
	for (let className of box.classList) {
	const matchedBoxes = document.querySelectorAll('#board .' + className)
	if (canWin(matchedBoxes)) {
	announceWinner(true)
	}
	}
	}

	function canWin(boxes) {
	for (let box of boxes) {
	if (box.innerHTML != currMarker()) {
	return false
	}
	}
	return true
	}

	function announceWinner(hasWinner) {
	if (hasWinner) {
	alert(currMarker() + ' wins! Press okay to reset')
	} else {
	alert('Draw! Press okay to reset')
	}
	for (let box of boxes) {
	box.innerHTML = ' '
	}
	turn = 0;
	}

	for (let box of boxes) {
	box.onclick = function(e) {
	const clickedBox = e.target
	if (clickedBox.innerHTML != ' ') {
	alert('Invalid move, please try again')
	} else {
	clickedBox.innerHTML = currMarker()
	checkWin(clickedBox, currMarker)
	turn++
	}
	if (turn > 8) {
	announceWinner(false)
	}
	}
	}
	</script>
	</html>
	#board div {
	float: left;
	box-sizing: border-box;
	height: 120px;
	width: 120px;
	border: solid 3px black;
	display: inline-block;
	margin: 3px;
	font-size: 3em;
	text-align: center;
	line-height: 120px;
	vertical-align: middle;
	cursor: pointer;
	user-select: none;
	}

	#board div:nth-child(3n+1) {
	clear: both;
	}