JSFiddle - React, Tailwind, and code Playground

by dru_zod

CSS

table.colours {
    border-collapse: collapse;
    border: none;
    margin: 0;
    padding: 0;
    float: left;
}

table.colours td {
    width: 80px;
    height: 80px;
    border: solid 1px black;
}

JavaScript

var cap = function (x) {
        if (typeof x !== 'number')
            return 0;
        if (x < 0)
            return 0;
        if (x > 255)
            return 255;
        return x;
    },
    
    toHex = function (x) {
        x = cap(x);
        return (x < 10)
            ? '0' + x
            : x.toString(16);
    },
        
    colour = {
        toString: function () {
            return 'rgb(' + cap(this.r) + ',' + cap(this.g) + ',' + cap(this.b) + ')';
        },
        scale: function (s) {
            return createColour(this.r * s, this.g * s, this.b * s);
        },
        add: function (c) {
            return createColour(this.r + c.r, this.g + c.g, this.b + c.b);
        },
        subtract: function (c) {
            return createColour(this.r - c.r, this.g - c.g, this.b - c.b);
        },
        cap: function () {
            return createColour(cap(this.r), cap(this.g), cap(this.b));
        },
        toHex: function () {
            return '#' + toHex(this.r) + toHex(this.g) + toHex(this.b);
        }
    },
        
    createColour = function (r, g, b) {
        return Object.create(colour, {
            r: { value: Math.round(r) },
            g: { value: Math.round(g) },
            b: { value: Math.round(b) }
        });
    },
    
    getColours = function (n, c1, c2) {
        var colours = [], i, step, c = c1.cap();
        
        console.log(1/(n - 1));
        
        step = c2.subtract(c1).scale(1/(n - 1));
        
        for (i = 0; i < n - 1; i++) {
            colours.push(c);
            c = c.add(step).cap();
            console.log(c);
        }
        
        colours.push(c2);
        
        return colours;
    },
    
    createColourTable = function (n, c1, c2) {
        var colours = getColours(n, c1, c2), i, html = '', table, attr;
                
        for (i = 0; i < colours.length; i++) {
            html += '<tr><td style="background-color: ' + colours[i] + ';"></td></tr>';
        }
        
   ...