JSFiddle - React, Tailwind, and code Playground

by John Kawakami

HTML

<div id="one" class="box"></div>

CSS

.box {
    width: 20px; 
    height: 20px;
    background-color: silver;
    border: 1px solid silver;
}
.light {
    background-color: yellow;
}
.dark {
    background-color: #003;
}

JavaScript

dispatch = d3.dispatch('light', 'dark');
dispatch.on('light.one', function() {
	d3.select('#one').classed({'light':true, 'dark':false});
});
dispatch.on('dark.one', function() {
	d3.select('#one').classed({'light':false, 'dark':true});
});

state = 0;
d3.select('#one').on("click", function() {
    state = (state + 1) % 2;
    console.log(state);
    if (state==0) {
	    dispatch.light();
    } else {
        dispatch.dark();
    }
});