JSFiddle - React, Tailwind, and code Playground

by bnickel

HTML

<div id="zepto">
<strong>Click to load Zepto again. Zepto Instances Loaded:</strong> <span id="zeptoCount">1</span>
</div>
<div id="click">
    Click me. Clicked <span id="clickCount">0</span> times.
</div>
<div id="swipeRight">
    Swipe right. Swiped <span id="swipeRightCount">0</span> times.
</div>

CSS

div {
    text-align:center;
    line-height: 50px;
    border: 2px solid #ccc;
    border-radius: 10px;
    margin: 10px;
}

JavaScript

var zeptoSrc, zeptoCount = 1, clickCount = 0, swipeRightCount = 0;
$('script').each(function() {
    if (/zepto/.test(this.src)) zeptoSrc = this.src;
});

function loadZeptoAgain() {
    $('<script/>').attr('src', zeptoSrc).appendTo(document.body);
    $('#zeptoCount').text(++zeptoCount);
}

function onSwipeRight() {
    $('#swipeRightCount').text(++swipeRightCount);
}

function onClick() {
    $('#clickCount').text(++clickCount);
}

$('#zepto').click(loadZeptoAgain);
$('#swipeRight').swipeRight(onSwipeRight);
$('#click').click(onClick);