JSFiddle - React, Tailwind, and code Playground

by Daniel Flores

HTML

<html>

<body>
<div id="click-btn" >
  This is the area where the text will go.
</div>
</body>
</html>

JavaScript

/*
Given a paragraph of text, break it down to rows of strings with a maximum of N characters per row.
Try to fit as many words into each row without breaking a word apart. Assume every word is smaller than N characters.
*/

const sample = "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed ligula massa, pretium nec sagittis posuere, ornare in augue. Integer porta sapien quis diam tempor, id commodo lorem tempor. Vestibulum ac semper erat, eget venenatis risus. Pellentesque enim nisl, dignissim quis ullamcorper sed, pretium ac ligula. Etiam in dui ipsum. Mauris nisi lorem, facilisis at feugiat non, tristique pretium eros. Donec ultricies nibh urna, egestas iaculis nulla aliquet eget. Phasellus vitae tellus sagittis, viverra elit vel, porta neque. Pellentesque enim augue, malesuada ut risus nec, eleifend fringilla purus. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Curabitur luctus, leo vitae interdum varius, lacus sapien imperdiet erat, eget aliquam orci mauris sit amet risus. Pellentesque maximus nibh id diam elementum aliquam eget vitae nisl. Morbi maximus eu sem sed posuere. Nullam aliquam ut dui nec tempus. Phasellus eget justo facilisis, lacinia quam at, sagittis tortor. Maecenas accumsan vitae justo at blandit.";

let sample2 = "My name is Timothy Kinzer. How you doing???";

let rowsList = [];

atomtickets.com

function sortRows(sample,N) {
	let row = "";
  //iterate thru string and break at each space + 1
  const arrayOfWords = sample.split(' ');
  console.log("Array of Words: ", arrayOfWords);
  // for (let i = 0; i < arratOfWords.length; i++)
  for(let i = 0; i < arrayOfWords.length; i++) {
  	let word = arrayOfWords[i];
  	console.log("Words: ", word);
  	//each word is word.length + 1
  	if(row.length + (word.length + 1) <= N) {
    	//add to row
      row += " " + word;
      
    } else {
    	console.log("Hit the limit");
    	//add row to rowsList
      rowsList.push(row);
     ...