JSFiddle - React, Tailwind, and code Playground

by bjoerne

HTML

<script src="https://code.jquery.com/jquery-3.2.1.min.js"></script>
<a id="click-me" href="javascript:void(0)">Click me!</a>
<div id="console"></div>

CSS

body {
  font-size: 30px;
}
#console {
  margin-top: 20px;
  border: 1px solid white;
  min-height: 100px;
}

JavaScript

var timeout = 0;
function appendToConsole(text) {
	var $console = $('#console');
	var html = $console.html();
  html += text + '<br />';
  $console.html(html);
}
$('#click-me').on('click', function() {
	appendToConsole('click');
  window.setTimeout(function() {
  	appendToConsole('timeout click');
  }, timeout);
}).on('mouseover', function() {
	appendToConsole('mouseover');
  window.setTimeout(function() {
  	appendToConsole('timeout mouseover');
  }, timeout);
}).on('mouseout', function() {
	appendToConsole('mouseout');
  window.setTimeout(function() {
  	appendToConsole('timeout mouseout');
  }, timeout);
}).on('tap', function() {
	appendToConsole('tap');
  window.setTimeout(function() {
  	appendToConsole('timeout tap');
  }, timeout);
});