How to Build a Character and Word Counter Using Javascript

Introduction:

In the world of web development, creating practical and user-friendly applications is a common goal. In this tutorial, we'll explore the process of building a Word and Character Counter using HTML, CSS, and JavaScript. This simple yet effective application will allow users to input text, and dynamically display the word and character count in real-time. Let's dive into the step-by-step approach to constructing this handy tool.

• Web Development Essentials:

  Explore the fundamental aspects of web development by creating a practical and user-centric application. This tutorial focuses on building a Word and Character Counter using HTML, CSS, and JavaScript.

• Real-Time Feedback:

  Understand the significance of real-time feedback in user interfaces. The Word and Character Counter application allows users to receive instant updates on the number of words and characters as they type.

• Step-by-Step Approach:

  Follow a systematic step-by-step approach to construct the application. From setting up the HTML structure to implementing JavaScript logic, each stage is explained in detail to ensure comprehension and effective learning.

• User-Friendly Design:

  Design considerations are crucial for a positive user experience. Learn how to style the application using CSS to create an aesthetically pleasing and user-friendly interface.

• Practical Implementation:

  Gain practical insights into JavaScript logic for counting words and characters. The tutorial provides hands-on examples and explanations, making it suitable for developers at varying skill levels.

• Customization Options:

  Extend your knowledge by exploring customization options. This foundational project can serve as a starting point for adding features and functionalities based on specific project requirements.

• Skill Enhancement:

  Building such interactive applications not only enhances coding skills but also contributes to a more engaging and dynamic web environment. Embrace the opportunity to experiment and expand upon the provided foundation.

  By delving into the creation of this Word and Character Counter, developers can strengthen their understanding of HTML, CSS, and JavaScript, paving the way for more sophisticated web development projects.

  Approach:

  1. HTML Structure: Begin by creating a container that will hold all the elements of our application. Inside this container, add a textarea element where users can input text. To display the word and character count, include a paragraph (p) element with two span elements for word and character counters.

     
     <div class="container">
     		<div class="top">
     			<img style="width:70%" src="logo.png" alt="Significant Techno">
     			<h3><b>Character and Word count</b></h3>
     		</div> 
     		<textarea id="textarea"></textarea>
     		<p class="result"> 
     		<span id="words">0</span> Words and <span id="Characters">0</span> Characters 
     		</p> 
     	</div>
     
     

  2. CSS Styling: Style your application by removing default margins and paddings, and set the display property to flex for the container. Align all items in the center using flex properties. Customize the appearance of the textarea and paragraph elements to enhance the overall user experience.

     
     <style> 
     		* { 
     			margin: 0; 
     			padding: 0; 
     			font-family: sans-serif; 
     		} 
     	
     		.container { 
     			width: 100%; 
     			height: 100vh; 
     			display: flex; 
     			flex-direction: column; 
     			justify-content: center; 
     			align-items: center; 
     		} 
     		.top{ 
     			text-align:center
     		}
     		.container h3 { 
     			font-size: 24px; 
     		} 
     		#textarea { 
     			height: 200px; 
     			width: 410px; 
     			resize: none; 
     			font-size: 15px; 
     			font-weight: normal; 
     			margin-top: 15px; 
     			outline: none; 
     			border: 1px solid #01ADEF; 
     		} 
     
     
     		.result { 
     			color: #01ADEF; 
     			font-size: 20px; 
     			width: 401px; 
     			text-align: center; 
     			font-weight: 700; 
     			padding: 5px; 
     			border: 1px solid #01ADEF; 
     			margin-top: 10px; 
     		} 
     
     		#words, #Characters { 
     			font-size: 25px; 
     			font-weight: bold; 
     			color: #F7811F;
     			text-decoration: underline; 
     		} 
     	</style> 
     
     

  3. JavaScript Logic: Implement the JavaScript logic to dynamically count words and characters as the user types. Attach an 'input' event to the textarea, and use the trim and split functions to count words. Additionally, utilize the filter method to remove any empty spaces between words. Display the results in the designated span elements.

     
     <script>
     		let textarea = document.getElementById('textarea'); 
     		let characters = document.getElementById('Characters'); 
     		let words = document.getElementById('words'); 
     
     		textarea.addEventListener('input', function () { 
     			
     			let content = this.value; 
     			characters.textContent = content.length; 
     
     			// remove empty spaces from start and end 
     			content.trim(); 
     
     			let wList = content.split(/\s/); 
     
     			// Remove spaces from between words 
     			let word = wList.filter(function (element) { 
     				return element != ""; 
     			}); 
     
     			words.textContent = word.length; 
     		}); 
     	</script> 
     
     

  Final Code:

  
  
  <!DOCTYPE html> 
  <html lang="en">
  
  <head>
  	<meta charset="UTF-8"> 
  	<meta http-equiv="X-UA-Compatible" content="IE=edge"> 
  	<meta name="viewport" content="width=device-width, initial-scale=1.0"> 
  	<title>Character and Word Counter | Significant Techno</title> 
  
  	<style> 
  		* { 
  			margin: 0; 
  			padding: 0; 
  			font-family: sans-serif; 
  		} 
  	
  		.container { 
  			width: 100%; 
  			height: 100vh; 
  			display: flex; 
  			flex-direction: column; 
  			justify-content: center; 
  			align-items: center; 
  		} 
  		.top{ 
  			text-align:center
  		}
  		.container h3 { 
  			font-size: 24px; 
  		} 
  		#textarea { 
  			height: 200px; 
  			width: 410px; 
  			resize: none; 
  			font-size: 15px; 
  			font-weight: normal; 
  			margin-top: 15px; 
  			outline: none; 
  			border: 1px solid #01ADEF; 
  		} 
  
  
  		.result { 
  			color: #01ADEF; 
  			font-size: 20px; 
  			width: 401px; 
  			text-align: center; 
  			font-weight: 700; 
  			padding: 5px; 
  			border: 1px solid #01ADEF; 
  			margin-top: 10px; 
  		} 
  
  		#words, #Characters { 
  			font-size: 25px; 
  			font-weight: bold; 
  			color: #F7811F;
  			text-decoration: underline; 
  		} 
  	</style> 
  </head> 
  
  <body>
  	<div class="container">
  		<div class="top">
  			<img style="width:70%" src="logo.png" alt="Significant Techno">
  			<h3><b>Character and Word count</b></h3>
  		</div> 
  		<textarea id="textarea"></textarea>
  		<p class="result"> 
  		<span id="words">0</span> Words and <span id="Characters">0</span> Characters 
  		</p> 
  	</div> 
  	
  	<script>
  		let textarea = document.getElementById('textarea'); 
  		let Characters = document.getElementById('Characters'); 
  		let words = document.getElementById('words'); 
  
  		textarea.addEventListener('input', function () { 
  						
  			
  			let content = this.value;
  			Characters.textContent = content.length;
  
  
  			// remove empty spaces from start and end 
  			content.trim(); 
  
  			let wList = content.split(/\s/); 
  
  			// Remove spaces from between words 
  			let word = wList.filter(function (element) { 
  				return element != ""; 
  			}); 
  			
  			
  			words.textContent = word.length;
  		}); 
  	</script> 
  </body> 
  
  </html>
  
  
  

  Let's consider a scenario where the user enters the following text in the textarea: "This example illustrates the basic Word and Character Counter using HTML, CSS, and JavaScript."

  As the user types, the application dynamically updates the word and character count, providing instant feedback:

  • 0 Words and 0 Characters

  Conclusion:

  In this tutorial, we've successfully created a Word and Character Counter web application using HTML, CSS, and JavaScript. The step-by-step approach ensures clarity and ease of understanding, making it accessible for developers at various skill levels. This simple yet effective tool can be further enhanced and customized to meet specific project requirements. Building such applications not only improves coding skills but also contributes to creating a more engaging and interactive web environment. Feel free to experiment and expand upon this foundation to add additional features and functionalities to suit your needs. Happy coding!