JSFiddle - React, Tailwind, and code Playground

by Daniel Flores

HTML

<!-- For Display Purposes -->
<div id="console"></div>

CSS

/* For Display Purposes */
#console {
  min-width: 300px;
  width: 50%;
  min-height: 300px;
  margin: 10px auto;
  font-family: arial;
  background-color: #BADA55;
  color: black;
  font-weight: bold;
  padding: 10px;
  border-radius: 5px;
}

TypeScript

/*
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.";

function paragraphBreaker(input: string, n: number): string[] {
	const words = input.split(" ");
  const result: string[] = [];
  let currentRow: string = "";
  
  for (let i = 0; i < words.length; i++) {
    const word = words[i];
    if (currentRow.length === 0) {
    	currentRow = word;
    }
    else if (currentRow.length + 1 + word.length <= n) {
    	currentRow += " " + word;
    } else {
      result.push(currentRow);
      currentRow = word;
    }
    
    if (i === words.length -1) {
      result.push(currentRow);
    }
  }
  
  return result;
}

const result = paragraphBreaker(sample, 20);

/* For Display Purposes */
function renderResult(): string {
  return result.map(function(row) {
...