import './App.css';

export function App(): DocumentFragment {
	const fragment = document.createDocumentFragment();
	const h1 = document.createElement('h1');
	h1.innerText = 'Hello Vanilla';

	const countNode = document.createTextNode('0');

	const decBtn = document.createElement('button');
	decBtn.innerText = '-';

	const incBtn = document.createElement('button');
	incBtn.innerText = '+';

	fragment.appendChild(h1);
	fragment.appendChild(decBtn);
	fragment.appendChild(countNode);
	fragment.appendChild(incBtn);

	let count = 0;
	const update = () => { countNode.data = String(count); };
	decBtn.onclick = () => { count--; update(); };
	incBtn.onclick = () => { count++; update(); };

	return fragment;
}