JSFiddle - React, Tailwind, and code Playground

by Amin Kodaganur

HTML

<div id="output">
  
</div>

CSS

#output{
  font-size: 44px;
  font-weight: bold;
  letter-spacing: 3px;
}

JavaScript

var colors = ["red","blue","green","brown","pink","yellow"]

rainbow("abcdefghiklmnoabcdefghiklmno");

function rainbow(str = "abcdefghiklmno") {
	let result = "";
	const a = Math.ceil(str.length/colors.length);
    let midSubStrLength = str.length%a;
    let slotNo = 0;
    
    console.log(str.length, a, midSubStrLength);
    for (let j = 0; j < str.length;) {
        if(slotNo < a-1) { // 1st Half
            subStr = str.substring(j,j+a);
            // CSS code to color
            result += subStr + ":" + colors[slotNo] + " ";
            createNode(subStr,colors[slotNo]);
            j = j + a;
        }
        else if(slotNo == a-1 && midSubStrLength) { //Mid
            subStr = str.substring(j,j+midSubStrLength);
            // CSS code to color
            result += subStr + ":" + colors[slotNo] + " ";
            createNode(subStr,colors[slotNo]);
            j = j + midSubStrLength;
        }
        else { // Last
            subStr = str.substring(j,j+a);
            // CSS code to color
            result += subStr + ":" + colors[slotNo] + " ";
            createNode(subStr,colors[slotNo]);
            j = j + a;
        }
        slotNo++;
    }
    console.log(result);
}

function createNode(str,color){
	let elem = document.createElement("span");
  elem.innerText = str;
  elem.style.color = color;
  document.getElementById("output").appendChild(elem);
}