angusgrant/week2-lesson3.html

## week2-lesson3.html
<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>Character & Word Count - Announcing the Count</title>
		<meta name="viewport" content="width=device-width, initial-scale=1.0">

		<style type="text/css">
			body {
				margin: 0 auto;
				max-width: 40em;
				width: 88%;
			}

			label {
				display: block;
				width: 100%;
			}

			textarea {
				min-height: 24em;
				width: 100%;
			}
		</style>
	</head>
	<body>

		<h1>Character & Word Count</h1>

		<label for="text">Enter your text below.</label>
		<textarea id="text"></textarea>

		<p aria-live="polite" aria-atomic="true">You've written <strong><span id="word-count">0</span> words</strong> and <strong><span id="character-count">0</span> characters</strong>.</p>

		<script>
			// Get the text area, and word and character count elements
			let text = document.querySelector('#text');
			let wordCount = document.querySelector('#word-count');
			let charCount = document.querySelector('#character-count');

			// Listen for changes to the text area content
			text.addEventListener('input', function () {

				// Get the word count
				let words = text.value.split(/[\s]+/g).filter(function (word) {
					return word.length;
				});

				// Display the word count
				wordCount.textContent = words.length;

				// Display the characters count
				charCount.textContent = text.value.length;

			});
		</script>
	</body>
</html>
	<!DOCTYPE html>
	<html>
	<head>
	<meta charset="utf-8">
	<title>Character & Word Count - Announcing the Count</title>
	<meta name="viewport" content="width=device-width, initial-scale=1.0">

	<style type="text/css">
	body {
	margin: 0 auto;
	max-width: 40em;
	width: 88%;
	}

	label {
	display: block;
	width: 100%;
	}

	textarea {
	min-height: 24em;
	width: 100%;
	}
	</style>
	</head>
	<body>

	<h1>Character & Word Count</h1>

	<label for="text">Enter your text below.</label>
	<textarea id="text"></textarea>

	<p aria-live="polite" aria-atomic="true">You've written <strong><span id="word-count">0</span> words</strong> and <strong><span id="character-count">0</span> characters</strong>.</p>

	<script>
	// Get the text area, and word and character count elements
	let text = document.querySelector('#text');
	let wordCount = document.querySelector('#word-count');
	let charCount = document.querySelector('#character-count');

	// Listen for changes to the text area content
	text.addEventListener('input', function () {

	// Get the word count
	let words = text.value.split(/[\s]+/g).filter(function (word) {
	return word.length;
	});

	// Display the word count
	wordCount.textContent = words.length;

	// Display the characters count
	charCount.textContent = text.value.length;

	});
	</script>
	</body>
	</html>