JSFiddle - React, Tailwind, and code Playground

by bornasepic

HTML

<!DOCTYPE html>

<div class="app">
  <input class="colorname" type="text" name="Enter your color here" value="pink">
  <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>
</div>

CSS

body {
  background-color: #e3e3e3;
}

.app {
  margin-left: auto;
  margin-right: auto;
  max-width: 600px;
}

.game_board {
  background-color: black;
  display: grid;
  grid-gap: 5px;
  grid-template-columns: 1fr 1fr 1fr 1fr;
  grid-template-rows: 1fr 1fr 1fr 1fr;
  margin-left: auto;
  margin-right: auto;
  margin-top: 20px;
  max-width: 80vh;
}

.board_square {
  background-color: white;
  padding-top: 100%;
}

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();
});