yawboakye/word-counter.html

## word-counter.html
<!doctype html>
<html>
<head>
  <title>Count 'em</title>
	<style>
		* { margin:0; padding:0; }
		div.wrap { width: 70%; margin: 5% auto; text-align: center; }
		textarea { width: 100%; height: 200px; }
		p { display: block; background-color: rgb(193, 202, 142);}
	</style>
</head>
<body>
	<div class="wrap">
		<div><textarea class="text"></textarea></div>
		<div><p class="display">0 words</p></div>
	</div>
	<script>
		// most important part
		var area = document.getElementsByTagName('textarea')[ 0 ],
			disp = document.getElementsByTagName('p')[ 0 ];

		area.addEventListener( 'keyup', ( function (e) {
			var text = this.value.trim();
			disp.innerHTML = text.length === 0
				? '0 words'
				: text.replace(/\s+/g, ' ').split(' ').length + ' words';
		}) )
	</script>
</body>
</html>
	<!doctype html>
	<html>
	<head>
	<title>Count 'em</title>
	<style>
	* { margin:0; padding:0; }
	div.wrap { width: 70%; margin: 5% auto; text-align: center; }
	textarea { width: 100%; height: 200px; }
	p { display: block; background-color: rgb(193, 202, 142);}
	</style>
	</head>
	<body>
	<div class="wrap">
	<div><textarea class="text"></textarea></div>
	<div><p class="display">0 words</p></div>
	</div>
	<script>
	// most important part
	var area = document.getElementsByTagName('textarea')[ 0 ],
	disp = document.getElementsByTagName('p')[ 0 ];

	area.addEventListener( 'keyup', ( function (e) {
	var text = this.value.trim();
	disp.innerHTML = text.length === 0
	? '0 words'
	: text.replace(/\s+/g, ' ').split(' ').length + ' words';
	}) )
	</script>
	</body>
	</html>