JSFiddle - React, Tailwind, and code Playground

by oti ext

HTML

<div id="box">init.</div>

CSS

#box{
    width: 100px;
    height: 100px;
    background-color: gold;
}

JavaScript

var box = document.querySelector('#box');
var timer = timer2 = null;
var clickHandlr1 = function(){
    box.style.backgroundColor = 'skyblue';
    box.removeEventListener('click', clickHandlr1, false);
    box.addEventListener('click', clickHandlr2, false);
    clearTimeout(timer);
    clearTimeout(timer2);

    timer = setTimeout(function(){
        box.firstChild.nodeValue = '1s past.';
        box.removeEventListener('click', clickHandlr2, false);
        
        timer2 = setTimeout(function(){
            initHandlr();
        }, 500);
    }, 1000);
};

var clickHandlr2 = function(){
    box.firstChild.nodeValue = 'you clicked two.';
    box.style.backgroundColor = 'tomato';
    clearTimeout(timer);
    clearTimeout(timer2);

    timer2 = setTimeout(function(){
        box.removeEventListener('click', clickHandlr2, false);
        initHandlr();
    }, 500);
};

var initHandlr = function(){
    box.addEventListener('click', clickHandlr1, false);
    box.style.backgroundColor = 'gold';
    box.firstChild.nodeValue = '';
};

box.addEventListener('click', clickHandlr1, false);