JSFiddle - React, Tailwind, and code Playground

by Paulpro

HTML

<div id="thediv"></div>

CSS

#thediv{
    height: 300px;
}

JavaScript

function rgb(r, g, b){
    var r = +r ? +r : 0;
    var g = +g ? +g : 0;
    var b = +b ? +b : 0;    
    this.getRed = function(){
        return r;
    }
    this.getGreen = function(){
        return g;
    }
    this.getBlue = function(){
        return b;
    } 
    this.setRed = function(x){
        r = Math.max(0, Math.min(x, 255));
    }
    this.setGreen = function(x){
        g = Math.max(0, Math.min(x, 255));
    }
    this.setBlue = function(x){
        b = Math.max(0, Math.min(x, 255));
    } 
    this.toString = function(){
        return 'rgb('+r+','+g+','+b+')';
    }
}

var thecolor = new rgb(Math.floor(Math.random()*256),
                  Math.floor(Math.random()*256),
                  Math.floor(Math.random()*256));;
document.getElementById('thediv').style.backgroundColor = thecolor;
setInterval(function(){
    thecolor.setRed(thecolor.getRed() + Math.floor(Math.random()*3)-1);
    thecolor.setGreen(thecolor.getGreen() + Math.floor(Math.random()*3)-1);
    thecolor.setBlue(thecolor.getBlue() + Math.floor(Math.random()*3)-1);
    document.getElementById('thediv').style.backgroundColor = thecolor;
}, 1);