JSFiddle - React, Tailwind, and code Playground

by Emre Saracoglu

HTML

<div class="flashCardsHeader">
</div>


  <div class="question"> </div>
  <div class="answer"> </div>
  <div class="controls">

    <div class="correct">
      <label class="mdi mdi-thumb-up text-white">Correct</label>
    </div>
    <div class="wrong">
      <label class="mdi mdi-thumb-down text-white">Wrong</label>
    </div>
  </div>

  <div class="flashCardsFooter">
    <div class="stats">
      <div class="questions-count">0 questions - time to load some!</div>
      <div class="current-stats">
        <label class="icon-stats"></label>
        <label id="stat-details">0 - 0 - 0</label>
      </div>
    </div>
  </div>

CSS

.flashCardsHeader {
  background-color: #313131;
  padding: 7px;
  color: #e1e1e1
}

.flashCardsHeader span {
  float: right;
}

.flashCardsHeader>div {
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
  float: left;
  font-size: .8em;

}

.correct,
.wrong {
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
}

.controls div {
  width: 50%;
  text-align: center;
  padding: 25px 0;
  cursor: pointer;
  display: inline-block;
}

.controls label {
  font-size: 3em;
  cursor: pointer;
}

.correct {
  background-color: #00b52a;
  float: left;
  -webkit-box-shadow: inset 0 0 30px #036600;
  -moz-box-shadow: inset 0 0 30px #036600;
  box-shadow: inset 0 0 30px #036600;
}

.wrong {
  background-color: #bb1c04;
  -webkit-box-shadow: inset 0 0 30px #820101;
  -moz-box-shadow: inset 0 0 30px #820101;
  box-shadow: inset 0 0 30px #820101;
}

.memberNameSurname {
  color: whitesmoke;
}

.question,
.answer {
  padding: 8px 11px;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
}

.question p,
.answer p {
  margin: 0;
  padding-bottom: 15px;
}

.answer p a {
  color: #fbfbfb;
}

.question {
  background-color: #ECECEC;
  min-height: 80px;
  font-size: 1.3em;
  text-align: center;
  vertical-align: middle;
  padding: 40px 20px 0 20px;
  margin: 0px;
  height: 260px;
  min-height: 260px;
  vertical-align: middle;
  position: relative;
  -webkit-box-shadow: inset 0 0 30px #b7b7b7;
  -moz-box-shadow: inset 0 0 30px #b7b7b7;
  box-shadow: inset 0 0 30px #b7b7b7;
}

.answer {
  background-color: #0b388f;
  min-height: 300px;
  color: #ffffff;
  text-align: center;
  vertical-align: middle;
  padding: 40px 20px 0 20px;
  margin: 0px;
  font-size: 1em;
  height: 260px;
  min-height: 260px;
  vertical-align: middle;
  position: relative;
  overflow: auto;
  -webkit-box-shadow: inset 0 0 30px #081457;
  -moz-box-shadow: inset 0 0 30px #081457;
 ...

JavaScript

var myFlashcards = [{
  question: 'content 1',
  answer: 'answer1'
}, {
  question: 'content 2',
  answer: 'answer2'
}, {
  question: 'content 3',
  answer: 'answer3'
}, {
  question: 'content 4',
  answer: 'answe4r'
}];

function makeid(length) {
   var result           = '';
   var characters       = 'ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789';
   var charactersLength = characters.length;
   for ( var i = 0; i < length; i++ ) {
      result += characters.charAt(Math.floor(Math.random() * charactersLength));
   }
   return result;
}
var flashCardID = makeid(15);
(function(exports) {
  function loadFromArray(array) {
    ouicards.flashcards = array;
    resetBuckets();
  }

  function loadFromBrowser(selector, delimiter) {
    var flashcards = [],
      userInput = $(selector).val().split('\n');
    /* Get rid of empty questions*/
    userInput = userInput.filter(function(card) {
      return card !== "";
    });
    if (userInput.length === 0) {
      console.log('There are no flashcards');
      return;
    }
    userInput.forEach(function(card) {
      var parsedCard = card.split(delimiter);
      flashcards.push({
        question: parsedCard[0],
        answer: parsedCard[1]
      });
    });
    ouicards.flashcards = flashcards;
    resetBuckets();
    return getFromLS();
  }

  function next() {
    var newQuestion,
      bigInterval = Math.ceil(ouicards.flashcards.length / 3) + 1,
      smallInterval = Math.ceil(ouicards.flashcards.length / 6) + 1;
    /* Show an answer from bucket C once every bigInterval
     So long as Bucket C it's not empty*/
    if (ouicards.counter % bigInterval === 0 && ouicards.bucketC.length !== 0) {
      newQuestion = getQuestion(ouicards.bucketC);
      ouicards.currentBucket = ouicards.bucketC;
      /* Show an answer from bucket B once every smallInterval
      So long as Bucket B it's not empty */
    } else if (ouicards.counter % smallInterval === 0 && ouicards.bucketB.length !== 0) {
     ...