function filter_title(query, articles)
{
	const search = query.trim().toLowerCase();

	if (search.length === 0) {
		articles.forEach(article => article.style.display = 'block');
		return;
	}
	articles.forEach(article => {
		const title = article.dataset.title || '';
		article.style.display = title.includes(search) ? 'block' : 'none';
	});
}

window.addEventListener('DOMContentLoaded', () => {
	document.querySelector('.search-wrapper').innerHTML =
		'<input class="search" type="search" placeholder="Search">';

	const search = document.querySelector("input[type='search']");
	const articles = Array.from(document.querySelectorAll('article'));

	search.addEventListener('input', () => filter_title(search.value, articles));
});