This component is a simple jQuery function that adds a character counter to a form field. The function takes a single parameter - the character limit of the specified form element.

## character-counter.html
<!DOCTYPE html>
<html lang="en">

  <head>
    <title>Character Count using jQuery</title>
  </head>

  <body>
    <header>
      <h1>Character Count using jQuery</h1>
    </header>

    <main>
      <textarea class="countMe"></textarea>
    </main>

    <script src="https://code.jquery.com/jquery-3.4.1.min.js"></script>
    <script src="character-counter.js"></script>

    <script>
      $( '.countMe' ).characterCount( 250 );
    </script>
  </body>

</html>

## character-counter.js
// Append a character count element in the DOM.
$.fn.characterCount = function(max) {
	if (this.val() == undefined) { return false; }

	// Calculate remaining characters based on the initial value of the field.
	var remaining = max - this.val().length;

	// Display initial remaining character count message.
	this.after(
		'<div class="characterCount">' +
		'(<span>' + remaining + '</span> characters remaining)' +
		'</div>');

	// Set the max length of the text area.
	this.attr('maxlength', max);

	// Keyup event to update remaining character count message.
	var parent = this.parent();

	this.keyup(function() {
		var remaining = max - $(this).val().length;
		$('.characterCount span', parent).html(remaining);
	})
};