JSFiddle - React, Tailwind, and code Playground

by andrew rowe

HTML

<div id='box'></div>
<button id='go'>go</button>
<button id='stop'>stop</button>

CSS

#box {
    height: 50px;
    width: 80%;
    border: 1px solid blue;
}

JavaScript

var interval;
var box = $('#box');
var r = 0,
    rp = 5,
    g = 0,
    gp = 0,
    b = 0;
bp = 0

$('#go').click(function (evt) {
    interval = setInterval(function () {
//        var rgb = box.css('background-color');
//        console.log(rgb);
        box.css('background-color', 'rgb(' + r + ',' + g + ',' + b + ')');
        r += rp;
        g += gp;
        b += bp;
        if (r > 255) {
            rp = 0;
            gp = 10;
        }
        if (g > 255) {
            gp = 0;
            bp = 10;
        }
        if (b > 255) {
            rp = 0;
            bp = 0;
            rp = 10;
            r = 0;
            g = 0;
            b = 0;
        }
    }, 100);
})

$('#stop').click(function (evt) {
    clearInterval(interval);
})