shayc/index.html

## index.html
<html>
	<head>
		<title>Touch logger</title>
		<style>
			html,
			body {
				width: 100%;
				height: 100%;
			}

			body {
				display: flex;
				margin: 0;
				overflow: hidden;
				touch-action: none;
			}

			.box {
				flex: 1;
				display: flex;
				flex-direction: column;
				padding: 1rem;
			}

			.box__header {
				display: flex;
				justify-content: space-between;
				margin-bottom: 1rem;
			}

			.box__title {
				margin: 0;
			}

			.box__content {
				flex: 1;
				overflow: auto;
			}

			#touch {
				background: #ddd;
			}
		</style>
	</head>
	<body>
		<section class="box" id="log">
			<header class="box__header">
				<h2 class="box__title">Events log</h2>
				<button id="clear-log" type="button">Clear</button>
			</header>
			<div class="box__content"></div>
		</section>

		<section class="box" id="touch">
			<h2 class="box__title">Touch area</h2>
		</section>

		<script>
			const logElement = document.querySelector('#log .box__content');
			const touchElement = document.querySelector('#touch');
			const clearLogButton = document.querySelector('#clear-log');

			function scrollToBottom(element) {
				element.scrollTop = element.scrollHeight;
			}

			function addLogEntry({ type, timeStamp, fingerCount }) {
				const entryHTML = `<div>${timeStamp}: ${type} ${fingerCount}</div>`;

				logElement.innerHTML = fingerCount
					? logElement.innerHTML + entryHTML
					: logElement.innerHTML + entryHTML + '<div>---</div>';
			}

			function handleTouch(event) {
				const { type, timeStamp, touches } = event;

				const entry = {
					type,
					timeStamp: timeStamp.toFixed(2),
					fingerCount: touches.length,
				};

				addLogEntry(entry);
				scrollToBottom(logElement);

				console.log(type, event);
			}

			function handleContextmenu(event) {
				event.preventDefault();
			}

			function handleClearLogClick() {
				logElement.innerHTML = '';
			}

			clearLogButton.addEventListener('click', handleClearLogClick);
			touchElement.addEventListener('contextmenu', handleContextmenu);
			touchElement.addEventListener('touchstart', handleTouch);
			touchElement.addEventListener('touchend', handleTouch);
		</script>
	</body>
</html>
	<html>
	<head>
	<title>Touch logger</title>
	<style>
	html,
	body {
	width: 100%;
	height: 100%;
	}

	body {
	display: flex;
	margin: 0;
	overflow: hidden;
	touch-action: none;
	}

	.box {
	flex: 1;
	display: flex;
	flex-direction: column;
	padding: 1rem;
	}

	.box__header {
	display: flex;
	justify-content: space-between;
	margin-bottom: 1rem;
	}

	.box__title {
	margin: 0;
	}

	.box__content {
	flex: 1;
	overflow: auto;
	}

	#touch {
	background: #ddd;
	}
	</style>
	</head>
	<body>
	<section class="box" id="log">
	<header class="box__header">
	<h2 class="box__title">Events log</h2>
	<button id="clear-log" type="button">Clear</button>
	</header>
	<div class="box__content"></div>
	</section>

	<section class="box" id="touch">
	<h2 class="box__title">Touch area</h2>
	</section>

	<script>
	const logElement = document.querySelector('#log .box__content');
	const touchElement = document.querySelector('#touch');
	const clearLogButton = document.querySelector('#clear-log');

	function scrollToBottom(element) {
	element.scrollTop = element.scrollHeight;
	}

	function addLogEntry({ type, timeStamp, fingerCount }) {
	const entryHTML = `<div>${timeStamp}: ${type} ${fingerCount}</div>`;

	logElement.innerHTML = fingerCount
	? logElement.innerHTML + entryHTML
	: logElement.innerHTML + entryHTML + '<div>---</div>';
	}

	function handleTouch(event) {
	const { type, timeStamp, touches } = event;

	const entry = {
	type,
	timeStamp: timeStamp.toFixed(2),
	fingerCount: touches.length,
	};

	addLogEntry(entry);
	scrollToBottom(logElement);

	console.log(type, event);
	}

	function handleContextmenu(event) {
	event.preventDefault();
	}

	function handleClearLogClick() {
	logElement.innerHTML = '';
	}

	clearLogButton.addEventListener('click', handleClearLogClick);
	touchElement.addEventListener('contextmenu', handleContextmenu);
	touchElement.addEventListener('touchstart', handleTouch);
	touchElement.addEventListener('touchend', handleTouch);
	</script>
	</body>
	</html>