JSFiddle - React, Tailwind, and code Playground

by Porfirio Chavez

HTML

<script src="https://code.jquery.com/ui/1.11.4/jquery-ui.min.js"></script>
<button>Cambiar color</button> 
<div style="
    background:#D51AC9;
    height:100px;
    width: 100px"> 
</div>

JavaScript

$(document).ready(function () {
    var counter = 0;
    var colors = ['purple', 'yellow', 'black', 'blue', 'red'];
    $("button").on("click", function () { 
        console.info(colors[counter]);
        var div = $("div");
        div.animate({ backgroundColor: colors[counter]}, "slow"); 
        counter ++;
        
        if(counter > colors.length){
            counter = 0;
        }
    }); 
});