🍦 Vanilla JavaScript

Projects for the Vanilla JS Academy

Day 11

Announcing the Count

Goal

Modify the previous script to announce the current count to screen reader users as it changes.

Project

You’ve written 0 words and 0 characters.

View Source
(function() {
	let elText = document.querySelector( "#text" );
	let elStatus = document.querySelector( "#status" );
	elText.addEventListener( "input", e =>
	{
		let charCount = e.target.value.length;
		let wordCount = e.target.value.trim()
			.split( /\s+/g )
			.length;

		elStatus.innerHTML = `You&rsquo;ve written <strong>${wordCount} words</strong> and <strong>${charCount} characters</strong>.`;
	});
})();