flashcards 3

by zxzc0

HTML

<p>Do you know this word?</p>

<div class="word" id="word1"></div>
<div class="word" id="word2">-</div>
<div class="bt" id="btx">no</div>
<div class="bt" id="bt">show</div>
<div class="bt" id="btv">yes</div>

<p style="font-size: 12px;">If you click "no" word will stay in the array, if you click "yes" word will be delete from array.</p>

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: 'A', a: 'a'},
  {q: 'B', a: 'b'},
  {q: 'C', a: 'c'},
]

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

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

var num = 0;

 function check() {
 
 if (num == words.length){
 num = 0;
 }

  if (num >= (words.length - 1)) {
    num = -1;
  }
  
  if (words.length == 0){
    word1.innerText = "The end";
    word2.innerText = "";
  }
} 

randomWord = word1.innerText = words[num].q;

btshow.addEventListener("click", function(){
	word2.innerText = words[num].a;
});

btno.addEventListener("click", function(){
	check();
	num++; 
  word1.innerText = words[num].q;
  word2.innerText = '-';
});

btyes.addEventListener("click", function(){
	words.splice(num, 1);
	check();  
  num++;
	word1.innerText = words[num].q;
  word2.innerText = '-';
});