JSFiddle - React, Tailwind, and code Playground

HTML

<h1>Primer transformacije stringa</h1>
<form>
  <textarea id="txtInput" columns="20" rows="5" placeholder="Unesite reč dužine 3-100 karaktera."></textarea>
</form>

<button id="btnTransform">
        Transformiši tekst!
    </button>

<div>
  Rezultat:
</div>
<div id="txtTransformed">
</div>

CSS

#txtTransformed {
  border: darkgray 1px inset;
  max-width: 200px;
  min-height: 50px;
}

JavaScript

document.getElementById("btnTransform").addEventListener("click", txtTransformer);

         function txtTransformer() {
           var txtInput = document.getElementById("txtInput").value;
           var txtInputLength = txtInput.length;
           var txtTransformed = document.getElementById("txtTransformed");
           txtTransformed.innerHTML = "";
           var txtInputLengthFactors = [1];
           for (let i = 2; i < Math.sqrt(txtInputLength); i++) {
             if (txtInputLength % i == 0) {
               txtInputLengthFactors.push(i);
             }
           }
           var numberOfRows = Math.max(...txtInputLengthFactors);
           var numberOfColumns = txtInputLength / numberOfRows;
           for (let i = 0, reversed = false; i < numberOfRows; i++) {
             if (!reversed) {
               txtTransformed.innerHTML += txtInput.substring(numberOfColumns * i, numberOfColumns * (i + 1)) + "<br>";
               reversed = true;
             } else {
               txtTransformed.innerHTML += txtInput.substring(numberOfColumns * i, numberOfColumns * (i + 1)).split("").reverse().join("") + "<br>";
               reversed = false;
             }
           }
         }