JSFiddle - React, Tailwind, and code Playground

by jersh

HTML

<div class='punch'>Punch</div>
<div class="console"></div>

CSS

.punch {
  width: 200px;
  height: 100px;
  background-color: rgb(118, 246, 204);
  line-height: 100px;
  text-align: center;
}

.console {
  width: 200px;
  background-color: rgb(228, 228, 228);
}

JavaScript

var time = Date.now();
var tap = false;


$('.punch')[0].ontouchend = function() {
  $('.console').append((Date.now() - time) + ' Tap<br>');
  time = Date.now();
  tap = true;
}

$('.punch')[0].onclick = function() {
  if (!tap) {
    $('.console').append((Date.now() - time) + ' Click<br>');
    time = Date.now();
  }
}

window.onkeyup = function() {
  if (!tap) {
    $('.console').append((Date.now() - time) + ' Key<br>');
    time = Date.now();
  }
}