JSFiddle - React, Tailwind, and code Playground

by bnickel

HTML

<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
<div id="demo">
    <button>Click me (or touch)</button>
    <div>Div</div>
    <a href="javascript:log('A: page action')">Link</a>
</div>

<pre id="log"></pre>

CSS

#demo {
    text-align: center
}

#demo > * {
    display: block;
    margin: 1em;
}

#demo > :not(button) {
    line-height: 3em;
    background: #ddd;
}

JavaScript

$(function() {
    
    var $button = $('#demo *');
    var $log = $('#log');

    var startTime;
    
    function log(message) {
        if(!startTime) {
            startTime = Date.now();            
        }
        
        var delta = (Date.now() - startTime) + '';
        message = '     '.substring(delta.length) + delta + '  ' + message;
        $('<div/>').text(message).appendTo($log);
    }
    
    // Clear every time.
    $button.bind('touchstart', function() {
        startTime = undefined;
        $log.empty();
    });
    
    $button.bind('mousedown mouseup mouseenter mouseleave click dblclick touchstart touchend touchmove touchcancel', function(event) {
        log(this.nodeName + ': ' + event.type);
    });
    
    $button.bind('tap singleTap doubleTap longTap swipe swipeUp swipeDown swipeLeft swipeRight', function(event) {
        log(this.nodeName + ': ' + event.type + ' (zepto)');
    });
    
    window.log = log;
});