JSFiddle - React, Tailwind, and code Playground

tic tac toe

by Koding Kamp

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<aside><button id="btn1" onclick="respec()">
Reset
</button>
<button onclick="swplayer()">
Switch Player
</button>
<p id="display">
Current Player = O
</p>
</aside>
<main id="main">
</main>

CSS

#main {
  width: 306px;
  font-size: 0;
}

.box {
  display: inline-flex;
  width: 100px;
  height: 100px;
  border: 1px black solid;
}

img {
  border: 1px black solid;
}

JavaScript

var point = ["O", "X"];
var player = 0;
var icon = ["https://image.flaticon.com/icons/svg/45/45285.svg", "https://image.flaticon.com/icons/png/512/798/798606.png"];

function btnclk(deck) {
  imgchge(deck);
  disable(deck);
  winchk();
  swplayer();
}

function imgchge(flag) {
  flag.innerHTML = '<img width="100px" height="100px" src="' + icon[player] + '">';
}

function winchk() {
  var ul = document.getElementById("0");
  var up = document.getElementById("1");
  var ur = document.getElementById("2");
  var ml = document.getElementById("3");
  var mm = document.getElementById("4");
  var mr = document.getElementById("5");
  var bl = document.getElementById("6");
  var bm = document.getElementById("7");
  var br = document.getElementById("8");
  
  var blah1 = performance.now();
  if (ul.innerHTML == up.innerHTML && up.innerHTML == ur.innerHTML) {
    alert("YOUR A TOP");respec();
  }
  else if (ml.innerHTML == mm.innerHTML && mm.innerHTML == mr.innerHTML){
  alert("YOUR CONFUSED");respec();
  }
  else if (bl.innerHTML == bm.innerHTML && bm.innerHTML == br.innerHTML){
  alert("YOUR A BOTTOM");respec();
  }
  else if (ul.innerHTML == ml.innerHTML && ml.innerHTML == bl.innerHTML){
  alert("YOUR A TOOL");respec();
  }
  else if (up.innerHTML == mm.innerHTML && up.innerHTML == bm.innerHTML){
  alert("YOUR A WEEB");respec();
  }
  else if (ur.innerHTML == mr.innerHTML && mr.innerHTML == br.innerHTML){
  alert("YOUR A BITCH");respec();
  }
  else if (ul.innerHTML == mm.innerHTML && mm.innerHTML == br.innerHTML){
  alert("YOUR AN UPPER DECKER");respec();
  }
  else if (ur.innerHTML == mm.innerHTML && mm.innerHTML == bl.innerHTML){
  alert("YOUR A FAILURE");
  respec();
  }
  var blah2 = performance.now();
  console.log(blah2 - blah1);
  
}

function swplayer() {
  if (player == 0) {
    player = 1;
  } else {
    player = 0;
  }
  var words = "Current Player = " + point[player];
  $('#display').html(words);
}

function respec() {
 ...