JSFiddle - React, Tailwind, and code Playground

by r043v

CSS

span { color:red; }
div { color:green; }

JavaScript

function autoColon(nbElem,byLine)
{   if(nbElem <= byLine)
    {    if(nbElem) return "ok 1*"+nbElem;
         return '- empty -';
    }

    var nb = nbElem; 
    var full = 0; while(nb >= byLine) { nb -= byLine; full++; }
    if(!nb) return "ok "+full+"*"+byLine;
    
    var lessSize = byLine - 1;
    var less = 1;
    var diff = lessSize - nb;
    if(diff){
        if(full >= diff)
        {    full -= diff;
             less += diff;
        } else return autoColon(nbElem,lessSize);
    }
  
    var ok = 'ok => ';
    var total = full*byLine + less*lessSize;
    if(total != nbElem) ok = "<span>FAIL ("+total+")</span>";

    if(full) return ok+" "+full+"*"+byLine+" + "+less+"*"+lessSize;
    else return ok+" "+less+"*"+lessSize;
}

function test(byline,max)
{   var o = "<div>testing line size of "+byline+"</div>";
    for(c=1;c <= max;c++)
       o += "<br>"+c+" => "+autoColon(c,byline);
    return o+"<br><br>";
}

var out = ''; for(n=2;n<12;n++) out += test(n,120);

$("body").html(out);