diekmann/f.html

## f.html
<html>
<head>
<style>
/* The printing of Fizz or Buzz instead of numbers is just style. Moving the logic to CSS.*/
p:nth-child(3n){
visibility: hidden;
}
p:nth-child(3n)::before{
visibility: visible;
font-size: medium;
content: "Fizz";
}
p:nth-child(5n){
visibility: hidden;
font-size:0;
}
p:nth-child(5n)::after{
visibility: visible;
font-size: medium;
content: "Buzz";
}
</style>
</head>
<body>
<p>1</p>
<script>
const last = (t) => Array.from(document.querySelectorAll(t)).pop();
const append = (type, txt) => last('body')
			.appendChild(document.createElement(type))
			.appendChild(document.createTextNode(txt));

/* Everything needs an event queue.*/
const queue = [];
const enqueue = queue.unshift.bind(queue);
const dequeue = queue.pop.bind(queue);

/* Such an async main event processing loop*/
((f) => f(f))((f) => setTimeout(() => dequeue()().then(f(f)), 200));
</script>
<script>
/* Use the DOM! */
enqueue(async () => {
	append('p', Number(last('p').textContent)+1);
	append('script', last('script').textContent);
	});
</script>
</body>
	<html>
	<head>
	<style>
	/* The printing of Fizz or Buzz instead of numbers is just style. Moving the logic to CSS.*/
	p:nth-child(3n){
	visibility: hidden;
	}
	p:nth-child(3n)::before{
	visibility: visible;
	font-size: medium;
	content: "Fizz";
	}
	p:nth-child(5n){
	visibility: hidden;
	font-size:0;
	}
	p:nth-child(5n)::after{
	visibility: visible;
	font-size: medium;
	content: "Buzz";
	}
	</style>
	</head>
	<body>
	<p>1</p>
	<script>
	const last = (t) => Array.from(document.querySelectorAll(t)).pop();
	const append = (type, txt) => last('body')
	.appendChild(document.createElement(type))
	.appendChild(document.createTextNode(txt));

	/* Everything needs an event queue.*/
	const queue = [];
	const enqueue = queue.unshift.bind(queue);
	const dequeue = queue.pop.bind(queue);

	/* Such an async main event processing loop*/
	((f) => f(f))((f) => setTimeout(() => dequeue()().then(f(f)), 200));
	</script>
	<script>
	/* Use the DOM! */
	enqueue(async () => {
	append('p', Number(last('p').textContent)+1);
	append('script', last('script').textContent);
	});
	</script>
	</body>