JSFiddle - React, Tailwind, and code Playground

by Jagi

HTML

<div id="a"></div>
<div id="b"></div>

CSS

body { margin: 0; padding: 0; color: gray; }
div {
    font-family: 'Arial', sans-serif;
    font-size: 30px;
    display: block;
    position: absolute;
    vertical-align: top;
    width: 100%; height: 50%;
    text-align: center;
}
div:nth-child(1) {
    top: 50%;
    border-top: 2px dotted black;
}
div ul {
    display: inline-block;
    vertical-align: top;
    list-style: none;
    margin: 0px; padding: 25px;
}
li {
    text-align: left;
}
li.header {
    font-weight: bold;
    padding-bottom: 25px;
    text-align: center;
    color: black;
}
li span {
    font-weight: bold;
    color: black;
}
.red {
    background-color: red;
}

JavaScript

var a = document.getElementById('a');
var b = document.getElementById('b');

var block = function (e, prop) {
    var html = '<ul><li class="header">' + prop + '</li>';
    for (var i = 0; i < e[prop].length; i++) {
        html += '<li><span>' + (i + 1) + '.</span> ' + e[prop][i].pageX + ', ' + e[prop][i].pageY + '</li>'
    }
    html += '</ul>';
    return html;
};

var handler = function (e) {
    e.preventDefault();
    
    if (e.type === 'touchcancel') {
        a.classList.add('red');
        b.classList.add('red');
    } else {
        a.classList.remove('red');
        b.classList.remove('red');
    }
    
    var html = '';
    html += block(e, 'touches');
    html += block(e, 'targetTouches');
    html += block(e, 'changedTouches');
    
    
    this.innerHTML = html;
};

a.addEventListener('touchstart', handler);
a.addEventListener('touchmove', handler);
a.addEventListener('touchend', handler);
a.addEventListener('touchcancel', handler);

b.addEventListener('touchstart', handler);
b.addEventListener('touchmove', handler);
b.addEventListener('touchend', handler);
b.addEventListener('touchcancel', handler);