DEV Community

Cover image for A Step By Step Guide On How To Code A Word And Character Counter App in Javascript
Pauline Oraro
Pauline Oraro

Posted on

A Step By Step Guide On How To Code A Word And Character Counter App in Javascript

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>
Enter fullscreen mode Exit fullscreen mode

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;
  }) 
Enter fullscreen mode Exit fullscreen mode

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;
} 
Enter fullscreen mode Exit fullscreen mode

Top comments (0)