JSFiddle - React, Tailwind, and code Playground

by zxzc0

HTML

<li><div id="w1">-</div><input type="text"><input type="text"><input type="text"></li>
<li><div id="w2">-</div><input type="text"><input type="text"><input type="text"></li>
<li><div id="w3">-</div><input type="text"><input type="text"><input type="text"></li>
<li><div id="w4">-</div><input type="text"><input type="text"><input type="text"></li>
<li><div id="w5">-</div><input type="text"><input type="text"><input type="text"></li>
<li><div id="w6">-</div><input type="text"><input type="text"><input type="text"></li>
<li><div id="w7">-</div><input type="text"><input type="text"><input type="text"></li>
<li><div id="w8">-</div><input type="text"><input type="text"><input type="text"></li>
<li><div id="w9">-</div><input type="text"><input type="text"><input type="text"></li>
<li><div id="w10">-</div><input type="text"><input type="text"><input type="text"></li>
<div class="bt">?</div>
<div class="bt">V</div>

CSS

li{
  list-style-type: none;
}

input{
  margin: 5px 2px;
}

div{
 display: inline-block;
}

.bt{
  width: 100px;
  height: 20px;
  font-size: 20px;
  text-align: center;
  padding: 1%;
  background: linear-gradient(#fff, #f5f7f9);
  border: 1px solid #d5dee6;
  color: #69707a;
  box-shadow: inset 0 1px 0 0 rgba(255,255,255,0.3), 0 1px 2px rgba(0,0,0,0.05);
  text-shadow: 0 1px 1px #fff;
  display: inline-block;
  cursor: pointer;
}

JavaScript

const foo = () => {
let words = [
	{q: 'A', w: 'a', e: 'aa', r: 'aaa'},
  {q: 'B', w: 'b', e: 'bb', r: 'bbb'},
  {q: 'C', w: 'c', e: 'cc', r: 'ccc'},
  {q: 'D', w: 'd', e: 'dd', r: 'ddd'},
  {q: 'E', w: 'e', e: 'ee', r: 'eee'},
  {q: 'F', w: 'f', e: 'ff', r: 'fff'},
  {q: 'G', w: 'g', e: 'gg', r: 'ggg'},
  {q: 'H', w: 'h', e: 'hh', r: 'hhh'},
  {q: 'I', w: 'i', e: 'ii', r: 'iii'},
  {q: 'J', w: 'j', e: 'jj', r: 'jjj'},
  {q: 'K', w: 'k', e: 'kk', r: 'kkk'},
];

let w1currentIndex;
let w2currentIndex;
let w3currentIndex;
let w4currentIndex;
let w5currentIndex;
let w6currentIndex;
let w7currentIndex;
let w8currentIndex;
let w9currentIndex;
let w10currentIndex;

const word1 = document.querySelector('#word1');
const word2 = document.querySelector('#word2');

const w1 = document.querySelector('#w1');
const w2 = document.querySelector('#w2');
const w3 = document.querySelector('#w3');
const w4 = document.querySelector('#w4');
const w5 = document.querySelector('#w5');
const w6 = document.querySelector('#w6');
const w7 = document.querySelector('#w7');
const w8 = document.querySelector('#w8');
const w9 = document.querySelector('#w9');
const w10 = document.querySelector('#w10');

const btno = document.querySelector('#btx');
const btshow = document.querySelector('#bt');
const btyes = document.querySelector('#btv');

function randIndex1(){
	return Math.floor(Math.random() * words.length);
}
function randIndex2(){
	return Math.floor(Math.random() * words.length);
}
function randIndex3(){
	return Math.floor(Math.random() * words.length);
}
function randIndex4(){
	return Math.floor(Math.random() * words.length);
}
function randIndex5(){
	return Math.floor(Math.random() * words.length);
}
function randIndex6(){
	return Math.floor(Math.random() * words.length);
}
function randIndex7(){
	return Math.floor(Math.random() * words.length);
}
function randIndex8(){
	return Math.floor(Math.random() * words.length);
}
function randIndex9(){
	return Math.floor(Math.random() *...