JSFiddle - React, Tailwind, and code Playground

by zxzc0

HTML

<div class="word" id="word1"></div>
<div class="word" id="word2"></div>
<div class="bt" id="bt">rand</div>

CSS

*{
  box-sizing: border-box;
  -moz-user-select: none; /* nie pozwól na zaznaczenia */
  user-select: none; /* nie pozwól na zaznaczenia */
}

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

/* var words = [
  {q: 'der Schreibtisch', a: 'desk'},
  {q: 'der Schrank', a: 'cupboard'},
  {q: 'das Sofa', a: 'Sofa'},
] */

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


function randNum(){
	return Math.floor(Math.random() * 5);
}

const num = randNum();
word1.innerText = num;
word2.innerText = num;

function randWord(){
	const num = randNum();
  word1.innerText = num;
  word2.innerText = num;
}

bt.addEventListener("click", function(){
	randWord();
});