JSFiddle - React, Tailwind, and code Playground

by Tan

HTML

<div>
How Many? 160<input name="lim" id="lim160" type="radio" value="160" checked="checked" onclick="cd()"> 320<input name="lim" id="lim320" type="radio" value="320" onclick="cd()">
</div>

<textarea id="area" cols="60" rows="10" cols="50" maxlength="160" onkeydown="count()"></textarea>

<button onclick="myfunc()">
go!
</button>


<div id="output">

</div>
<p>

</p>
<div><span id="output2">160</span> characters left</div>

JavaScript

function myfunc() {
    //assign value of textarea to mytext
    var myText = document.getElementById("area").value.replace(/\s+/g, "_");
var j = "p";

    //split mytext by nextline = "\n" 
    var myArray = myText.split("");

    //to check the result
    var fil;
    var result = '';
    for(i=0;i<myArray.length;i++)
    {   
        var x = Math.floor((Math.random() * 10) + 1);
        if (myArray[i] == "_") {fil = "</div><div>"} else {fil = ""}
        result += "." + myArray[i] + "." + x + fil;
    }

    document.getElementById("output").innerHTML = result;
    
}

var limit; var lim;

function cd() {
if(document.getElementById('lim160').checked) {
limit = 160; lim = 160;
} else {limit = 320; lim = 320;}
document.getElementById("output2").innerHTML = limit;

}

function count() {
 
var key = event.keyCode || event.charCode;

if( key == 8 || key == 46 ) {
limit = (limit + 1);
}
else {limit = (limit - 1);}

if (limit < 0) {limit = 0}
if (limit > lim) {limit = lim}

document.getElementById("output2").innerHTML = limit;




}