JSFiddle - React, Tailwind, and code Playground

by arian

HTML

<div id="clickme">You can click me sevaral times</div>

CSS

#clickme {
    display: block;
    padding: 20px;
    font-size: 2em;
}
    
p.count {
    font-size: 0.5em;
}

JavaScript

Event.definePseudo('count', function(split, fn, args){
    var event = args[0];
    
    var count = this.retrieve('count', 0),
        span = this.retrieve('count-span');
    
    if (!span) span = new Element('p.count').inject(this);
    
    count += 1;
    
    span.set('text', ' i\'m clicked ' + count + ' ' + (count == 1 ? 'time' : 'times'));
    
    this.store('count', count)
        .store('count-span', span);
    
    fn.apply(this, args);

});

document.id('clickme').addEvent('click:count', function(){
    this.highlight();
});