JSFiddle - React, Tailwind, and code Playground

by salitrapraveen

HTML

<div id="sample_pane">
    <h1>Sample Text</h1>
    <p id="sample_p"></p>
    </div>
<div id="user_pane">
    <h1>Type Your Text Here</h1>
    <textarea id="sample_text"></textarea></div>
<div id="status_pane">
    <h1>Typing Status</h1>
    Timer: <span id="timer">0 seconds</span><br/>
        Word Counter: <span id="word_count">0</span><br/>
        Words per Minute: <span id="wpm">NA</span><br/>
</div>

CSS

#sample_pane,
#user_pane {
 width: 75%;
 height: 250px;
 float: left;   
 border: 1px solid #6E9BA6;
    padding: 6px;
 position: absolue;
 overflow: auto;
    -moz-box-sizing: border-box;
-ms-box-sizing: border-box;
-webkit-box-sizing: border-box;
    
}

#status_pane {
 width: 25%;
 height: 500px;   
 border: 1px solid #6E9BA6;
 position: absolue;
        padding: 6px;
 overflow: auto;
 font-size: 12px;
 font-weight: bold;
 -moz-box-sizing: border-box;
-ms-box-sizing: border-box;
-webkit-box-sizing: border-box;
}

textarea {
  width: 95%;
  height: 80%;
}

h1 {
 font-size: 14px;
 color:     #6E9BA6;
 display: block;
 font-weight: bold;
    margin-bottom: 10px;
}
span {
font-weight:normal;
line-height: 20px;
}

JavaScript

$(function() {
    var timer = 0,
        timerObj, sampleText = 'The coding problem you have received is part of your interview process for Vitera. This is your opportunity to demonstrate your engineering and communication skills for us,your prospective employer.',
        currOffset = 0,
        wordCounter=0;

    var init = function() {
        $('#sample_p').text(sampleText);
        $("#sample_text").focus();
    };

    var startTimer = function() {
        $('#timer').text(timer + ' seconds');
        timer++;
        timerObj = setTimeout(startTimer, 1000);
    }

      
    $('#sample_text').keypress(function(e) {
        if (timer === 0) {
//start the timer                
            startTimer();
        }

  //check whether keypressed char is equal to currOffset char of sample text.
        if (String.fromCharCode(e.which) === sampleText.charAt(currOffset)) {
    //both characters are equal, increment offset..
    currOffset++;


if(e.which===32){
 wordCounter++;
    $('#word_count').text(wordCounter);
}
        }
            else{
            //notify user of wrong text..
            }

    });


    init();

});