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>Excercise 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>Write here:</p>
            <div id="excercisebox">
                <textarea id="textarea"></textarea>
            </div>
        </div>
    </div>
    <div class="row">
        <div class="col-md-2">Number of errors: <span id="errors"></span>

        </div>
        <div class="col-md-2"></div>
        <div class="col-md-2">Elapsed time:&nbsp;<span id="time"></span>

        </div>
    </div>

JavaScript

var excercise = "Minister rejects claim that Ecuador is to blame for deadlock over WikiLeaks founder, who has been living at London embassy to avoid extradition. Ecuador has hit back at the British government over who is to blame for the deadlocked case of the WikiLeaks founder Julian Assange. The Australian has been living in the Ecuadorian embassy in London for more than three years to avoid extradition to Sweden, where he faces allegations of sexual assault.";
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() {

    var typing = textarea.value;
    var lastChar = typing.length - 1;
	showCorrectCharacter('');
    if (typing[lastChar] !== excercise[lastChar]) {

        textarea.value = typing.substr(0, lastChar);
        replaceExcercise();
        appendErrorCount();
        showCorrectCharacter(excercise[lastChar]);

    }
}


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

    var typing = textarea.value;
    var lastChar = typing.length;

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

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

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

/**
 * Split type string by '_' and return its length
 * @return [number] how many '_'...