Board Game and LocalStorage

by Pranab Dey

HTML

<div class="main">
  <div class="theme">
    <span>Theme: </span>
    <button>Light</button><button>Dark</button>
  </div>

  <div class="game">
    <h3>Game Plan</h3>
    <button data-table=3>Easy(3x3)</button>
    <button data-table=6>Medium(6x6)</button>
    <button data-table=9>Hard(9x9)</button>
    <p>---------------------------------</p>
    <table></table>
  </div>
</div>

CSS

table,
td {
  border: 1px solid red;
}

tr {
  border: 1px solid green;
  background: red;
  padding: 20px;
}

.light-theme {
  background: #fff;
  color: #000;
}

.dark-theme {
  background: #333;
  color: #fff;
}

JavaScript

var table = document.querySelector("table"),
  tr, td, count = 1,
  theme = document.querySelectorAll(".theme button"),
  lightSaver, darkSaver,
  main = document.querySelector("body");

if (JSON.parse(localStorage.getItem("theme")) !== undefined) {
  if (JSON.parse(localStorage.getItem("theme"))[0] === "light") {
    main.classList.remove("dark-theme");
    main.classList.add("light-theme");
    console.log("light");
  } else {
    main.classList.remove("light-theme");
    main.classList.add("dark-theme");
    console.log("dark")
  }
} else {
  main.classList.add(JSON.parse(localStorage.getItem("theme"))[1]);
  console.log("nothing")
}

console.log(JSON.parse(localStorage.getItem("theme")));

function createTable(n) {
  for (var i = 0; i < n; i++) {
    tr = document.createElement("tr");
    for (var j = 0; j < n; j++) {
      td = document.createElement("td");
      td.style.background = "lightgrey";
      td.style.width = "20px";
      td.style.height = "20px";
      td.className = count++;
      tr.appendChild(td);
    }
    tr.addEventListener("click", (e) => {
      e.target.style.background = "Green";
      e.target.style.transition = "all 1.5s ease";
    });
    tr.addEventListener("transitionend", (e) => {
      e.target.style.background = "lightgrey";
    });
    table.appendChild(tr);
  }
}

theme.forEach(d => {
  d.addEventListener("click", function() {
    if (this.innerHTML === "Light") {
      lightSaver = ["light", "light-theme"];
      localStorage.setItem("theme", JSON.stringify(lightSaver));
      main.classList.remove("dark-theme");
      main.classList.add(JSON.parse(localStorage.getItem("theme"))[1]);
    } else {
      darkSaver = ["dark", "dark-theme"];
      localStorage.setItem("theme", JSON.stringify(darkSaver));
      main.classList.add("dark-theme");
      main.classList.remove("light-theme");
    }
  })
});

var btn = document.querySelectorAll(".game button");
btn.forEach(d => {
  d.addEventListener("click", (e) => {
   ...