JSFiddle - React, Tailwind, and code Playground

by bornasepic

HTML

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>Tick Tack Toe</title>
    <link rel="stylesheet" href="style.css">
    <script type="text/javascript" src="script.js"></script>
  </head>
  <body>
    <input class="colorname" type="text" name="Enter your color here" value="">
    <button class="reset" type="submit" name="button">Reset</button>
    <div class="game_board">
      <div class="board_square js_top-left"></div>
      <div class="board_square js_top-centre"></div>
      <div class="board_square js_top-right"></div>
      <div class="board_square js_mid-left"></div>
      <div class="board_square js_mid-centre"></div>
      <div class="board_square js_mid-right"></div>
      <div class="board_square js_bottom-left"></div>
      <div class="board_square js_bottom-centre"></div>
      <div class="board_square js_bottom-right"></div>
    </div>
  </body>
</html>

CSS

body{
  background-color: #e3e3e3;
}
.game_board{
  position: absolute;
  top: 30%;
  bottom: 30%;
  left: 30%;
  right: 30%;
  width: 608px;
  height: 608px;
  margin: auto;
  background-color: black
}
.board_square{
  width: 32.88%;
  height: 32.9%;
  background-color: white;
  display: inline-block;
}

JavaScript

function ready(fn) {
  if (document.attachEvent ? document.readyState === 'complete' : document.readyState !== 'loading'){
    fn();
  } else {
    document.addEventListener('DOMContentLoaded', fn);
  }
}
function blockClicking() {
  document.addEventListener('click', function handleClick (e) {
    if (e.target.matches('.board_square') === true) {
      var color = document.querySelector('.colorname').value;
      e.target.style.background = color;
      return;
    }
  }, false);
}
function resetGrid() {

  var grid = document.querySelector('.game_board');
  grid.querySelectorAll('.board_square').forEach(function (square) {
    square.style.background = 'white';
  })
}
ready(function() {
  var resetButton = document.querySelector('.reset');
  resetButton.addEventListener('click', resetGrid);
  blockClicking();
});