JSFiddle - React, Tailwind, and code Playground

by michaelburtonray

HTML

<form id="color-form">
        <input type="button" value="Red" data-color="red">
        <input type="button" value="White" data-color="white">
        <input type="button" value="Blue" data-color="blue">
        <input type="button" value="Green" data-color="#008000'">
        <input type="button" value="USA" data-color="red,white,blue">
        <input type="button" value="Off" data-color="black">
        <input type="button" value="Auto" data-color="red, white, blue, orange, black">
    </form>

JavaScript

(function(){
        
        var color_form, colors_array, animation_frame_request;
        
        function init() {
            var color_form = document.querySelector('#color-form');

            color_form.addEventListener('click', changeBackground, true);
    
        }
        
        
        function changeBackground(event) {
            event.preventDefault();
            
            // Stop the loop
            cancelAnimationFrame(animation_frame_request);

            console.log(event.target.dataset.color.split(',').length);
            
            var colors = event.target.dataset.color.split(',');
            
            if(colors.length > 1) {
                colors_array = colors;
                cycle_background_colors();
            } else {
                document.bgColor = colors[0];
            }
             
            
        }
        
        function cycle_background_colors() {
            animation_frame_request = requestAnimationFrame(cycle_background_colors);
            
            var color = colors_array.shift();
            console.log(typeof color, color);
            document.bgColor = color;
            colors_array.push(color);
        }
        
        document.addEventListener('DOMContentLoaded', init);    
    
    }).call();