JSFiddle - React, Tailwind, and code Playground

HTML

<div id="gesuredZone">
</div>

CSS

#gesuredZone {
    width: 500px;
    height: 500px;
    background-color: #33B5E5;
}

JavaScript

var touchstartX = 0;
var touchstartY = 0;
var touchendX = 0;
var touchendY = 0;

var gesuredZone = document.getElementById('gesuredZone');

gesuredZone.addEventListener('touchstart', function(event) {
    touchstartX = event.screenX;
    touchstartY = event.screenY;
}, false);

gesuredZone.addEventListener('touchend', function(event) {
    touchendX = event.screenX;
    touchendY = event.screenY;
    handleGesure();
}, false); 

function handleGesure() {
    var swiped = 'swiped: ';
    if (touchendX < touchstartX) {
        document.getElementById('gesuredZone').innerHTML = swiped + 'left!';
    }
    if (touchendX > touchstartX) {
        document.getElementById('gesuredZone')(swiped + 'right!');
    }
    if (touchendY < touchstartY) {
        document.getElementById('gesuredZone')(swiped + 'down!');
    }
    if (touchendY > touchstartY) {
        document.getElementById('gesuredZone')(swiped + 'left!');
    }
    if (touchendY == touchstartY) {
        document.getElementById('gesuredZone')('tap!');
    }
}