JSFiddle - React, Tailwind, and code Playground

by zxzc0

HTML

<table>
  <thead>
    <td></td>
    <td></td>
  </thead>
  <tbody id="shell">
  </tbody>
</table>

<div class="bt" id="bt">V</div>

CSS

/* let words = [
  {q: 'A', w: 'a'},
  {q: 'B', w: 'b'},
  {q: 'C', w: 'c'},
  {q: 'D', w: 'd'},
  {q: 'E', w: 'e'},
  {q: 'F', w: 'f'},
] */

* {
  box-sizing: border-box;
  -moz-user-select: none;
  user-select: none;
}

body {
  background-color: #20262e;
  color: white;
  font-size: 20px;
}

.word {
  padding: 10px;
}

.bt {
  width: 80px;
  height: 50px;
  border: 1px solid white;
  display: inline-block;
  color: white;
  font-size: 20px;
  padding-top: 12px;
  text-align: center;
  cursor: pointer;
}

.x {
  border: 1px solid red;
}

.v {
  border: 1px solid green;
}

JavaScript

let words = [
  {q: 'A', w: 'a'},
  {q: 'B', w: 'b'},
  {q: 'C', w: 'c'},
  {q: 'D', w: 'd'},
  {q: 'E', w: 'e'},
  {q: 'F', w: 'f'},
];

const bt = document.querySelector('#bt');


//table generator
var table = document.getElementById('shell');
var data = [];

for (var i = 0; i < words.length; i++) {
  data.push(
    '<td>' + words[i].q + '</td>' +
    '<td>' + words[i].w + '</td>'
  )
}

for (var j = 0; j < data.length; j++) {
  var new_row = document.createElement('tr');
  new_row.innerHTML = data[j];
  table.appendChild(new_row);
}


//delete random words from table
const randIndex = () => Math.floor(Math.random() * 3);
const randWord = () => {
  
}

bt.addEventListener("click", function() {
	words.splice(randIndex(), 1);
  randWord();
});