JSFiddle - React, Tailwind, and code Playground

by Alex K

HTML

<div id="text"></div>
<textarea id="input" onkeypress="startTimer()" onkeyup="checkText(this.value)" onmouseout="checkText(this.value)"></textarea>
<div id="restart"><a id="restartLink" href="#" onclick="restart()" title="Use Ctrl+Enter (or Ctrl+Shift+Enter), Luke!">Как насчёт того, чтобы катнуть ещё разок?</a></div>
<div id="stats">
  <div>time&nbsp;&nbsp;: <span id="timer"></span></div>
  <div>errors: <span id="errors"></span></div>
  <div>cpm&nbsp;&nbsp;&nbsp;: <span id="cpm"></span></div>
</div>

CSS

html {
  padding: 20px;
}

#text {
  padding: 5px;
  width: 500px;
  font-family: Verdana;
  font-size: 16px;
  font-weight: bold;
  line-height: 22px;
  /*text-shadow: 0px 0px 2px #339933;*/
}

#input {
  padding: 5px;
  width: 500px;
  height: 150px;
  font-family: Verdana;
  font-size: 16px;
  font-weight: bold;
  margin-top: 5px;
  resize: none;
  outline: none;
  border: 5px solid #cccccc;
  border-radius: 5px;
}

#restart {
  padding: 2px 5px 10px 5px;
  width: 500px;
  font-family: Verdana;
  font-size: 12px;
  font-weight: bold;
  display: none;
  text-align: center;
}

#restart a {
  text-decoration: none;
  border: 1px dotted #339933;
  border-width: 0 0 1px 0;
  color: #339933;
}

#restart a:hover {
  border-color: transparent;
}

#stats {
  font-size: 14px;
  font-family: Lucida Console;
  line-height: 16px;
  color: #aaaaaa;
}

span.right1 {
  color: #339933;
  text-decoration: underline;
}

span.right2 {
  color: #339933;
  text-decoration: none;
  text-shadow: 0px 0px 2px #339933;
}

span.wrong {
  background-color: #993333;
  color: #ffffff;
}

#errors {
  color: #ff0000;
}

#cpm {
  font-weight: bold;
  color: #000000;
}

/* color schemes */
.day {
  
}

.night {
  filter: invert(80%);
  -webkit-filter: invert(80%);
  background-color: #000000;
}

JavaScript

var messages = {
  cheaters: "All cheaters will be banned!"
};

var again = [
  "Давай ещё раз, Ты сможешь лучше!",
  "Как насчёт того, чтобы катнуть ещё разок?",
  "Съешь ещё этих мягких французских булок да проедь ещё раз."
]

var settings = {
  inputBorderNormal: "#cccccc",
  inputBorderError: "#993333",
  errorSound: true,
  correctTextStyleType: 2,
  colorScheme: 'day'
}

var texts = [
  "Есть два рода болтунов: одни говорят слишком много, чтобы ничего не сказать, другие тоже говорят слишком много, но потому, что не знают, что сказать. Одни говорят, чтобы скрыть, что они думают, другие - чтобы скрыть, что они ничего не думают.",

  "Он не искал с ней встреч. А она вычеркнула его из своей жизни как нечто ненужное и даже вредное. Ей было все равно, жив он или умер. Но она полагала, что скорее жив, чем мертв. Думала она про него очень редко. Можно сказать, вообще никогда не думала.",

  "Теперь прочитать все написанное в ней не составляло труда, вот только то, что было там написано, сбивало с толку еще больше. Да, это были обычные молитвы, те самые, которые бывший послушник давно уже знал наизусть, только над каждой строкой молитвы была еще одна строка.",

  "А потом она опять забралась в кресло, прихватив с собой шерсть и котенка, и снова принялась за клубок. Но дело у Алисы шло медленно, потому что она все время отвлекалась - то беседовала с Китти, а то бормотала что-то себе под нос.",

  "Я не настолько наивен, чтобы поверить, будто он любил меня или доверял мне, но иногда его отношение настолько походило на любовь и доверие, насколько он вообще мог любить и доверять. Вот почему Лостра заставила меня вступиться за Тана.",

  "Надо заметить, что Алеша, живя тогда в монастыре, был еще ничем не связан, мог выходить куда угодно хоть на целые дни, и если носил свой подрясник, то добровольно, чтобы ни от кого в монастыре не отличаться. Но уж конечно это ему и самому нравилось.",

  "И, как бы извиняясь перед Волком за то, что она не может отдать ему все свое...