Give dynamic rainbow colored borders to ALL the elements being found in query. Quite useful for testing CSS

rainbow.js

// Give dynamic rainbow colored borders to ALL the elements being found in query. Quite useful for testing CSS
function rainbow(query, styles) {
    var colors = ['Red', 'Lime', 'Blue', 'Yellow', 'Cyan', 'Magenta', 'Silver', 'Gray', 'Maroon', 'Olive', 'Green', 'Purple', 'Teal', 'Navy']
    document.querySelectorAll(query).forEach(function(el) {
        var rand = Math.floor(Math.random() * colors.length);
        var color = colors[rand];
        el.style.border = '2px ridge ' + color;
        if(styles != undefined) {
            for(var [key, val] of Object.entries(styles)) {
                el.style[key] = val;
            }
        }
    });
}

// Try this
rainbow("body *", {background: 'red'});