JSFiddle - React, Tailwind, and code Playground

by stirl021

HTML

<div class="container" id="container">
    <div class="row">
        <div class="col-md-12">
             <h1>Typexer</h1>

        </div>
    </div>
    <div class="row">
        <div class="col-md-6">
            <p>Cvičný text</p>
            <p id="excercisetext"></p>
        </div>
        <div class="col-md-6">	<span id="correctcharacter" style="font-size: 90px;"></span>

        </div>
    </div>
    <div class="row">
        <div class="col-md-6" id="excercisediv">
            <p>Zde pište:</p>
            <div id="excercisebox">
                <textarea id="textarea"></textarea>
            </div>
        </div>
    </div>
    <div class="row">
        <div class="col-md-2">Počet chyb: <span id="errors"></span>

        </div>
        <div class="col-md-2"></div>
        <div class="col-md-2">Uplynulý čas:&nbsp;<span id="time"></span>

        </div>
    </div>

JavaScript

var excercise = "Podle informací kanadského tisku na příslušné adrese našel mobil v držení tří mužů tmavé pleti ve věku kolem dvaceti let. Všichni tři seděli v autě a neměli zájem s Jeremym vyjednávat. Místní policie uvádí, že ačkoliv jsou následující události stále nejasné, z dostupných informací je zřejmé, že se tři muži pokusili po slovní konfrontaci ujet, ale Jeremy se stačil chytit dveří řidiče. Následovalo několik výstřelů, které byly pro Jeremyho smrtelné.";
var excerciseTextP = document.getElementById('excercisetext');
var textarea = document.getElementById('textarea');
var time = 0;
var checkingCount = 0;


function appendExcerciseText() {

    var text = document.createTextNode(excercise);
    excerciseTextP.appendChild(text);
}

/**
 * Create html textarea with same size as paragraph with excercise text
 */
function setWidthAndHeightToTexarea() {

    var width = excerciseTextP.clientWidth;
    var height = excerciseTextP.clientHeight;
    textarea.style.width = width + 'px';
    textarea.style.height = height + 10 + 'px';
}

function setFocus() {

    textarea.focus();
}


function checkWriting(event) {

    var lastChar = event.target.value.length;
    var typing = String.fromCharCode(event.keyCode);

    if (excercise[lastChar] !== typing) {

        event.preventDefault();
        showCorrectCharacter(excercise[lastChar]);
        replaceExcercise();
        appendErrorCount();
    } else {
        showCorrectCharacter('');
    }
}

/**
 * Replace onscreen excercise
 * @return {[type]} [description]
 */
function replaceExcercise() {

    var lastChar = event.target.value.length;

    var p = document.getElementById('excercisetext');
    var textWithMistake = p.textContent;

    var beforeMistake = textWithMistake.substr(0, lastChar);
    var afterMistake = textWithMistake.substr(lastChar + 1, excercise.length - 1);

    excerciseTextP.textContent = beforeMistake + '_' + afterMistake;
}

/**
 * Split type string by '_' and return its length
 *...