JSFiddle - React, Tailwind, and code Playground

by Dhanck

HTML

<div class="panel panel-default">
    <form name="theForm">
        <div class="title">Buscar un Titulo</div>
        <div class="btn-group pull-right spacer">
            <button type="button" class="btn btn-default btn-sm" onClick="beginit(r())">Beginner</button>
            <button type="button" class="btn btn-default btn-sm" onClick="beginit(s())">Novice</button>
            <button type="button" class="btn btn-default btn-sm" onClick="beginit(t())">Expert</button>
        </div>
        <textarea class="form-control spacer" id="textarea" name="given" onFocus="cheat()"></textarea>
        <input id="text" name="typed" type="text" placeholder="Copy the text on the area above after you select a level" class="form-control input-md spacer">
        <div class="btn btn-default" onClick="stopIt()" data-toggle="modal" data-target="#myModal"><span class="glyphicon glyphicon-ok"></span> Done</div>
    </form>
</div>
<div id="myModal" class="modal fade" role="dialog">
    <div class="modal-dialog modal-lg">
        <!-- Modal content-->
        <div class="modal-content">
            <div class="modal-header">Your Result!!</div>
            <div class="modal-content">
                <div id="result"></div>
            </div>
        </div>
    </div>
</div>

CSS

body {
    margin:30px;
}
.panel {
    padding:10px;
}
textarea {
    display: block;
    width:100%;
    height:250px!important;
}
#result {
    padding:10px;
}
.spacer {
    margin-bottom:10px;
}
.title{
    float:left;
    font-weight:700;
    margin-top:5px;
}

JavaScript

var count = 0;
var msgType = "welcome,";
var msgType1 = "";

function r() {
    var msgType1 = "";
    var msg = ['Rat', 'ball', 'cow', 'dog', 'sat', '.', 'kite', 'fan', 'hut', 'ink', 'junk', 'man', 'kilo', 'lung', 'monday', 'soon', '.', 'sunday', 'poet', 'raw', 'sat', 'temple', 'user', 'van', 'xmas', 'now', 'owl', '.', 'fun', 'now'];
    for (i = 0; i < 10; i++) {
        var randNum = Math.floor((Math.random() * 29) + 1);

        if (msg[randNum] != ".") msgType = msgType + " " + msg[randNum];
        else msgType = msgType + msg[randNum];
        count++;
    }
}

function s() {
    var msg = ['apple', 'because', 'jute', 'candy', 'dusty', 'enough', '.', 'fell-off', 'ground', 'happen', 'India', 'judicial', 'system', 'know', 'love', 'eating', 'really', '.', 'went', 'play', 'rotten', 'surely', 'title', 'under', 'various', 'expanded', 'data', 'object', '.'];
    for (i = 0; i < 15; i++) {
        var randNum = Math.floor((Math.random() * 28) + 1);

        if (msg[randNum] != ".") msgType = msgType + " " + msg[randNum];
        else msgType = msgType + msg[randNum];
        count++;
    }
}

function t() {

    var msg = ['aahing', 'aaliis', 'aarrgh', 'abacas', ' abacus', 'abamps', 'abased', 'abaser', 'abases', 'forget', 'cofee', 'during', 'last-minute', 'gateways', 'boring', 'brew', 'amazing', 'conversation', 'over', 'relaxing', 'under', 'conversation', 'chewing', 'peeling', 'produces', 'starfish', 'breathing', 'ovaries', 'stomach', 'testicles', 'intestine']
    for (i = 0; i < 20; i++) {
        var randNum = Math.floor((Math.random() * 31) + 1);

        if (msg[randNum] != ".") msgType = msgType + " " + msg[randNum];
        else msgType = msgType + msg[randNum];
        count++;
    }

}

function beginit() {
    day = new Date();
    startType = day.getTime();
    document.theForm.given.value = msgType;
    document.theForm.typed.focus();
    document.theForm.typed.select();
}

function cheat() {
    $('#result').html("You can not change that!");
   ...