JSFiddle - React, Tailwind, and code Playground

by shapeshifta

HTML

<div class="oh">
    <a href="#" id="testling">Hit me!</a><a href="#" id="empty">Reset</a>
</div>

CSS

body{width:340px}
.oh{ overflow:hidden }
a{ float:left;padding:10px;color:#fff;font-weight:bold;text-decoration:none }
ul{ background:#ECECEC; color:#aaa; margin:5px 10px;padding:2px }

#testling{ width:200px;background:#486C98 }
#testling:focus{ background:#f00 }
#empty{ width:100px;background:black }

JavaScript

(function($){
    
var o = o || {
    mouseHandler : function(e){
        o.add(e.type);
        $('body').append(o.generate());
        o.clearList();
    },
    list : [],
    add : function(el){
        o.list.push(el);
    },
    generate : function(){
        return '<ul><li>Event-Typ</li><li>' + o.list.join('</li><li>') + '</li></ul>';
    },
    clearList : function(){
        o.list = [];
    },
    reset : function(){
        $('ul').remove();
    }
};

$('#testling')
    .on('mouseover mousemove mousedown focus mouseup click', o.mouseHandler);
$('#empty')
    .on('click', o.reset);

})(jQuery);