We will be diving into the world of Javascript to create something practical and educational- a word and character counter app. In this step by step guide we will take you through the process of coding your very own word and character counter app using Javascript, whether you are looking to expand your skills or a beginner, this tutorial is designed to be accessible and informative. By the end of this tutorial you will have a functional app that can count words and characters. You can watch the demo here
Create an HTML code
<html> <head> <title>Word and Character Counter App</title> <meta name="viewport" content="width=device-width, initial-scale =1.0"> <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Roboto Mono|Montserrat"> </head> <body> <h1>Word and Character Counter App</h1> <div class="container"> <textarea id="area" placeholder="Enter your text here" rows="4" cols="28"></textarea> <p class="result"> <span id="word">0</span> words and <span id="character">0</span> characters. </p> </div> </body> </html> The word and character counter app will have a textarea element and when you enter some text it will show the number of characters and words that you have entered.
To do so you will need to have a textarea, p and span element. The span element will be wrapped inside the p element and this is where the the number of words and characters will be shown.
Create a Javascript code
let area =document.getElementById("area"); let character = document.getElementById("character"); let word = document.getElementById("word"); area.addEventListener("input", function () { //count characters let content = this.value; character.innerHTML = content.replace(/s/g, "").length; content = content.trim(); console.log(content); let wordlist = content.split(/s+/); let wordCount = 0; for(i= 0; i< wordlist.length; i++){ if (wordlist[i] !== "") { wordCount++; } } word.innerHTML=wordCount; }) This Javascript code defines an interactive word and character counter app using HTML elements and Javascript event handling.
HTML elements
Three HTML elements are selected and stored as variables using their respective id's which represent the textarea input, character count display and word count display.
Event listener
An event listener is attached to the area variable which listens for the input event and whenever the user types or modifies text in the textarea the code within the event handler function will be executed.
Character count
The content of the input field which is accessed using this.value is stored in the content variable.
The number of characters is calculated by using the replace() method with a regular expression (/s/g) which matches all whitespace character and (content.replace(/s/g, “”)) removes the whitespace and the resulting string length is the character count.
The result is displayed in the the character element using the innerHTML property.
Word count
The content variable is trimmed to remove leading and trailing spaces which is useful to avoid miscounting words due to extra spaces.
The content is split into an array called wordlist using a regular expression (/s+/) which matches one or more whitespaces character, it splits the content into an array of words.
The for loop checks each word and if it is not an empty string the wordCount is incremented and the wordCount is displayed in the word element using the innerHTML property.
Create CSS code
Now you have to design this word and character counter app with some css.
body{ font-family: Montserrat, monospace; background-color: #67595E; } h1 { font-family: Roboto Mono, cursive; display: flex; justify-content: center; margin: 20px auto; } .container { display: flex; flex-direction: column; justify-content: center; width: 100%; background-color: #E8B4B8; } textarea{ margin: 20px auto; width: 80%; background-color:white; border: 3px solid white; font-family: Montserrat, monospace; font-size: 20px; } p { width: 80%; margin: 20px auto; border: 2px solid black; padding: 10px; font-size: 20px; }