How to fill 128 boxes with 8 different code from mid of the row using program

I want to fill the 128 boxes with different no. of colors.

Let’s consider that I have 8 colors to fillup those boxes and please check the below visual representation for an expected output.

I’ve tried by using the Javascript, but didn’t get the expected result,

window.onload = function() {
    var res = ''
    ,   order = {}
    ,   levels = {'#': 'red', '&': '#009688', 'O': '#FF9800', '@': '#FFEB3B', '%': '#9C27B0', '*': '#2196F3', '^': '#00BCD4', '-': '#FF9800'}
    ,   symbols = Object.keys(levels)
    ,   totalLevels = symbols.length;


    for (i=0; i < 128; i++) { order[i+1] = ' ';  }
    var ids = '';
    for (v=1; v <= 8; v++) {
        var level = v;
        var times = Math.ceil(128/level);
        ids += 'Level ' + level + ' (Times: '+ times + ') : &nbsp;&nbsp;&nbsp;&nbsp;';

        console.log(times);
        for (i=1; i <= times; i++) {
            var idx = i * (times-1);
            if (idx <= 128) {
                order[idx] = symbols[level-1];
                ids += (idx-1) + ', ';
            }
        }

        ids += '<br />';
    }

    var row1 = '<td>&nbsp;</td>'
    ,   row2 = '<td class="header red">Symbol</td>'
    Object.entries(order).map(function(item, i) {
        var symbol = item[1]
        ,   color  = symbol != ' ' ? levels[symbol] : '';

        row1 += '<td style="font-weight: bold;">'+ item[0] + '</td>';
        row2 += '<td style="'+ (color != '' ? 'background: '+ color +'; font-weight: bold; color: #fff;' : '') +'">'+ symbol + '</td>';
    });


    // Color bar
    bar = '<div id="color-bar">';
    Object.entries(levels).map(function(item, i) {
        bar += '<div class="code" style="background: '+ item[1] +'">'+ item[0] +'</div>';
    });

    bar += '<div>'+ ids + '</div>';
    bar += '</div>';

    document.getElementById('result').innerHTML = bar +'<table><tr>' + row1 + '</tr><tr>' + row2 + '</tr></table>';
}

table {
    margin-top: 20%;
}
td {
    padding: 10px;
    text-align: center;
    min-width: 100px;
    min-height: 100px;
    border-bottom: 1px dotted #ccc;
    border-right: 1px dotted #ccc;
}

.header {
    background: #eee;
    font-weight: bold;
}

.red {
    background: #f33;
    font-weight: bold;
}

#color-bar {
    width: 100%;
    position: fixed;
    top: 10px;
}

#color-bar .code {
    width: 10%;
    text-align: center;
    padding: 15px;
    font-weight: bold;
    display: inline-block;
}

        <div id="result"></div>

Looks like the logic is not correct!, Please correct me if anything wrong. Thanks,

I’m deeply looking for the logic only. Any programming language is fine for me. (C/C++, Python, PHP, JAVA, Javascript, even shell script!)

Answer

This formula does not match your description:

 Math.ceil(128/level);

because you describe powers of two (64, 32, …), but here you get results like 128/3 = 43.

Although not an exact match (see my comment below your question), you could count the number of trailing zeroes in the binary representation of the number, and start counting from zero (so 0..127):

decimal	7-bit binary	# trailing zeroes	color
0	0000000	7	red
1	0000001	0	gray
2	0000010	1	purple
3	0000011	0	gray
4	0000100	2	orange
…	…	…	…
8	0001000	3	cyan
…	…	…	…
16	0010000	4	yellow
…	…	…	…
32	0100000	5	blue
…	…	…	…
64	1000000	6	green
…	…	…	…
127	1111111	0	gray
128	0000000	7	red

So then the algorithm can be a bit-checking one:

let colors = ["gray", "purple", "orange", "cyan", "yellow", "blue", "green", "red"];
let container = document.getElementById("content");
for (let i = 0; i <= 128; i++) {
    let zeroes = Math.min(7, 31 - Math.clz32(i ^(i-1)));
    let color = colors[zeroes];
    let div = document.createElement("div");
    div.textContent = i;
    div.style.background = color;
    container.appendChild(div);
}

#content div {
    width: 50px;
    height: 20px;
    border: 1px solid;
    margin: 3px;
    text-align: center;
    color: white;
}

<div id="content"></div>

Explanation of the formula

The formula is Math.min(7, 31 - Math.clz32(i ^(i-1))).

• i ^ (i-1) gives the value when of all the binary 1-bits only the least significant remains and all others become zero.
• Math.clz32 is a little known function that counts the leading zeroes (in 32-digit binary) of a given number.
• Subtracting that from 31 gives us the number of trailing zeroes.
• Math.min(7, ...) We want to get a number between 0 and 7 (trailing zeroes). This final step avoids an out of range value (which we would get for 0).