JSFiddle - React, Tailwind, and code Playground

by rmurphey

HTML

<table>
<tr>
    <td>1</td><td>2</td><td>4</td><td>8</td>
</tr>
<tr>
    <td>16</td><td>32</td><td>64</td><td>128</td>
</tr>
</table>

CSS

td {
    padding:10px;
    border: 1px solid #000;
    text-align: center;
}

.on {
    background-color: red;
}

JavaScript

var num = 0;
var tds = $('td');

function next() {
    for (var i = 0, bitMask = 128; bitMask > 0; bitMask >> i, i++) {
        tds.eq(i)[ (bitMask & num) ? 'addClass' : 'removeClass' ]('on');
    }
    
    num++;
    
    if (num > 10) { return; }
    
    setTimeout(next, 100);
}

next();