JSFiddle - React, Tailwind, and code Playground
HTML
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script src="http://code.jquery.com/jquery-1.10.1.min.js"></script>
<script src="http://code.jquery.com/jquery-migrate-1.2.1.min.js">
</script>
<link href="https://fonts.googleapis.com/css?family=Lato:400,900" rel="stylesheet">
</head>
<body>
<content>
<h1>Text Splitter</h1>
<form>
<label>Enter a Message</label>
<input type="text" name="message" id="user_input">
</form>
<form>
<input type="button" onclick="splitText();" id="submit" value="Submit!"> <br/>
</form>
<label>Your split message: </label>
<p><span id='display'></span></p>
</content>
</body>
</html>
CSS
h1 {
color: #DDDED2;
font-weight: 900;
}
body {
width: 100vw;
background-color: #8D8EA0;
font-family: 'lato', sans-serif;
}
content {
width: 50vw;
text-align: center;
margin: 0 auto;
display: block;
}
p {
color: orange;
}
label {
font-weight: 900;
display: block;
margin: 0.5vw;
}
#user_input {
width: 49vw;
display: block;
margin: 0.5vw;
}
textarea {
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
font-family: 'lato', sans-serif;
width: 49vw;
height: auto;
display: block;
margin: 0.5vw;
}
#submit {
font-family: 'lato', sans-serif;
font-weight: 900;
}
JavaScript
function splitText() {
"use strict";
var str = document.getElementById("user_input").value;
var size = 195;
var chunks = new Array(Math.ceil(str.length / size)),
nChunks = chunks.length;
var newo = 0;
for (var i = 0, o = 0; i < nChunks; ++i, o = newo) {
newo += size;
chunks[i] = str.substr(o, size);
}
var newq = 0;
for (var x = 0, q = 0; x < nChunks; ++x, q = newq) {
$("#display").append("<textarea readonly>" + chunks[x] + "</textarea><br/>");
}
}