thatdevgirl/character-counter.html

## 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);
	})
};
	<!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>
	// 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);
	})
	};